Log in

View Full Version : Resolved Dynamic AJAX Content: including an individual div?


traq
11-02-2008, 06:04 AM
1) Script Title: Dynamic ajax content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.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:

<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.
ddadmin
11-02-2008, 08:58 PM
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:


<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:


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:


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.
traq
11-02-2008, 09:41 PM
thanks... have some experimenting to do now... :)
traq
11-03-2008, 12:41 AM
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!
Sputnik
02-20-2011, 08:35 PM
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:



<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