Hooking up buttons to JavaScript function with MySQL entries

Question

I have a table in a database that I would like to render using XMLHttpRequest in JavaScript to a PHP page. I want to render each entry in the table as a HTML row/cell and have two buttons in each "entry". I want to have every button in the entry call a particular JavaScript function that would process the logic.

So basically, if I have 10 rows in the table, I will have 20 buttons and each button will pass a parameter to either 2 functions depending on which "type" of button was clicked.

Any ideas on how I can go about doing this?

Thanks!

Stock Overflaw · Accepted Answer · 2012-09-21 08:18:42Z

1

On your server, you need a PHP file/action doing something like:

$return = array();
$q = mysql_query('SELECT * FROM ...');
while(($return[] = mysql_fetch_assoc($q)) !== false);
echo json_encode($return);

In the pre-built HTML page, you'll need a container for the data to be printed:

<div id="db-container"></div>

Then the JS included in that page (I use jQuery here for simplicity and readability, though you can do it using native JS or probably any other JS tool):

function getDB() {
  $.getJSON(
    'http://url.to/your/code.php',
    {},
    function(data) {
      var renderedHTML = '';
      /* parse the object representing PHP's $return, mainKey will be numerical keys */
      for(var mainKey in data) {
        /* one main loop iteration == one table row */
        renderedHTML += '<tr>'
        /* data[mainKey] is a row in DB, subKey will contain a name of a DB table column */
        /* data[mainKey][subKey] will therefore contain the value of DB table column 'subKey' for the DB table row numbered 'mainKey' */
        for(var subKey in data[mainKey]) {
          renderedHTML += '<td>' + data[mainKey][subKey] + '</td>'
        }
        /* statically add another HTML table column for the buttons */
        renderedHTML += '
          <td>
            <input type="button" name="b1" onclick="func1(\'arg1\')">
            <input type="button" name="b2" onclick="func2(\'arg2\')">
          </td>
        ';
        renderedHTML += '</tr>'
      }
      /* insert the built table into the page */
      $('#db-container').html('<table>' + renderedHTML + '</table>');
    }
  );
}

Hope this helps.

answered Sep 21, 2012 at 8:18

Stock Overflaw

3,3411 gold badge15 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

urbanspr1nter Over a year ago

Thank you. I personally do not know jQuery but I understand your approach. I can probably do this in javascript. Thanks!

Stock Overflaw Over a year ago

You're welcome! For translating jQuery to JS, $.getJSON is just a XmlHttpRequest with an expected return type text/json, though you can use the encoding you prefer; $('#element').html(data) is the same as document.getElementById('element').innerHTML = data. Be careful however as innerHTML is poorly implemented in most browsers, you may want to use it along with the safer DOM methods createElement and appendChild (here is a link describing the trick to force the DOM to be properly rebuilt when inserting a subtree into it). Good luck!

Collectives™ on Stack Overflow

Hooking up buttons to JavaScript function with MySQL entries

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related