Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem loading Dynamic Ajax Content, please help!

    Hi there,

    I've been trying to get this to work, but it will not load my test.html website into my div named Content, I also downloaded the demo found here : http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    But I cant get that to work either, what am I doing wrong? (sorry for double post, didn't see this sub folder)

    Here is my code. :


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</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>
    
    
    <style type="text/css">
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-color: #333;
    }
    #Container {
    	padding: 0px;
    	width: auto;
    	margin-right: auto;
    	margin-left: auto;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	background-color: #CCC;
    }
    #Holder {
    	padding: 0px;
    	width: auto;
    	margin-right: auto;
    	margin-left: auto;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	height: 750px;
    	background-color: #CCC;
    }
    #NavBar {
    	padding: 0px;
    	height: 705px;
    	width: 170px;
    	margin-right: auto;
    	margin-left: auto;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	float: left;
    	background-color: #000;
    }
    #Content {
    	padding: 0px;
    	height: 705px;
    	margin-right: auto;
    	margin-left: auto;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	background-color: #999;
    	background-image: none;
    	background-repeat: repeat;
    	background-position: left;
    }
    #Header {
    	padding: 0px;
    	height: 45px;
    	width: auto;
    	margin-right: auto;
    	margin-left: auto;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	background-color: #333333;
    }
    #Fotter {
    	padding: 0px;
    	height: 25px;
    	margin-right: auto;
    	margin-left: auto;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	background-color: #DF7000;
    }
    body,td,th {
    	color: #FFF;
    }
    </style>
    </head>
    
    <body>
    <div id="Container">
      <div id="Holder">
        <div id="Header">
        
       <em>MTS PHOTOGRAPHY</em></div>
       
       
       
        <div id="NavBar">
     
    
     
       <a href="javascript:ajaxpage('test.html', 'Content');">test</a>
    
    
        
        
        
        
    
    
    
    </div>
        
        
        </div>
      </div>
      <div id="Fotter">Enter fotter content here </div>
    </div>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    anybody? I'm new to this , Only started 3 days ago . I'm finding it fascinating to learn this, but oh so dam frustrating when I dont understand or cant get it to work. I've tryed using Iframes, but the webpage looks very strange when viewd on a lesser resolution.

    I think the ajax version is the best way to do it ? But I cant get it to work. Nor can I get the demo to work, what do I need to do?

    please help.


  •  

    Posting Permissions

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