MySQL Query onclick event on table row

Question

I intend to run a query onclick event on table row.

I have created a function in javascript and I can read the id of each row.

Now I wanted to be able to run a query with this id as a condition.

Can they help me please?

Realize my question?

Below I show my code.

-------------Javascript Function-----------------!

    <script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("td");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[1];
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>

-----Query I intend to run-----------

$result= mysql_query("select * from tasks where idTask = id");

while($row = mysql_fetch_array($result))
{
    $image = $row['image'];
    header("Content-type:image/jpeg");
    echo $image;
}

enter image description here

In place of your `alert("id:" + id);`, you need to do an Ajax call to your php file. There are many examples, both in standard javascript and using the jquery library, here on SO. — Sean, Sep 29 '14 at 14:44
Thanks for reply. I'm new to programming PHP. could you be more explicit please? — rpirez, Sep 29 '14 at 14:46
Ajax using standard javascript - http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery Ajax using the jQuery library - http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php and a little of both - http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Sean, Sep 29 '14 at 14:57
Thanks again for your reply. I really try all examples tha you gave me, but I can't do what I want :( Can you tell me if there is a simple way to execute the query inside javascript code? — rpirez, Sep 29 '14 at 15:18
Your php query can't be executed directly in javascript code. Php is executed on server-side, before the page is loaded to the browser, and javascript is executed client-side, after the page is loaded. If you want to execute php after the page has been loaded, you have to use ajax to contact the server to run the code, and then load it dynamically on response. I will post an answer/example in a few minutes. — Sean, Sep 29 '14 at 15:29
sorry for the delay. had a family issue come up and just now getting back on SO. Will post an example. — Sean, Sep 30 '14 at 15:37
@Sean thank you for reply. Do not have to apologize, the family comes first. I will comment your answer. — rpirez, Oct 01 '14 at 08:12

score 2 · Accepted Answer · answered Sep 30 '14 at 15:38

You need to use Ajax to send your id to a seperate php file, and then return the data. I use the jQuery library, so this example uses $.post() - (http://api.jquery.com/jquery.post/) and jQuery UI .dialog() - (http://jqueryui.com/dialog/) to popup the result similar to alert()

javascript code

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("td");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[1];
                                        var id = cell.innerHTML;

                                        //use ajax to post id to ajax.php file
                                        $.post( "ajax.php", { id:id }, function( data ) { 
                                              //add result to a div and create a modal/dialog popup similar to alert()
                                              $('<div />').html('data').dialog();
                                        });

                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>

ajax.php (seperate file, randomly named ajax.php)

$id = mysql_real_escape_string($_POST['id');    

$result= mysql_query("select * from tasks where idTask = $id");

while($row = mysql_fetch_array($result))
{
    $image = $row['image'];
    header("Content-type:image/jpeg");
    echo $image;
}

Than you very much for your reply. Do not have to apologize, the family comes first. I used the code that you put and the result was a box with a multiple characters.You want that I post a print screen? How can I fix that?Sincere greetings. — rpirez, Oct 01 '14 at 08:28

MySQL Query onclick event on table row

1 Answers1