Results 1 to 2 of 2

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

  1. #1
    Join Date
    Jul 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,372
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

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

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

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
  •