AJAX and jQuery problem

[tonyyeb]

This page when submitted normally will return a graph with the parameters using the Start and End date and the Staff ID. When I click the button it does nothing. However if I change the url section to message.txt and type to GET the DIV is replaced by the text inside message.txt. Where have I gone wrong?

Ok here is my code:

<script type="text/javascript">


function validate(StartDate, EndDate, varStaffID)
{
	$.ajax({
		type: "POST",
		url: "mygraph.asp",
		data: { StartDate: $("#StartDate").val(), EndDate: $("#EndDate").val(), varStaffID: $("#varStaffID").val() },
		success: callback
	});

}

function callback(data, status)
{
	$("#foo").text(data);
}

</script>


Start Date: <input type='text' name='StartDate' size='9' id='startdate' maxlength='25'> 
End Date: <input type='text' name='EndDate' size='9' id='enddate' maxlength='25'> 
<input type="hidden" name="varStaffID" value="12345">
<input type="Submit" value="Show Graph" OnClick="validate(document.getElementById('startdate').value,document.getElementById('enddate').value,document.getElementById('varStaffID').value)" />

<div id="foo"></div>

 

[marc2003]

if you're not using it already, use firefox with the firebug extension and then you can see the browser requests/server responses in real time. it will also help debug any errors in your script.

edit: it's been ages since i messed about with jquery but you don't need to be using onclick in your html like that. just digging around in some of my old files it should be done like this...

<script type="text/javascript">
$(document).ready(function(){ 
	$('#submit').click(function(){
             //ajax stuff goes here. #submit is just the id for your button. 
        });
});
</script>

 

[tonyyeb]

Cheers for that. Now sorted with the help of firebug! (And used your click(function) )