AJAX Problem: page refreshes after call

[ziycon]

The AJAX is working but with a slight problem it refreshes the page after it runs map.php and all the output from map.php disappears from the screen back to the original state before map.php is called!????

<script type="text/javascript" language="javascript">
	var loading_img = '../../images/layout/loading.gif';
	var loading_msg = ' Loading Data...';
	var xmlhttp_obj = false;//create the XMLHttpRequest
	
	function ewd_xmlhttp()
	{
		if (window.XMLHttpRequest)
		{ // if Mozilla, Safari etc
			xmlhttp_obj = new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{ // if IE
			try
			{
				xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e)
				{

				}
			}
		}
		else
		{
			xmlhttp_obj = false;
		}

		return xmlhttp_obj;
	}   //get content via GET

	function getcontent(url, containerid)
	{
		var xmlhttp_obj = ewd_xmlhttp();
		document.getElementById(containerid).innerHTML = '<img src="' + loading_img + '" />' + loading_msg;
		xmlhttp_obj.onreadystatechange=function()
		{
			loadpage(xmlhttp_obj, containerid);
		}
		xmlhttp_obj.open('GET', url, true);
		xmlhttp_obj.send(null);
		alert(url);
	}     

	function loadpage(xmlhttp_obj, containerid)
	{
		if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 )
		{
			document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
		}
	}
//]]>
</script>
...
<input type="text" id="date" name="date" size="10" onfocus="showCalendarControl(this);" readonly="readonly" />
<input type="submit" value="Refresh" onclick="getcontent('../../map.php?id=1&value='+document.getElementById('date').value,'case_map_wrapper');" />

map.php

<?php
session_start();

$txt = "";  

$id = $_GET['id'] != "" ? preg_replace("#[^0-9]#","",$_GET['id']) : "1";//I use preg_replace to sanitze the get request  
$value = $_GET['value'];

if($value != '') { 
	if($id == 1) { 
		echo '<div id="case_map_wrapper">'.$value.'</div>';
	}
}
else {
	echo '<div id="case_map_wrapper">all</div>';
}
?>

[RamananKalirajan]

Hello sir, you are calling the Ajax in submit of the form please change the input type = button from "submit" so that the value you got from the other php wont go. The submit input type actually submits your entire page and loads the url what u have specified in the action.

Regards
Ramanan Kalirajan.

[ziycon]

Thanks, got it sorted.

[hsriat]

Hello sir, you are calling the Ajax in submit of the form please change the input type = button from "submit" so that the value you got from the other php wont go. The submit input type actually submits your entire page and loads the url what u have specified in the action.

Regards
Ramanan Kalirajan.

Even the button type input submits the form in some browsers. So the better way is to return false once you are done with calling your function.

<input
    type="submit"
    onclick="myFunction(); [b]return false;[/b]"
>Submit</input>

[acoder]

I think he was talking about the <input> element, not the <button> element. Even with the button element, you can set the type:

<button type="button">...</button>

If you omit the type, IE assumes a submit, but other browsers (and the standard) assume a normal button.

However, there's no harm in returning false here in the onclick or via onsubmit.

[free2step]

thanks

thanks, I got this done after I read the posts and reply.

[daneshqureshi]

Thanks alot...This helped me!

 <a href="" id="searchDetail" class="button_blue_right" onclick="validateAppNoPreIssuance(); return false;">Search</a>

I was using <a> tag and the same problem was occuring...afte r returning false, it got fixed! can anyone explain me the root cause of it?