Results 1 to 3 of 3

Thread: Dynamic Ajax Content

  1. #1
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamic Ajax Content

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem:
    First of all I want to thank you for this free script. I got it working on my site.
    I was wondering if the following were to be possible:

    If index.html loads for example a normal link named test.html with this script, is it possible to give visitors of my site a direct link to test.html?

    If they visit test.html that test.html will load automatically in a div in index.html?

    Thanks in advance for your help.

    Greetings
    laurens

  2. #2
    Join Date
    Aug 2004
    Posts
    9,876
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    The common approach to enable each of the pages loaded via Ajax to be accessed directly is to modify the script so a unique hash is added to the main page's URL each time a page is requested. When the page loads, the script can then check for the existence of a hash, and if found, load the page directly into the content container without having the user click on a link first. The below code modifies the original script for this (additions required in red):

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ajax Rotating Includes Script</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 loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    
    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(url, page_request, containerid)
    }
    page_request.open('GET', url, true)
    page_request.send(null)
    }
    
    function loadpage(url, 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
    		location.hash=url
    	}
    }
    
    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">
    #leftcolumn{
    float:left;
    width:150px;
    height: 400px;
    border: 3px solid black;
    padding: 5px;
    padding-left: 8px;
    
    }
    
    #leftcolumn a{
    padding: 3px 1px;
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid gray;
    }
    
    #leftcolumn a:hover{
    background-color: #FFFF80;
    }
    
    #rightcolumn{
    float:left;
    width:550px;
    min-height: 400px;
    border: 3px solid black;
    margin-left: 10px;
    padding: 5px;
    padding-bottom: 8px;
    }
    
    * html #rightcolumn{ /*IE only style*/
    height: 400px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="leftcolumn">
    <a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Porsche Page</a>
    <a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>
    <a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>
    
    <div style="margin-top: 2em">Load CSS & JS files</div>
    <a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>
    
    </div>
    
    <div id="rightcolumn"><h3>Choose a page to load.</h3></div>
    <div style="clear: left; margin-bottom: 1em"></div>
    
    <script>
    
    if (location.hash != ''){
    	try{
    		ajaxpage(location.hash.substr(1), 'rightcolumn')
    	} catch(e){}
    }
    </script>
    
    </body>
    
    </html>
    Try running the above page and click on a link to request a page. Notice how the URL in the location bar is augmented with a hash. The resulting URL if directly copied and pasted onto a new browser window will load the above page but with the requested Ajax page loaded by default inside it.
    DD Admin

  3. #3
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello admin,

    Thanks for your reply and your help.

    The thing is the following:

    I have a main site directed by index.html which has a menu that puts all my other html files in div 'rightcolumn' .

    When google searches my sitemap it finds all the html files and puts those url's in google search. When visitors click on those urls they should be opened in rightcolumn of index.html. I cannot make google change the url names.

    So I think there needs to be a script on all my html files that direct it to be loaded in rightcolumn of index.html.

    I once had such a solution for an iframe which was located on index.html. But I like ajax better...

    Well hope you can help,

    Thank you,

    laurens

Bookmarks

Posting Permissions

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