Hi,

I am trying to create a private chat from hacking some opensource chat room.

All going well to a point.

I am trying to use some basic AJAX (noobie) to insert a field into a mysql db.

It is doing what I want it to do mysql wise but it also changes the url.

my site runs like this. There is a page called private.php with all the php in. private.php has a switch statement to call other pages (the default is home.php).

so if a user say clicks contact the link would be private.php?mode=contact.

and then in the private page the switch statement would

case "contact": 
require("contact.php");
break;

so the user has searched another user and wants to chat.

the url at the moment is private.php?mode=full_profile&id=101

in the full_profile.php page I have the ajax in the head and a submit form to call the ajax function.

here is the ajax code

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest; 
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;

		}
	}
	var c_id = document.getElementById('c_id').value;
	var p_id = document.getElementById('p_id').value;
	var queryString = "?c_id=" + c_id + "&p_id=" + p_id;
	ajaxRequest.open("POST", "insert.php" + queryString, true);
	ajaxRequest.send(null); 
}

//-->
</script>

and the submit form

form name='myForm'>
	<input type='hidden' id='c_id' value="33" /> <br />
	<input type='hidden' id='p_id' value="43" />				
Chat Now<input type="image" onclick='ajaxFunction();' src="../images/chat.png"  >
</form>

<div id='ajaxDiv'></div>

the ajax calls insert.php

$c_id = $_REQUEST['c_id'];
$p_id = $_REQUEST['p_id'];
mysql_query("INSERT INTO chat (target,name) VALUES ('$p_id','$c_id')");

now the mysql query runs fine. the problem I have is that when I click the submit the url changes to private.php?x=18&y=28 . (the x and y vales are different everytime I click the submit).

can anyone tell me where the x and y values are coming from and also why the ajax function is changing the url as the whole point of using ajax is to avoid that

many thanks in advance

are you running any other forms on your submit form page?

the only thing that I see that is a little off is the query string where you have a ? for your post data.

var queryString = "?c_id=" + c_id + "&p_id=" + p_id;
it should be
var queryString = "c_id=" + c_id + "&p_id=" + p_id;

are you running any other forms on your submit form page?

the only thing that I see that is a little off is the query string where you have a ? for your post data.

var queryString = "?c_id=" + c_id + "&p_id=" + p_id;
it should be
var queryString = "c_id=" + c_id + "&p_id=" + p_id;

Yes I have other forms on my submit page

the ? in the query string is so the variables c_id and p_id are passed to the insert.php page other wise the mysql insert statement on the insert page will not execute

The other forms on the page do not have any variables named x or y, neither does anything else on the page.

I removed the other forms from the page to test and the ajax still changed the url.

In fact if I remove everything out the the submit page except the submit form and the ajax it still changes the url

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=koi8-b"/>
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r" />
<meta http-equiv="Content-type" content="text/html; charset=windows-1251"/>
<meta http-equiv="Content-Type" content="text/html; charset=x-mac-cyrillic" />
<meta http-equiv="Content-type" content="text/html; charset=cp866"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5"/>


<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;

		}
	}
	var c_id = document.getElementById('c_id').value;
	var p_id = document.getElementById('p_id').value;
	var queryString = "?c_id=" + c_id + "&p_id=" + p_id;
	ajaxRequest.open("POST", "insert.php" + queryString, true);
	ajaxRequest.send(null); 
}

//-->
</script>



</head>

<body>	
		<form name='myForm'>
			<input type='hidden' id='c_id' value="33" /> <br />
			<input type='hidden' id='p_id' value="43" />				
			<input type="image" onclick='ajaxFunction();' src="../images/chat.png"  >
		</form>
			<div id='ajaxDiv'></div>
			
		
</body>

the ? is the http equivalent to GET so you don't need it especially since your sending data post. if you were sending Get you would code that in your url and send null as the data check below for more on that part. But as far as the page are you using private.php as a page at all. I would assume that perhaps your either getting redirected from your php page which could be because of the data your sending is confusing or your using a variable that contains that data. are you sending out headers.

//post is like this
var queryString =  "c_id=" + c_id + "&p_id=" + p_id;
ajaxRequest.open("POST", "insert.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.send(queryString); 

//get is like this
var queryString =  "?c_id=" + c_id + "&p_id=" + p_id;
ajaxRequest.open("GET", "insert.php"+queryString, true);
ajaxRequest.send(null); 

// your request is set up as a GET but your sending as a POST.

private.php is the page that is being used all the time and the other pages are being called within the private.php page, bit like oldschool iframes

I am not sending out headers

I have even removed everything from the full_profile.php page except the submit form and put the ajaxfuction() in the head of the private.php page

and still the submit changes the url to private.php?x=10&y=10

or some other values for x and y

right I seem to have found the culprit

if I change the form submit from an image to a button then it works ok

is there any way around this

old submit

<input type="image" onclick='ajaxFunction();' src="../images/chat.png"  >

new submit

<input name="submit" type="button" value="chat" onclick='ajaxFunction();'/>

what shows up in your ajaxDiv? your page should not be refreshing since your not using a submit button. Im not sure why you would be getting get variables on your page unless they are there or are being used in the beginning. AJAX should only update the portion of the page you indicated at least from your code.

right I seem to have found the culprit

if I change the form submit from an image to a button then it works ok

is there any way around this

old submit

<input type="image" onclick='ajaxFunction();' src="../images/chat.png"  >

new submit

<input name="submit" type="button" value="chat" onclick='ajaxFunction();'/>

no you can not use submit since that will refresh the page unless you add a onsubmit to the form and set this to return false. I would suggest using an image tag with the onclick function.

I used the image with an onclick and that was the problem, but when I changed to a submit button it works fine.

problem is I want an image with a onclick

I used the image with an onclick and that was the problem, but when I changed to a submit button it works fine.

problem is I want an image with a onclick

no you were using a input tag with an image not an image tag
inputs with images turn into submit buttons so thats why your page was reloading. Now you are using an input tag as a button which does not automatically refresh the page. You are not using a submit button. submit buttons are listed as input tags with a type='submit' aka submit button.

<img src="" onclick="ajaxFunction()"/>//this is the image tag use this
<input src=""onclick="ajaxFunction()"/>

the problem with submit is that it will trigger after the onclick so you will have a page refresh.

changed the submit to

<a href="javascript: void(0);"  onClick="javascript: ajaxFunction(); return false;"><img src="../images/chat.png" title="<? echo $send_chat; ?>" border="0" />

and that seems to do the trick


thanks for your help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.