Simple AJAX trouble

[Pinchanzee]

I'm having trouble with some basic AJAX, I'm very new to it but have found a similar chunk of javascript that I've altered to my needs (kind of).
I have a <div> that I want to change upon the click of a link. It contains a list of entries, ordered by some variable $order. I want clicking the "least" or "most" button to change that order.
The <div> is called "content"
Here's the JS:

<!--
	function update(str){
	    var xmlhttp;
	    if (str==""){
		document.getElementById("content").innerHTML="";
		return;
	    }
	    xmlhttp=new XMLHttpRequest();
	    xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
		    document.getElementById("content").innerHTML=xmlhttp.responseText;
		}
	    }
	    xmlhttp.open("GET","/site/linkfilter.php?order="+str,true);
	    xmlhttp.send();
	}
	-->

The physical link works and triggers the above code, with "str" being either "most" or "least", but it never seems to actually access the linkfilter.php file, doesn't even trigger a simple "echo 'hello';" on the first line.
Have a feeling I'm using xmlhttp completely wrong.

And here's the only really relevant part of the linkfilter.php file (with an exit; at the end)

else{
    $_SESSION['order']=$_GET['order'];
    header("location:/browse/");
}

I have the content <div> set up to act differently depending on the order and if you think it necessary to see it, it's here: pinchweb

Any help would be greatly appreciated. I haven't got round to the task of actually learning JS yet but couldn't pass up on this opportunity for AJAX.

[Taywin]

Before going further, what browser are you using? What targeted browser are you working for? If I remember correctly "xmlhttp=new XMLHttpRequest()" does not work on IE because it requires different object.

[Pinchanzee]

I've read that only IE5 and 6 requires a different object (active or something), so I was aiming for everything but that, I'll patch that bit of code back in if it's important.

Changed to:

if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	    } else{
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }

[macgurl70]

Ok, I have a long Javascript that worked for me to load the xml

if (window.XMLHttpRequest) {
		//for firefox, opera and safari browswers
		var xmlHttp = new XMLHttpRequest();
	}
	if (typeof XMLHttpRequest == "undefined")
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e) {}
    //Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
    throw new Error("This browser does not support XMLHttpRequest.");
  };
	
	
/*@cc_on @if(@_jscript)
var xmlHttp=new ActiveXObject("Microsoft.XMLDOM");
xmlHttp.async="false";
xmlHttp.load("sellers.xml");
@else */
xmlHttp.open("GET","sellers.xml",false);
xmlHttp.send(false);
var xmlDoc= xmlHttp.responseXML;
/*@end
@*/

But, a co-worker explained using JQuery for this is much easier - however, you would have to use a "safe mode" since php and JQuery both use the $.

Without the "safe mode" the JQuery looks like:

$(document).ready(function(){
	$.ajax({
		   type:"GET",
		   url:"nameshere_xml.xml",
		   datatype:"XML",
		   success:setPage
		   })
						   });

Here is a link explaining how to use JQuery with the safe mode.

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

hope this helps and everything works ok.

[Pinchanzee]

Many thanks for the push in the right direction! Didn't even know about Jquery..
After much research and annoyance, finally found something that at least does one aspect of the thing I need:

[in the head tags]
<script src="http://code.jquery.com/jquery-latest.js"></script>
    
    <script>
	var $j = jQuery.noConflict();
	$j(function() {
	    $j("linkname").click(function(evt) {
		$j("divname").load("contenttobeloaded.php")
		evt.preventDefault();
	    })
	})
    </script>

where linkname is say ".foo" for class="foo" or "#bar" for class="bar", likewise with the div identifier.
Had to take the chunk of code I wanted reloadable out and include instead (which is the same "contenttobeloaded.php" file).

Again, many thanks, much appreciated!
All I need to do now is find if there's some way to parameter pass into jquery so i don't have to make a new script for each column entry, which is virtually identical. But that's a different problem.

Thanks again! Certainly much easier on the eye than all that xmlhttp object handling.