Results 1 to 6 of 6

Thread: Running javascript within AJAX loaded object

  1. #1
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Running javascript within AJAX loaded object

    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>

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

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
  •