Why do both ajax calls run when I submit a single input? - php

Question

I am dynamically generating two paragraphs and two input fields inside a div. There may be numerous divs generated, depending upon the number of records pulled from the database. Each para and input field is assigned a unique id.
When the user clicks on a field, say firstText_id, jQuery hides the field and shows an input field firstText_input_id in its place. The user updates the input field, and on clicking away, an ajax script is called to update the database and return a success message.
My problem is that, when the user clicks on one field in any record, and updates it, then clicks away, the ajax calls for both fields are made.
PHP
echo "<div class=\"single seven columns boxTable2 \" id=\"{$vid}\">
<div class=\"seven columns alpha omega\" >
<div class=\"four columns alpha omega\" >
<p class=\"single two columns alpha omega firstHead\">First name: </p>
<p class=\"firstText single two columns alpha omega\" id=\"firstText_{$vid}\"
data-vid=\"{$vid}\">{$first}</p>
<input type=\"text\" id=\"firstText_input_{$vid}\"
class=\"firstText_input single two columns\"
data-vid=\"{$vid}\" value=\"{$first}\"/>
</div>
<div class=\"four columns alpha omega\" >
<p class=\"single two columns alpha omega lastHead\" >Last name: </p>
<p class=\"lastText single two columns alpha omega\" id=\"lastText_{$vid}\"
data-vid=\"{$vid}\">{$last}</p>
<input type=\"text\" id=\"lastText_input_{$vid}\"
class=\"lastText_input single two columns\"
data-vid=\"{$vid}\" value=\"{$last}\"/>
</div>
</div>
</div>
jquery
jQuery.noConflict();
jQuery(document).ready(function($){
var vidID = '';
$(document).on('click', '.firstText', function ()
{
vidID=$(this).data('vid');
$('#firstText_'+vidID).hide();
$('#firstText_input_'+vidID).show();
}).change(function()
{
var newFirstText=$('#firstText_input_'+vidID).val();
var firstTextDataString = 'vid='+ vidID +'&first='+newFirstText;
if(newFirstText.length>0)
{
$.ajax({
type: "POST",
url: "/go/to/php.php",
data: firstTextDataString,
cache: false,
success: function(html)
{
$('#firstText_'+vidID).html(newFirstText);
}
});
} else
{
alert('Enter something.');
}
});
// Edit input box click action
$('.firstText_input').mouseup(function(e)
{
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
// return false; //(does the same as the above 3 functions)
});
// Click away action
$(document).mouseup(function()
{
$('.firstText_input').hide();
$('.firstText').show();
});
$(document).on('click', '.lastText', function ()
{
vidID=$(this).data('vid');
$('#lastText_'+vidID).hide();
$('#lastText_input_'+vidID).show();
}).change(function()
{
var newLastText=$('#lastText_input_'+vidID).val();
var lastTextDataString = 'vid='+ vidID +'&last='+newLastText;
if(newLastText.length>0)
{
$.ajax({
type: "POST",
url: "/go/to/php.php",
data: lastTextDataString,
cache: false,
success: function(html)
{
$('#lastText_'+vidID).html(newLastText);
}
});
} else
{
alert('Enter something.');
}
});
// Edit input box click action
$(".lastText_input").mouseup(function()
{
return false;
});
// Click away action
$(document).mouseup(function()
{
$(".lastText_input").hide();
$(".lastText").show();
});
});
As the unique IDs are generated dynamically from the database records, I can’t find a way of associating the user’s click to the field being updated without the other field in the record being updated. I’m a relative beginner with jQuery/javascript. How can I isolate the user’s action to the field being clicked? I have tried click selectors like ‘[id^=”firstText_input_”]’. Probably a simple error, but I have been round it too many times to see the error.

Answer 1

The event that causes the ajax to happen is actually bound to the document, therefore, anytime ANY input changes, the document receives the event and performs the ajax request.
See below:
$(document).on('click', '.someclass', function () {...}).change(function () {...});
.change is targeting $(document), not $('.someclass'), you'll have to use the same delegation syntax as before to instead delegate it to the target element.
$(document).on('click', '.someclass', function () {...}).on('change', '.someclass', function () {...});
both firstText and lastText are affected by this issue, which is why both trigger any time you change either input.
Additionally... your event binding is very inconsistent. In some cases you're using delegation, and in others you are not. Since you're replacing the entire content of the div, you should be using event delegation for all of the events within that div.