<html>
<head>
<script>
$('patientlist').click(function showpatient()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","ajaxlistpatient.php",true);
xmlhttp.send();
})
</script>
</head>
<body>
<form>
<input type="button" id="patientlist" name="patientlist" value="List Patient"/>
</form>
</body>
</html>
please help, i want to list my patientlist using a button in the same page without reloading my mainpage.
ajaxlistpatient.php contains my sqlquery ..
try using jQuery library for this, because ajax operation is quirky and complicated.
Take a look at this document:
You can't access the DOM like this $('patientlist'). It has to be either $('.patientlist') or $('#patientlist')
Assuming 'patientlist' is a class,
$('.patientlist').click(function (){
console.log("Clicked"); //Check you got here without any problem
$.ajax({
type: "POST",
url: "ajaxlistpatient.php",
dataType: 'json',
success: function (data)
{
console.dir(data);
},
error: function (jqXHR,textStatus,errorThrown)
{
//Check for any error here
}
});
});
Even though you havn't tagged Jquery in your question it looks like Jquery is being used for the click event anyway. So here you go:
$('#patientlist').on('click', function(e){
e.preventDefault();
e.stopPropagation();
$.ajax({
url : "ajaxlistpatient.php",
type: "post",
complete: function(d){
//do something with the return data'd'
}
});
});
You will need to decide what you want to do with the response. Make sure you have access to something like firebug in firefox which will help you out massivly so you can see the ajax call being sent out and see the response via the firebug console. Chrome also has a console and debug tools but I prefer firefox/firebug.
You could juse use the jQuery ajax method:
$('#patientlist').click(function showpatient() {
$.ajax({
type: 'POST',
dataType: "xml",
url: 'ajaxlistpatient.php',
success: function (data) {
$('#myContentContainer').html(data);
}
});
});
Here is the general and simplest syntax of using ajax:
$('patientlist').click(function ()
{
$.post('ajax_files/ajaxlistpatient.php', {var_id:anyData},
function(data)
{
$('#yourDataHolder').html(data);
});
});
All responses are in the right direction, Jquery+php is your best bet, and to further extend those responses, here are some previous similar posts that might help you to have a reference:
AJAX to call PHP file which removes a row from database?
AND
How to pass jQuery variables to PHP variable?
are good sample resources,
hope this helps.