AJAX does not work without an alert

Instead of an id getting its innerHTML changed, the entire page is getting refreshed with this function of mine (you may want to look just at the end of the function where there's an alert):

function morerating(ratingform, checkflag, loc)
{
var f = document.forms[ratingform];
var rating_done_flag = 0;
var params = "";
if (checkflag == true)
check = checkrating(ratingform);
else
check = true;
if(check == true)
{
f.submit_rating_done.value = "";
for (i=0;i < f.elements.length;i++) {
if(f.elements[i].type == 'radio' || f.elements[i].type == 'checkbox')
{
if(f.elements[i].checked)
{
params = params + f.elements[i].name +'='+ encodeURI(f.elements[i].value) + '&';
if (f.elements[i].name == "rating_1" || f.elements[i].name == "rating_2" || f.elements[i].name == "rating_3" || f.elements[i].name == "rating_4" || f.elements[i].name == "rating_overall")
rating_done_flag = 1;
}
}
else if (f.elements[i].name && f.elements[i].value)
{
params = params + f.elements[i].name +'='+ encodeURI(f.elements[i].value) + '&';
}
}
shows = loc;
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
if(document.getElementById('morehide'))
{
document.getElementById('morehide').style.display = "none";
document.getElementById('morehide').innerHTML = "";
}
if(shows == "rating_main_block" || shows == "rating_main_block_editorial" || shows == "loginbox" || shows == "editorial_loginbox")
{
params = params + "submit_rating_done=1&";
params = params + "xmlrequest=1&";
}
else
{
if(!document.getElementById('morehide'))
{
f.submit_rating_done.value = "Submit";
}
}
params = params + "shows="+shows;
var url='/blocks/profiles/common/user_store.php';
url=url + "?" + params;
xmlHttp.onreadystatechange=stateChangedALL;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
//setTimeout('window.scrollBy(0, 350)', 1000);
//alert('help2');
return true;
}
else
{
return false;
}
}

That alert('help2'), if removed, causes the page to just reload, but with it, AJAX works fine. I tried some dummy setTimeout option also as you can see, but that doesn't seem to help either. I also tried setTimeout("alert('help2')", 1000).

If it helps, these are the other functions referred to there, though they're pretty standard AJAX stuff:


function stateChangedALL()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById(shows).style.display="block"
if (xmlHttp.responseText != "")
document.getElementById(shows).innerHTML=xmlHttp.responseText
else
document.getElementById(shows).style.display="none"
var the_node = document.getElementById(shows);
execJS(the_node);
if(document.getElementById(trashid))
{
xmlHttp2.send(null);
}
}
else
{
document.getElementById(shows).innerHTML="<br><br><div class=\"a9bl\" align=\"center\"><font color=black>Loading, please wait...</font><div>"
}
}


and


function GetXmlHttpObject()
{
var req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest && !(window.ActiveXObject))
{
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
}
else if(window.ActiveXObject)
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
return req
}


I'd be quite grateful for any pointers! Thank you for your time!

Lol without even seeing your HTML code I'm going to guess that your form has morerating() as it's onsubmit.

If I'm right, then that right there is your problem. You need to return false if you don't want the page to refresh on a form submit:

JS:
function onFormSubmit(form_element){
// do stuff
return false;
}

HTML:
<form onsubmit="return onFormSubmit(this)"></form>

Hey itsallkizza, thanks for the post. Unfortunately, that doesn't seem to be what's wrong. This is my button:

<input name="submit_rating_done" value="Submit" onclick='return morerating("ratingform", false, "rating_main_block_editorial"); return false;' type="submit">

Is there anything else that seems to suggest itself from that line of code? And like I asked, why should it work with the alert call and not without it?

Is that input inside of a <form>? If so, refer back to my first post.

If not, please post the rest of your code.

You sent me your code in an email.

The input in question submits a form. Refer back to Post #2 - I showed the proper way of submitting a form when you don't want it to move the location of your page.

itsallkizza, you got it bingo in your first post, but it just wasn't getting into my head. I had to change the line "return true" in my morerating function to "return false", and nothing else :). You kept telling me again and again, but I guess I needed to be spoon-fed. Thanks a heap for everything!

Still, though, why was the alert making it work?

To be honest, I can't explain that one. The way you were doing it was something like this (which as you can see, still refreshes the page):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[

function onFormSubmit()
{
alert("hey!");
}

// ]]>
</script>
</head>
<body>

<form>
<input type="text" name="filler" value="some text" /><br />
<input type="submit" value="submit form" onclick="onFormSubmit()" />
</form>

<input type="button" value="change bg color" onclick="document.getElementsByTagName('body')[0].style.backgroundColor='red';" />

</body>
</html>


All I can say is that if you run any asynchronous ajax code before the alert, the ajax data will be requested, returned and dealt with. It seems that somewhere along the line the browser forgot it was supposed to refresh (which obviously is a horrible explanation lol).

And I'm glad you got it fixed ;) I'm always happy to help!