Results 1 to 5 of 5

Thread: Dynamic AJAX Content: including an individual div?

  1. #1
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default Dynamic AJAX Content: including an individual div?

    1) Script Title: Dynamic ajax content

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

    3) Describe problem:
    I am attempting to use the Dynamic AJAX Content script to include a particular <div> on a target page (rather than the entire page). I tried using the ajaxpage script as follows:
    Code:
    <script type="text/javascript">
         ajaxpage('./calendar/index.html#currentmonth', 'upcoming')
    </script>
    and tested it locally, but it includes the entire calendar/index.html page instead of just the #currentmonth. Am I asking too much of this script?

    thanks, everyone.
    Last edited by traq; 11-05-2008 at 03:57 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can't just retrieve a particular section within the remote page and display it using this script, no. However, what you can do is wrap that section you want shown in a DIV tag with a unique ID attribute, then, once the entire remote page has been fetched, modify the script to show just that section.

    Assuming your external page's content looks like this:

    Code:
    <h2 id="mysection">Intended portion to display.</h2>
    
    Welcome to Dynamic Drive, the #1 place on the net to obtain free, original DHTML & Javascripts to enhance your web site! Last updated Oct 29th, 08': Revised Script(s)
    And you only want to show "mysection" on the main page when retrieved, you'd simply modify the following function within the script from:

    Code:
    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
    }
    to instead:
    Code:
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
    document.getElementById(containerid).style.display="none"
    document.getElementById(containerid).innerHTML=page_request.responseText
    document.getElementById(containerid).innerHTML=document.getElementById("mysection").innerHTML
    document.getElementById(containerid).style.display="block"
    }
    }
    where "mysection' should correspond to the ID of the DIV within your external page that's to be shown.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    traq (11-02-2008)

  4. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    thanks... have some experimenting to do now...

  5. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    okay, cool. that gets the individual <div> I want. And, elsewhere on the page where I want to include an entire external page, I just wrap the whole page content (just inside the <body> tags) in the same ID name. Thanks very much!

  6. #5
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Is it possible to specify target DIV ID in HTML markup?

    Wow, thanks ddadmin. This script is great and I've used it a few times. The new addition you provided above is fantastic!

    I was wondering if anyone could help me with the following related dilemma:

    I have a few links on my page. I want each link to retrieve the content of a different <div> on the target page. With the current script, the DIV ID is specified in the Javascript file and not in the markup on the original HTML page.

    Is there a way of including a variable in the HTML link that specifies the DIV ID on the target page.

    Something like this:

    Code:
    <a href="javascript:ajaxpage('ExternalPage.html #SpecificDIV', 'rightcolumn'); loadobjs('Style.css');">Link1</a>
    ...where "#SpecificDIV" was the name of a specific DIV on the target page.

    This would allow there to be multiple links on the page without attaching multiple versions of the Javascript file.

    I hope I phrased that ok. I'm new to Javascript and JQuery.

    Many thanks

    Sputnik

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
  •