Passing variables using jquery and ajax php - php

Question

i'm following this tutorial, so my issue is:
I have this code here, which are some tables.
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $kodi; ?></span>
<input type="text" value="<?php echo $kodi; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $vlera; ?></span>
<input type="text" value="<?php echo $vlera; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
</tr>
Now, this is the script:
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var kodi=$("#first_input_"+ID).val();
var vlera=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&kodi='+kodi+'&vlera='+vlera;
$("#first_"+ID).html('<img src="load.gif" />'); // Loading image
if(first.length>0&& last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
I'm not passing variables right maybe..because it won't save them, the query won't excecute.
Thanks

Answer 1

The easiest way in jQuery to pass your form fields in ajax is by using serialize:
data: $("form").serialize();
An additional problem is that you are using two variables, first and last but you are not defining them anywhere.

Answer 2

Try this code:
$(function() { // This makes the same than $(document).ready();
$(".edit_tr").each(function() { // Instead of assign the click event, we loop through each element
var $element = $(this);
var id = this.id;
var $first = $('#first_' + id);
var $last = $('#last_' + id);
var $firstInput = $('#first_input_' + id);
var $lastInput = $('#last_input_' + id);
$element.click(function() {
$first.hide();$last.hide();
$firstInput.show();$lastInput.show();
}).change(function() {
$first.html('<img src="load.gif" />');
// Here you have an if, but those elements are not defined in the script...
// if (first.length > 0 && last.length > 0) {
$.post("table_edit_ajax.php", {
id : id,
kodi : $firstInput.val(),
vlera : $lastInput.val()
}, function(html) {
// Here again the two vars not defined
//$first.html(first);
//$last.html(last);
});
// }
});
});
});