Passing mysql data through Ajax… Can I do it?

Question

I'm new with ajax and javascript, and I reached a script where I'm sure it has errors that are basic, but it's what I have at the moment.

I have several buttons that when you click on each one of them a check image turns on or off (the buttons are part of a table that requests info from a mysql query, and it's length depends on the number of mysql results ).

I had the script made with php and mysql, but since I needed a form to post data to that page and couldn't refresh I'm now stuck with ajax.

So what I'm trying to do is to put the mysql inside the ajax... ok, I'm sorry if that is a big mistake, please help me do it the right way...

the php code:

(...code...)

$query = "SELECT `CÔR`, `keyword`, `Adds`, `PRMédio`, `PRDomínioMédio`, `Searches`, `CPC`, `.com`, `.org`, `.net`, `All in URL`, `All in Title`, `All in Desc.`
FROM keywords WHERE ( `Adds`>='$adds'  && `Adds`<='$addsm' && `PRMédio`>='$pr' && `PRMédio`<='$prm' && `PRDomínioMédio`>= '$prdom' && `PRDomínioMédio`<= '$prdommax'
&& `Searches`>='$s' && `Searches`<='$smax' && `CPC`>='$cpc' && `CPC`<='$cpcmax')";  

if ($query_run = mysql_query($query)){


while($query_row = mysql_fetch_assoc($query_run)){

$côr = $query_row['CÔR'];

(...code...)

<td>            
<button id='ajaxButton'>Select</button>
</td>

(...code... 'CÔR' is the only variable that matters, it's the binnary one that turns on and off the image)

The javascript:

(function() {
  var httpRequest;
  document.getElementById('ajaxButton').onClick = function('$q') {


    $n = "SELECT `CÔR` FROM `keywords` WHERE `keyword`='$q'";
    $b = mysql_query ($n);
    $row = mysql_fetch_array($b);


    echo "$row['CÔR'];";
    $t = $row['CÔR'];
    if ($t == 1) {
    $m = "UPDATE `keywords` SET `CÔR`=0 WHERE `keyword`='$q'";
    mysql_query ($m);
        }
    if ($t == 0) {
    $l = "UPDATE `keywords` SET `CÔR`=1 WHERE `keyword`='$q'";
    mysql_query ($l);
        }

};

  function makeRequest(index.php) {
    if (window.XMLHttpRequest) { 
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { 
      try {
        httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', index.php);
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})
();

Once again I'm sorry if this offends professional minds, please tell me the right way to do it.

Answer 1

JavaScript is Clientside, PHP (and Mysql) is Serverside. This means that you need to send your JavaScript gathered data from the client to the server. This can be done via AJAX. If you want, jQuery has a real nice and handy interface to use AJAX:

http://api.jquery.com/jQuery.post/ for POST and http://api.jquery.com/jQuery.post/ for GET Best thing is to take a look at that, and work from there.

Answer 2

It seems that you are also putting the mysql code/functions in javascript which indeed is not the right place.

What you should do that is as following:

1. Create a php file yourcode.php with the results which you are expecting as AJAX call's response.

2. then

    document.getElementById('ajaxButton').onClick = function('$q') { url = 'yourcode.php'; makeRequest(url); 

   then make change to code

    function makeRequest(url) { httpRequest.open('GET', url); 

3. this will call a method which inturn will call your 'yourcode.php' and return the output is rendered by that file.

And in case if you want to post data then you should consider converting that into a JSON object.