Buttons in cell won't work with ajax source

Buttons in cell won't work with ajax source

shahjishahji Posts: 5Questions: 1Answers: 0

... but they do work with javascript source.

Here's a simple test case.

http://live.datatables.net/fupinifi/2/edit

If I move the input data to a file and use ajax to load it, the button clicks stop working. I have the few lines to load the ajax source commented out in the script. The content of example.json is just the same array that I have assigned to 'data' at the top of the script.

Appreciate some help!!

Answers

  • shahjishahji Posts: 5Questions: 1Answers: 0

    Any hints/direction to explore on how I could fix this issue?

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    Not sure what the problem is but I did take your example and apply it to an ajax source:
    http://live.datatables.net/mihumope/1/edit

    You can toggle back and forth between using your data from the script to an ajax source. Someone more knowledgable than I can take a look.

    Kevin

  • shahjishahji Posts: 5Questions: 1Answers: 0

    Yeah I am not a web developer and my knowledge is very limited. I am scraping thru' forums and online tutorials to get by. I was using this for a simple personal project and ran into this issue which I can't seem to figure it out and none of the posts have helped. Makes me think I am doing something that its not meant to be.

    My wild guess is the jQuery listeners need to change somehow to work. There is a second parameter to 'on' function in some examples on this website where 'td' and 'tr' are passed in. I tried similar things but none worked.

  • shahjishahji Posts: 5Questions: 1Answers: 0

    Bumping it up one last time to see if experts can chime in on this.

  • shahjishahji Posts: 5Questions: 1Answers: 0

    Answering my own question.

    When adding buttons dynamically, one cannot listen for events on those buttons with jQuery the usual way. Instead of the following

    $('div.value_toolbar button.edit_value').on('click', function() {
        var row = $(this).closest('tr');
        var cell = $(this).closest('td');
        console.log("Edit button was clicked: " + row.index() + ', ' + cell.index());
    });
    

    do it this way and it works -

    $(document).on('click', 'div.value_toolbar button.edit_value', function() {
        var row = $(this).closest('tr');
        var cell = $(this).closest('td');
        console.log("Edit button was clicked: " + row.index() + ', ' + cell.index());
    });
    

    Some online discussions about why the former solution doesn't work and latter works -

    stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements#9331127

    stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements

This discussion has been closed.