Jquery ajax div not updating for db update

Question

I am using a dialog box to update my database and remove services.

Unfortunately it only works for the first "remove" click.

So, I click to open the dialog box. am faced with a list of 5 services.

I click to remove the 5th service, the db is updated, the list (inside the dialog) reloads and the select tag (on the main page) reloads okay.

If I then repeat this step with the 4th service nothing happens, none of: db update, list update and select update

My jquery handler is below, does anycody know why this isn't working?

$(function () {
    $(".deletesector").click(function () {
        var name = $(this).attr('name');
        var dataString = 'serviceid=' + name;
        $.ajax({
            type: "POST",
            url: "./ajax/remove-service.php?" + dataString,
            dataType: "html",
            data: dataString,
            success: function (msg) {
                //UPDATE THE SELET BOXES CONTAINING THE SERVICES
                $("#service1-holder").load('./views/service-list1.tmp.php');

                // UPDATE THE LIST OF SERVICE
                $("#list-of-services").load('./views/list-of-services-for-removal.php');
            }
        });
    });
});

Probably something to do with the services being reloaded, that handler is no longer being bound. Try with event delegation real quick -- $(document).on("click", ".deletesector", function() { — tymeJV
– tymeJV, Commented Nov 19, 2013 at 14:11
If you want a directory back you need to use two dots. So where you update you div do .load('../views/list-of-services-for-removal.php'); — Mark
– Mark, Commented Nov 19, 2013 at 14:19

jalansesama · Accepted Answer · 2013-11-19 14:21:21Z

4

don't use .click to redo ajax event there. please use .on().

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()

See documentation here: http://api.jquery.com/on/

so your code would be:

$(function () {
    $(document).on('click', '.deletesector', function () {
        var name = $(this).attr('name');
        var dataString = 'serviceid=' + name;
        $.ajax({
            type: "POST",
            url: "./ajax/remove-service.php?" + dataString,
            dataType: "html",
            data: dataString,
            success: function (msg) {
                //UPDATE THE SELET BOXES CONTAINING THE SERVICES
                $("#service1-holder").load('./views/service-list1.tmp.php');

                // UPDATE THE LIST OF SERVICE
                $("#list-of-services").load('./views/list-of-services-for-removal.php');
            }
        });
    });
});

answered Nov 19, 2013 at 14:21

jalansesama

1012 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

useyourillusiontoo Over a year ago

Thanks a lot. Can't believe i've been letting this problem bug me for over a week.

Cyrus · Accepted Answer · 2013-11-19 14:13:26Z

0

Maybe you have to bind the events to new #service-holder... did you try that?.

$( "#service-holder" ).bind( "click", your_function);

answered Nov 19, 2013 at 14:13

Cyrus

1418 bronze badges

Collectives™ on Stack Overflow

Jquery ajax div not updating for db update

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related