Results 1 to 2 of 2

Thread: Access AJAX dynamic content via browser

  1. #1
    Join Date
    Mar 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Access AJAX dynamic content via browser

    Hi All - apologies if this is in the wrong thread, I couldn't find a specific AJAX forum.

    My question is in reference to this script: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    I have been using it as the main framework of my personal website for years and I'm very satisfied with it.

    However, I was wondering if there is a way I can surf directly on certain pages instead of having to click a link?

    For instance, lets says I have 2 pages on my site.

    1. About
    2. Contact


    And I have links to both pages on my homepage.

    Currently, this is the only way I can inform people how to access them (via the homepage).

    Is it possible to use REL or similar in the address bar to directly access either page within the dynamic content framework?

    I can access the 'About' page by surfing directly to mysite.com/about, but the content does not show within the framework of the two panel dynamic layout - it simply shows the minimal HTML page.

    I hope you can understand what I am trying to say.

    I use the 2 pages above as examples, but of course it is possible to have lots of pages and lots of layers to a website. All I want to do is provide a URL to my 'About' page (or any other for that matter) as one link. At the moment I have to put my websites full URL in and instruct where to go from there... "Once on the homepage click on the 'About' link, then scroll to the bottom where it says 'Employment', then that should take you to a page where blah blah blah" etc.

    It would be handy to just be able to give a direct link.

    Does anybody know how I can do this?

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    That (outdated) script doesn't allow you to do what you want.
    Generally speaking, Ajax scripts do not handle the browser's history and URLs within the address bar 'correctly'.

    An option would be to use an iframe instead. Try to experiment with the following, which uses location.search for links in index.html, and parent.location.search in the iframed pages:

    index.html:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>bla</title>
    
    <style>
    body {font-family: verdana; font-size: 13px; }
    </style>
    
    </head>
    
    <body >
    
    <div style="position: absolute; top: 45%; left: 10px">
    <a href="javascript: void(0)" onclick="location.search='about.html'">About</a><br>
    <a href="javascript: void(0)" onclick="location.search='contact.html'">Contact</a><br>
    <a href="javascript: void(0)" onclick="location.search='http://www.dynamicdrive.com'">DynamicDrive</a><br>
    </div>
    
    <div style="position:absolute; left:200px; top: 10%; right: 200px; bottom: 10%">
    <iframe name="ifr" style="position:absolute; width: 100%; height: 100%; background: white; border: 1px solid silver" src="http://www.dynamicdrive.com" frameborder="0"></iframe>
    </div>
    
    
    <script>
    if(location.search)ifr.location.replace(location.search.substring(1))
    
    </script>
    
    </body>
    
    </html>
    about.html:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>bla</title>
    
    <script>
    function orph(){//dont't allow iframed pages to show as 'orphans' (without the main page). The main page is called 'index.html' here
    
    if (parent.location == self.location) 
    parent.location.href="index.html?" + document.URL.substr(document.URL.lastIndexOf("/")+1,document.URL.length)
    }
    
    
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", orph, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", orph );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                orph();
            };
        }
        else
            window.onload = orph;
    }
    </script>
    
    </head>
    
    <body>
    <h1 style="text-align: center">About</h1>
    <a href="javascript: void(0)" onclick="parent.location.search='about.html'">About</a><br>
    <a href="javascript: void(0)" onclick="parent.location.search='contact.html'">Contact</a><br>
    <a href="javascript: void(0)" onclick="parent.location.search='http://www.dynamicdrive.com'">DynamicDrive</a>
    
    </body>
    
    </html>
    contact.html:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>bla</title>
    
    <script>
    function orph(){//dont't allow iframed pages to show as 'orphans' (without the main page). The main page is called 'index.html' here
    
    if (parent.location == self.location) 
    parent.location.href="index.html?" + document.URL.substr(document.URL.lastIndexOf("/")+1,document.URL.length)
    }
    
    
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", orph, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", orph );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                orph();
            };
        }
        else
            window.onload = orph;
    }
    </script>
    
    </head>
    
    <body>
    <h1 style="text-align: center">Contact</h1>
    
    <a href="javascript: void(0)" onclick="parent.location.search='about.html'">About</a><br>
    <a href="javascript: void(0)" onclick="parent.location.search='contact.html'">Contact</a><br>
    <a href="javascript: void(0)" onclick="parent.location.search='http://www.dynamicdrive.com'">DynamicDrive</a>
    
    </body>
    
    </html>
    Note:
    In the example above, the starting page (in the iframe, index.html) is DynamicDrive. Of course, you would choose a page of your own instead, for instance about.html
    Last edited by molendijk; 03-03-2015 at 01:03 PM. Reason: Added explanation

Similar Threads

  1. Dynamic Ajax Content & Ajax tabs running slowly on IE
    By Monclee in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-12-2012, 12:32 AM
  2. Browser back button with dynamic ajax content
    By dmelnyk in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-07-2011, 01:30 AM
  3. Dynamic Ajax Content - browser back
    By tomkorver in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-22-2009, 05:02 PM
  4. Dynamic Ajax Content, but with browser functions?
    By Quizosde in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-18-2008, 07:43 PM
  5. Replies: 0
    Last Post: 12-20-2006, 12:21 PM

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
  •