AJAX: Call back handler didn't work

[Sagar Rohankar]

Hi All,

I'm using AJAX to store my product info into database.
This code works fine and displayed the proper message:
JSP:

<!-- Submit button, called AJAX -->
<img src="/OMS/images/submitP.jpg" onclick="return retriveURL('productRegistration.do');"/>
<!-- A Loding image, while AJA request is proceesing -->
<img src="/OMS/images/ajax-loader.gif" id="loading" style="display:none"/>

JS:

function retriveURL(url)
{
       url += "?pc=" + pcode + "&pn=" + pname + "&ps=" + psupp;
       .
       .
       .
       req.onreadystatechange = processStateChange; // call back handler
      try{
            req.open("GET", url, true); // 'true' means Asynchronus
       }
      catch(e)
      {
          alert(e);
       }
       req.send(null); 
}

But when I changed the JSP code from "Image Button" to "Button" type, the behavior changes and call back handler(processStateChange) dosent get called,

JSP:

<button onclick="return retriveURL('productRegistration.do');">Submit</button>

JS:

function processStateChange() { 
                        if (req.readyState == 4) { 
                            if (req.status == 200) { 
                                alert("OK");// This message dosent get print in second "Button" case..
                                eval("var response = ( " + req.responseText + " )");
                                .
                                .
                                .
                                // hide loading image, and this works in both cases
                                document.getElementById("loading").style.display = "none";
                             }
                         }
}

And this weird behavior is only on FF, Chrome, But not on IE, On IE both code works and prints result.

Any pointers?

[K West]

Can this be the reason?

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

Got it from
http://www.w3schools.com/tags/tag_button.asp

Best Luck

[Bear Bibeault]

If you want your button to have submit semantics you need to specify type="submit"

[Eric Pascarello]

You need to return false to keep the default action from firing.

<button onclick="return retriveURL('productRegistration.do');return false">Submit</button>  

Eric

[Sagar Rohankar]

K West & Bear, thanks for the help, but I'm not submitting a FORM, but calling a JS function on 'onclick()' event.

Eric , your solution works, but with little modification, as

<button onclick="retriveURL('productRegistration.do');return false;">Submit</button>  

and you said "return false to keep the default action from firing. ", can you elaborate this ?

[Eric Pascarello]

Return false keeps the default action from happening.

Eric

[Dawn Charangat]

how are you creating the "req" object ??? XMLHttp ??? ActiveXObject ???

The way you create one for MSIE is totally different for other browsers.

[Sagar Rohankar]

And the default action is "processStateChange()", a call back handler, Am I right ?

Dawn Charangat wrote:how are you creating the "req" object ??? XMLHttp ??? ActiveXObject ???
The way you create one for MSIE is totally different for other browsers.

I think that wouldn't be an issue, still FYI:

if(window.XMLHttpRequest)
{
           //Non IE browser
           req = new XMLHttpRequest();
           req.onreadystatechange = processStateChange; // call back handler
           try{
                      req.open("GET", url, true); // 'true' means Asynchronus
           }
           catch(e)
           {
                      alert(e);
           }
           req.send(null); 
                        
}
else{ 
           if(window.ActiveXObject)
           {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                    req.onreadystatechange = processStateChange; // call back handler
                    try{
                            req.open("GET", url, true); // 'true' means Asynchronus
                    }
                   catch(e)
                   {
                         alert(e);
                   }
                   req.send(null); 
                                
             }
                     
}

[Dawn Charangat]

I can't be sure that this is the problem... but I find some loopholes in the way you create your request object.
Try the below code:

     var xmlHttp = null;
	if (window.XMLHttpRequest) 
	{
		try 
		{
			netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
			netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
		} 
		catch (err) 
		{
			alert("Error initializing XMLHttpRequest 1.\n" + err);
		}
		xmlHttp = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject) 
	{
		
		var msobj = new Array(	"Msxml2.XMLHTTP.6.0", 
								"Msxml2.XMLHTTP.4.0", 
								"Msxml2.XMLHTTP.3.0", 
								"Msxml2.XMLHTTP", 
								"Microsoft.XMLHTTP");
		var x, len = msobj.length;
		for (x = 0; x < len; ++x) 
		{
			try 
			{
				xmlHttp = new ActiveXObject(msobj[x]);
				break;
			} 
			catch (err) 
			{
				alert(": Error initializing XMLHttpRequest 2.\n" + err);
			};
		}

	}

[Sagar Rohankar]

And that's throws an error like,

Error initializing XMLHttpRequest 1.
Error: A script from "http://localhost" was denied UniversalBrowserRead privileges.

Do you really thinks that code makes a difference ??
I just scared, looking at those "msobj" array and setting privileges for "netscape".

[Eric Pascarello]

Dawn,

Why in the world would people need to use this:

#             netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");  
#             netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 

Also MS does not recommend that you use half of the XMLHTTP values you supply in that array.

Eric

[Sagar Rohankar]

Still my question is unanswered ? I'm just making it sure.

Eric Pascarello wrote:Return false keeps the default action from happening

Sagar Rohankar wrote:And the default action is "processStateChange()", a call back handler, Am I right ?

[Eric Pascarello]

One of the posts above I said: "return false keeps the default action form happening." Another way to say it it cancels the click. Does that make sense yet?

Eric

[Sagar Rohankar]

Eric Pascarello wrote:Does that make sense yet?

Absolutely, Thanks Eric