[JavaScript/AJAX] <form> + innerHTML issues...

[WILL]

Hey folks!

I figured I'd post it here first, just to see.

Ypu, I've been playing around with some AJAX stuff lately. XMLHttpRequest is quite the nifty little object.

I've managed to make a page that will load other pages within a div tag without having to reload the page. "Wooow, neato!" :lol:

Here is the royal pain in the butt now. By using the .InnerHTML property to assign the new contents for the div tag, it won't allow any of my form tags or elements to pass through it.

Any ideas?

Here is my little function that will take a call like "ajaxpage(url)" and load the assigned url to a div block called 'page'.

// XMLHttpRequest Object Function
function ajaxpage(url)
{
   var http_request = false;

   if (window.XMLHttpRequest) { // Mozilla, Safari,...
       http_request = new XMLHttpRequest();
       if (http_request.overrideMimeType) {
           http_request.overrideMimeType('text/xml');
       }
   } 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('Unfortunatelly you browser doesn\'t support this feature.');
       return false;
   }
   http_request.onreadystatechange = function() {
       if (http_request.readyState == 4) {
           if (http_request.status == 200 || window.location.href.indexOf("http") == -1) {
               LoadPage(http_request, 'page');
           } else {
               alert('There was a problem with the request.(Code: ' + http_request.status + ')');
           }
       }
   }
   http_request.open('GET', url, true);
   http_request.send(null);
}

// Replace Element Contents
function LoadPage(page_request, element_id)
{
	document.getElementById(element_id).innerHTML = page_request.responseText;
}

[cronodragon]

Which browser are you using? I think IE 5 and 6 have a bug related to innerHTML.

[WILL]

I use FireFox, but from what I've been reading so far this is common for all browsers.

Thing is I need a solution for all (--well current IE, FF, Opera & Safari) browsers not just one or the other. :?

[Robert Kosek]

Maybe MooTools can do the DOM switch for you. Otherwise I just don't know. http://mootools.net/

[WILL]

Well as helpful as a framework or library like that might do the hard stuff for me, I won't learn anything from it. At least not what I want to know here.

It's been suggested by some articles read in my research that document.getElementById('element_id').InnerHTML is not the DOM friendly way of altering the guts of an element block. This is sort of proof as to why. But I'm madly curious if there is not a much better way than to go all out and make my own HTML parser just to create each element and text node that makes up the entire page.

Or is this exactly what I need to do?

[savage]

Why not use an iFrame within the Div and pass the form page in that way.

There seem to have some easy to follow examples here -
http://www.cryer.co.uk/resources/javascript/script4.htm

[WILL]

Well that is a solution. But will I have any problems with JavaScript inside and/or outside of the created iframe?

[Robert Kosek]

And you totally can't read what MooTools is doing right...

[WILL]

I just found out that thats not a very good solution if I want to maintain contectivity between the guts of the new page inside the div and the javascript to update the page inside... :?

As far as MooTools goes, I'm not finding any functions inside of there that does what I'm asking about. :read: :scratch:

It seems like my best option is to make my own HTML parser in JavaScript. Which in a way is kind of funny considering that this is under a Browser. You'd think that I'd already have some kind of function that would create (or help create) the HTML for me.

[WILL]

Hey guys, just found this little tid-bit out there. It was very helpful as a way around the more odd behavior of dynamically loading form tags into a div without the use of .innerHTML.

http://jszen.blogspot.com/2007/02/ho...-into-dom.html

Or to save you some time page loading...

var range = document.createRange();
range.selectNode(document.body);
var parsedHTML = range.createContextualFragment(SomeStringOfHTML);

document.body.appendChild(parsedHTML)

Thanks for the help so far guys. :thumbup:

I do have a side question though... does anyone know if this code is workable for IE/Safari/Opera as well as FF? I've only managed to test it and see it working on FireFox 2.0.