GeoffAtkins GeoffAtkins - 1 year ago 77
Ajax Question

AJAX update inserts element in list when removing, but not when adding

Building a system to manage information about companies, and I need to list which counties they operate in. I have a database table with a full list of the counties of the UK and then another table includes cross references outlining which are already assigned to a company or not.

On the interface, two lists are generated by PHP, one of those already assigned and one of those that are not. I want it so that clicking on any county name will move it from one list to the other, retaining the predefined sort order.

The jQuery AJAX sends the ID to a PHP file which updates the database (either adding or removing the county association with the company), and returns with a string to insert into the page.

So far, when adding or removing a county association, the entire link is removed from the list, the database is correctly updated, and the correct string is returned to the callback as intended. However, while it does add the string into the

when removing an association as desired, it doesn't add the string at all to the
when creating an association.

I can see that the data is returning correctly, and associated with the correct target.


<div class="counties" id="counties_on">
<a class="county_link" data-cuid="6" data-status="1" id="cou6">Cornwall</a>
<a class="county_link" data-cuid="9" data-status="1" id="cou9">Devon</a>
<a class="county_link" data-cuid="35" data-status="1" id="cou35">Somerset</a>
<div class="counties" id="counties_off">
<a class="county_link" data-cuid="1" data-status="0" id="cou1">Bedfordshire</a>
<a class="county_link" data-cuid="2" data-status="0" id="cou2">Berkshire</a>
<a class="county_link" data-cuid="3" data-status="0" id="cou3">Buckinghamshire</a>
<a class="county_link" data-cuid="4" data-status="0" id="cou4">Cambridgeshire</a>
<a class="county_link" data-cuid="5" data-status="0" id="cou5">Cheshire</a>
<a class="county_link" data-cuid="7" data-status="0" id="cou7">Cumbria</a>
<a class="county_link" data-cuid="8" data-status="0" id="cou8">Derbyshire</a>
...//Continues for all counties of the UK


var element = $(this).attr('id');
var cu_id = $(this).data('cuid');
var status = $(this).data('status');
if(status == 1) {
var target = '#counties_off';
} else {
var target = '#counties_on';
url: '/includes/ajax/county.ajax.php',
type: "POST",
data: {'cu_id': cu_id, 'status': status, 'co_id': 0},
success: function(data) {
if (data != 0) {
var added = 0;
$("a", target).each(function(){
if ($(this).data('cuid') > cu_id) {
added = 1;
return false;
if(added != 1) {
console.log(added + target);
} else {
alert("Something went wrong.");
error: function() {
alert("Something went wrong.");

As an example of the data returned by the server:

<a class="county_link" data-cuid="7" data-status="0" id="cou7">Cumbria</a>

With the only difference between adding or removing being the value of the

I, quite frankly, don't know why it works one way, but not the other.

One last issue I have, although I have used
for the jQuery trigger, it doesn't activate on clicking any
element that has been already moved unless the page is reloaded.

Answer Source

Try this: $(document).on('click', '.county_link', function(e){..});

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download