ajax using php and mysql

Question

<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 ..

Are you using jQuery here? It looks like you are, but somehow you've sort of re-implemented the [ajax](http://api.jquery.com/jQuery.ajax/) feature. The documentation for that library is quite good, so it's worth searching through it before creating your own solutions. — tadman, Sep 05 '13 at 14:55

score 1 · Answer 1 · answered Sep 05 '13 at 14:48

1

try using jQuery library for this, because ajax operation is quirky and complicated.

Take a look at this document:

http://api.jquery.com/jQuery.ajax/

answered Sep 05 '13 at 14:48

Joon

9,346
8
48
75

Absolutely. Writing AJAX code by hand is a super bad idea. Use a library or you *will* get it wrong. – tadman Sep 05 '13 at 14:53

rAjA · Accepted Answer · 2013-09-05T15:20:07.087

1

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
            }
        });

});

edited Sep 05 '13 at 15:20

answered Sep 05 '13 at 14:52

rAjA

899
8
13

still i cant see my result =( – John Christian De Chavez Sep 05 '13 at 15:15
@JohnChristianDeChavez no worries. You just need spend little more time on this. Can you show where is ajaxlistpatient.php is located? Is it placed at the root directory of your project? – rAjA Sep 05 '13 at 15:34
yes sir.. i saved your code as use.js in the root so my root folder contains this use.js ajaxlistpatient.php index.php index.php now my code is

– John Christian De Chavez Sep 05 '13 at 15:36
Cool. so clearly you are missing the Jquery library in your html. Take a look at this http://learn.jquery.com/about-jquery/how-jquery-works/ and also go through every single page of http://www.w3schools.com/jquery/.. Happy Coding!! – rAjA Sep 05 '13 at 15:39
oops i forgot to add the library this now my new code for index.php

– John Christian De Chavez Sep 05 '13 at 15:44
but still i cant see my result =( my ajaxlistpatient.php consist of Patient ID Patient Name Patient Gender Patient Age Patient Address Patient Illness "; while ($listme = mysql_fetch_array($listp)) { echo " $listme[0] $listme[1] ?> – John Christian De Chavez Sep 05 '13 at 15:51

score 0 · Answer 3 · answered Sep 05 '13 at 14:53

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.

score 0 · Answer 4 · answered Sep 05 '13 at 14:54

0

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);
        }
    });
});

answered Sep 05 '13 at 14:54

Busychild

66
1
2

what do you mean by the container? sorry if beginner – John Christian De Chavez Sep 05 '13 at 15:20

score 0 · Answer 5 · answered Sep 05 '13 at 14:57

0

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); 
        });
});

answered Sep 05 '13 at 14:57

Hassan Sardar

4,413
17
56
92

what should i do the dataholder? sorry beginner here – John Christian De Chavez Sep 05 '13 at 15:21
This is the div or span etc where you want to list your data coming from ajax file . e.g,
– Hassan Sardar Sep 05 '13 at 15:55

score 0 · Answer 6 · edited May 23 '17 at 12:12

0

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.

edited May 23 '17 at 12:12

Community

1
1

answered Sep 05 '13 at 15:03

maurix suarez

129
7

ajax using php and mysql

6 Answers6