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
