Running javascript within AJAX loaded object

**Wdblazer** · 11-28-2010, 11:13 AM

I am creating a calendar that is loaded via AJAX, so the page does not load when click previous or next month button. Within the calendar I include another AJAX on each cell, that will show the clicked cell date. I got homepage (include calendar.php, javascript.js), when homepage is execute, there is no javascript run when I click on the calendar cell. It works when I only run calendar.php by itself.

How do I get the javascript to run inside the AJAX?

The javascript within the calendar.php, this code is stored inside javascript.js

Code:

function loadXMLDoc(var1)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

var passingID1 = var1; 
var url = "variables.php";
var modurl = "variables.php?passid=" + passingID1; 
xmlhttp.open("GET", modurl ,true);
xmlhttp.send();
}

My homepage

Code:

<body onLoad='navigate("","")'>

	<div id="calback">
		<div id="calendar">
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		</div>
	</div>

<p>Selected Date
<div id="myDiv"><h2>You have selected !</h2></div>

**djr33** · 11-28-2010, 11:41 PM

Does this help?
http://www.dynamicdrive.com/forums/s...ad.php?t=55727

Be warned, it's a long discussion, but you might find an answer there.

**jscheuer1** · 11-29-2010, 01:31 PM

Your posted code doesn't really make clear what you want to have happen once the responseText is loaded into 'myDiv'. But that's where you have the best opportunity to do it:

Code:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
         // Do Something Here to Initialize the Imported Content
    }
  }

For this to work, whatever code that's required for it to happen must be on the 'top' page, not on the imported page. Javascript code blocks and javascript external tags on the import will not get run, nor be available to either the imported content or the content already on the page.

You might need some kind of test there as well to determine if the content that was just imported can be initialized - like, does it have the required element(s) in it or not? - before running the initialization.

An alternative approach is - say you want something to happen onclick of one or more of the things that you are importing, if so - hard code that onclick event into that element on the import. Once again, code (if needed) to fulfill this event must be on or linked into the 'top' page.

The only other approach I'm aware of is to have your script on the 'top' page listen for events on the document and react to clues like tag name, and/or valid attributes of the element being clicked on - like class, to determine if certain actions need to be carried out.

**Wdblazer** · 11-29-2010, 02:02 PM

Sorry my code wasn't clear. What happen is I have another AJAX code for the calendar. There are 3 files altogether, homepage.html, calendar.php and javascript.js

javascript.js

Code:

var req;

function navigate(month,year) {
        var url = "calendar.php?month="+month+"&year="+year;
        if(window.XMLHttpRequest) {
                req = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
                req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        req.open("GET", url, true);
        req.onreadystatechange = callback;
        req.send(null);
}

function callback() {        
        obj = document.getElementById("calendar");
        setFade(0);
        
		if(req.readyState == 4) {
                if(req.status == 200) {
                        response = req.responseText;
                        obj.innerHTML = response;
                        fade(0);
                } else {
                        alert("There was a problem retrieving the data:\n" + req.statusText);
                }
        }
}

This code will populate the calendar at <div id='calendar'>. And within each date cell, I added this for the onclick function.

calendar.php

Code:

echo "<td valign='top' onMouseOver=\"this.className='dayover'\" onMouseOut=\"this.className='dayout'\" onclick=\"loadXMLDoc($currentdate)\">";

In a nutshell, my onclick loadXMLDoc is inside the calendar which will be AJAX loaded on my homepage. I added the function loadXMLDoc (var1) to the top of my homepage and is not working as well. The javascript variables are not dynamic when I tested them, even when I change the var PassingID1 to static figure, homepage.html will not reflect the changes unless I run calendar.php by itself first. Seem like javascript cannot run dynamic variables inside the AJAX.

**jscheuer1** · 11-29-2010, 03:00 PM

Well, once it's included, calendar.php's javascript.js might point to the other javascript.js. That is if I'm even half following this convoluted setup correctly. It would be best to have two separate filenames for these two separate scripts, and to either use their absolute paths (preferable if allowed -some PHP setups will not allow this), or their relative paths. If relative, one must make sure that these relative paths point to the actual script desired, not to a 404 not Found.

However, there are numerous other things that could be going wrong. To really have a hope of sorting this out, I would need a link to the top level page.

So if you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**Wdblazer** · 12-09-2010, 07:34 AM

Thank you very much jscheuer1, I checked my script and make sure all my javascript path are properly mapped and defined all the objects. Its working now! I do not have a site yet, I am trying out the whole programming things on my computer.

Thread: Running javascript within AJAX loaded object

Thread Tools

Search Thread

Running javascript within AJAX loaded object

Bookmarks

Bookmarks

Posting Permissions