Ajax Dynamic Content Not Working
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2

Thread: Ajax Dynamic Content Not Working

Hybrid View

  1. #1
    Join Date
    Jan 2012
    Posts
    1

    Ajax Dynamic Content Not Working

    Hi guys,

    little snag I've run into. I'm wanting to use iFrames again but it wont seem to work. I've got it all set up, but when you click the iframe it removes everything but doesnt add the new content I want to show.

    Index:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    <html>
    <head>
    	<title> Amphicraft - True Minecraft Servers </title>
    	<script type="text/javascript">
    /***********************************************
    * Dynamic Ajax Content-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""
    
    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    
    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    </script>
    	
    <head>
    <body background="images/bg.png">
    
    <div id="bar2">
    	<center>
    		<a href="javascript:ajaxpage('home.html', 'contentarea');">Test</a>
    	</center>
    </div>
    <div id="bar1"></div>
    
    <div id="contentarea">
    
    <div id="leftcolum">
    	Testing
    </div>
    
    <div id="rightcolum">
    	Testing
    </div>
    
    
    </div>
    
    </body>
    </html>
    CSS:

    Code:
    html {
    	border: 0;
    	margin: 0;
    }
    
    body {
    	border: 0;
    	margin: 0;
    }
    
    .center {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .left {
    	float: left;
    }
    
    .right {
    	float: right;
    }
    
    #contentarea {
    	height: 100%;
    	width: 1080px;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #rightcolum {
    	width: 400px;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	float: right;
    }
    
    #leftcolum {
    	float: left;
    	width: 660px;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	padding-left: 20px;
    }
    
    #bar1 {
    	background-image: url(images/bar1.png);
    	height: 120px;
    	width: 100%;
    }
    
    #bar2 {
    	background-image: url(images/bar2.png);
    	height: 60px;
    	width: 100%;
    }
    Page I want to be displayed when you click the iFrame:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    <html>
    <head>
    	<title> Amphicraft - True Minecraft Servers </title>
    <head>
    <body>
    
    <div id="leftcolum">
    Testing
    </div>
    
    <div id="rightcolum">
    Testing
    </div>
    
    </body>
    </html>
    Before click:



    After click:




    Any help would be great!

  2. #2
    Join Date
    May 2012
    Posts
    3

    Re: Ajax Dynamic Content Not Working

    Are you sure the requesting URL by ajax is in the same domain name?

    Ajax can't cross-domain by defult.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center