how to apply js to externally loaded page (page loads via Ajax)

**superjadex12** · 07-27-2006, 11:03 PM

Hello, I am using a routine that collects "get" variables from a form and asychronously serves them to an external page, that is then loaded into a div file right on that same form page. ( Simplified Ajax )

the routine works great, but I would like to add some javascript to my external page. I tried marking up the external page with <head> and <body> and then putting the javascript in the head - doesnt work.

I tried putting the javascript on the main form page (the top level page that the external loads on ) and that doenst work either.

I am NOT using the Dynamic ajax content found here:
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

But there is a way to load css, and js files that work on the external page. It is found at the bottom , the loadobjs function.

Sounds great, but I tried that and it didn't work. I'm not advanced at javascript so I am possibly just implementing it wrong or not changing something ??

This is the actual code I am using and if anyone can tell me if and how i can use the loadobjs function with this code I'd very much appreciate it.
Or if there is any other way to apply js to the external page. Thank you !!

Code:

   var http_request = false;
   function makeRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = alertContents;
      http_request.open('GET', url + parameters, true);
      http_request.send(null);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var getstr = "?";
      for (i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].tagName == "INPUT") {
            if (obj.childNodes[i].type == "text") {
               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
            }
            if (obj.childNodes[i].type == "checkbox") {
               if (obj.childNodes[i].checked) {
                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               } else {
                  getstr += obj.childNodes[i].name + "=&";
               }
            }
            if (obj.childNodes[i].type == "radio") {
               if (obj.childNodes[i].checked) {
                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               }
            }
         }   
         if (obj.childNodes[i].tagName == "SELECT") {
            var sel = obj.childNodes[i];
            getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
         }
         
      }
      makeRequest('catalog/get.php', getstr);
   }

and the form and DIV look like this :

Code:

<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
----- form questions ----
<input type="submit" name="button" value="Update">
</form>

    <div name="myspan" id="myspan"></div>

** credit for this script goes to http://www.captain.at/howto-ajax-form-post-get.php

**jscheuer1** · 07-28-2006, 08:19 AM

Well, actually your second idea is fine. Put the script on the top page. Then the only problem is to get it to execute at the appropriate time. To know when that would be and how to make that happen, I would need to see both the script and the content that it is meant to work with.

For example, if the script has a function that runs onload, that would have to be skipped, we wouldn't want it running onload of the top page. And we would want to set up a polling function and run that at the same time we loaded the content that the script is meant to work with. Here is a simple polling function:

Code:

function pollIt(){
if (document.getElementById('polled'))
run the script's onload function here
else
setTimeout("pollIt()", 60);
}

This would require some element in the AJAX added content to have the id of "polled". This element should be at the end of the added content. You could use an existing element or just add an empty span at the end:

HTML Code:

<span id="polled"></span>

Thread: how to apply js to externally loaded page (page loads via Ajax)

Thread Tools

Search Thread

how to apply js to externally loaded page (page loads via Ajax)

Bookmarks

Bookmarks

Posting Permissions