Onclick get results from php

[dschuett]

I have a database of invoices that have multiple attachments(which are stored in a different table) per each invoice. I have it returning the row of invoices just fine. But now I want a way to click the "view" link to call a php script to open up a jquery dialog box that will display all the attachments for that specific invoice number. The attachments are tied to the invoices thorugh the "invoice_num". I am VERY VERY VERY new to the jquery/ajax world, and really don't even know where to start. So any help is appreciated. Here is what I'm working with so far:

***NOTICE the bold is the link that i want the onclick function on.***

<?php
	$conn = mysql_connect('xxx','hoovdash','xxx');
	$db = mysql_select_db('xxx',$conn);
	$sql = "SELECT * FROM invoices WHERE on_hold='1' ORDER BY create_date";
	$result = mysql_query($sql,$conn);
		while($row = mysql_fetch_assoc($result))
		{
			$id = $row['id'];
			$equip_num = $row['equip_num'];
			$invoice_num = $row['invoice_num'];
			$notes = $row['notes'];
				echo"<tr><td class='$row_class'>$equip_num</td><td class='$row_class'>$invoice_num</td><td class='$row_class'>$notes</td><td class='$row_class' style='text-align:center;'>[B]<a style='margin-right:20px; font-weight:bold;' href=\"/invoices/view/?id=".$id."&equip_num=".$invoice_num."\">View</a>[/B]</tr>";
		}
?>

[tinymark]

You are missing a </td> at the end of this line. But that is the small potatoes.

<td class='$row_class' style='text-align:center;'><a style='margin-right:20px; font-weight:bold;' href=\"/invoices/view/?id=".$id."&equip_num=".$invoice_num."\">View</a>

So I would bind the click event to the td with the anchor and do something like this.

$('td.classname-that-shows-up').bind('click', function(){
$.post('my_php_file', function(data){
if(data){
    $('#div-to-place-results').html(data);
}
});

The idea is to use the post() to make the call to your php page that returns data from the database. Once the data is back, display it in the div you want.

This is off the top of my head and is not tested. It is meant to be a guideline for you. I hope it helps.

[dschuett]

Ok, i got it working. Now I ran into another problem. Since the mysql query returns multiple rows though the while loop - it sets the class the same on every row. So the onclick grabs the attachment for the first row no matter which row you click "view" on. Thanks so much for your help!

[tinymark]

Multiple classes sounds like its time for a little index(). I'm going to cheat here and borrow from a solution I posted in another thread.

$('td.classname-that-shows-up').bind('click', function(){
var whichOne = $(this).index();
$.post('my_php_file', function(data){
    if(data){
         (insert the code here)
        $('#div-to-place-results').html(data);
    }else{
        ErrorHandler();
    }
});
});

I added a little error function that you will write. Do something with an alert('There was a network error.\n Please reload the page.');

What I'm trying to get is the index of the the classname as it relates to the table, he clicked on the one in the fifth row. Here's where a little more code would have helped. You are dynamically creating the table, so what we need to do is get the number of the results returned from the attachment call. When you return the information, echo the count of the rows.

Do something like this.

$count = mysql_num_rows($result_from_query);
echo("<script type='text/javascript'> var how_many = $count; </script>");

Now you should have jquery access to the number of whatever DOM elements you end up making( a handy little trick). You might have to do two posts to get it done. The first for the count to setup and the second for the data. It's too early to be brilliant right now, but I would look into adding the count to the data from the database, to do the whole thing in one call to the php file.

Ok, we shipped off the call for the data and we have the count of the rows returned. We know what row was clicked on from the index(). If you have done everything correctly the returned click index is the index key for the DOM element array that gets created when you create your DOM element.

If you have created them in advance before any calls and you have something like this setup

<div class = 'returned-results'></div>
<div class = 'returned-results'></div>
<div class = 'returned-results'></div>
<div class = 'returned-results'></div>

You access then through an array index which will be your "he clicked on this one" index.
Hope this helps.