Cheeky Jquery Help Please

[amavadia]

Hi

 

So I have a mysql database which contains information on a number of items (we'll call them batches). each user can add multiple batches to the database. On the user's account page, a query looks up all the batches they have submitted and lists them. Today I have been working on a way that the user can delete their batches one at a time from the list without having to refresh the page and I am 90% there, just one little niggle which I cant work out.

 

The way I have done it is where the php loops through the result of the query and lists the batches, it also places an image which looks like this in html:

 

<td id="del"><a href="42"><img src="../images/delete.gif"/></a></td>

 

where 42 is the id for the batch in the db.

 

To pick up when the user clicks the delete image next to a batch I have used the following jquery:

 

<script type="text/javascript">
$(document).ready(function(){
    
        $("#del a").bind("click", function() {
        var batch = $(this).attr( 'href' );
        $("#confirmdel").html('Are you sure you want to delete batch ' + batch + '?  <a href="#" id="confirmdelete">Yes</a> <a href="#" id="cancel">Cancel</a>');
        $("#confirmdel").show('slow', function(){

        $("#confirmdelete").click(function(){
            $.post('../scripts/deletebatch.php', {batchid: batch});
            $("#confirmdel").hide('slow');
            $('#batches').fadeOut('fast');
            $('#batches').load('index.php #batches',false,function(){
               $('#batches').fadeIn('slow'); 
            });
            return false;
        });
        });
        return false;
        });

});
</script>

 

deletebatch.php is just a small php script which takes in the batch id and inactivates it in the db.

confirmdel is an empty div on the page which will be used to confirm the delete or cancel it.

 

Now this all works great and once the user confirms the delete, the confirmdel div will fade out, then the list of batches will fade out, the row will be inactivated in the db and the list will fade back in having reloaded and being one item less. But the problem is if the user then clicks on a delete icon next to a batch on the refreshed list, none of the jquery fires and it treats the <a href="42"... as a hyperlink and tries to go to that page.

 

Firstly thought it may have something to do with the fact its within the $(document).ready(function(){} section so I tried to copy the same block of code outside of that but still no luck.

 

Would really appreciate some help with this last bit.

 

Cheers

[amavadia]

anyone 

[DavidAM]

I don't know how much I can help, but I see a couple of things that might create issues:

 

1) the "id" attribute in HTML is supposed to be unique on the page (well, in the DOM). So, creating multiple rows with the same "id" could lead to issues with jquery. You should probably use a class instead of the id here.

 

2) You have deleted the DOM element that you bound the click event to. Then you created new DOM elements. You will (most likely, I think) have to BIND the click event to these new DOM elements (after the load). It seems to me that there is a way to do the BIND that will cause jquery to bind the event to ALL present and future elements that satisfy the selector, but again, since you are selecting by ID and the ID is supposed to be unique, jquery may not honor the "future" part or the multiple future elements.

 

 

[amavadia]

Hi David,

 

Thanks for the pointers. As you have suggested I changed from an id selector to a class selector so the HTML is now:

<td class="del"><a href...

and the Jquery is :

$(".del a").bind("...

 

The second point you made makes sense but even though new elements are being created, they still have the same names  .

 

Anyhow, more than happy to give it a go but im not really sure how to go about binding the new elements after the load? would it just be to copy the same section of jquery code into the callback of the load? The issue there being I would have to embed infinate copies of the code because different users would delete different numbers of items at a time?

[DavidAM]

Well, I rarely use lambda functions in my code. I just don't personally like the look of it. So I would write the binding as:

$(".del a").bind("click",delClick);

// Pulled this out of your original BIND 
function delClick() {
        var batch = $(this).attr( 'href' );
        $("#confirmdel").html('Are you sure you want to delete batch ' + batch + '?  <a href="#" id="confirmdelete">Yes</a> <a href="#" id="cancel">Cancel</a>');
        $("#confirmdel").show('slow', function(){

        $("#confirmdelete").click(function(){
            $.post('../scripts/deletebatch.php', {batchid: batch});
            $("#confirmdel").hide('slow');
            $('#batches').fadeOut('fast');
            $('#batches').load('index.php #batches',false,function(){
               $('#batches').fadeIn('slow'); 
            });
            // Now BIND the rows we just added
            $(".del a").bind("click",delClick);
            return false;
        });
        });
        return false;
        }

 

I think the BIND method only binds to existing elements at the time that you call .bind(). However, I seem to remember reading something on the jquery site about the ability to define a bind that would automatically bind to new instances of the selector.

 

[amavadia]

Thanks David,

 

Gave your modifications a go and it didnt work the first time but then I tried putting the second bind inside the last callback and it works perfectly now. Also nested the animations a bit to give it a good sequence. Very nice effect.

 

Heres what I ended up with:

 

$(".del a").bind("click",delClick);

function delClick() {
        var batch = $(this).attr( 'href' );
        $("#confirmdel").html('Are you sure you want to delete batch ' + batch + '?  <a href="#" id="confirmdelete">Yes</a> <a href="#" id="cancel">Cancel</a>');
        $("#confirmdel").show('slow', function(){

        $("#confirmdelete").click(function(){
            $.post('../scripts/deletebatch.php', {batchid: batch});
            $("#confirmdel").hide('fast', function(){
            $('#batches').fadeOut('fast', function(){
            $('#batches').load('index.php #batches',false,function(){
               $('#batches').fadeIn('slow'); 
               $(".del a").bind("click",delClick);
            });
            });
            });
            return false;
        });
        });
        return false;
        }

 

 

All the best.