0

I've been searching and googling and I'm not the first one, it seems to me it is an common thing, but I can't find the (right) solution.

It is Joomla, but I don't think it is specific joomla issue.

My Ajax call, which is working:

jQuery.ajax({
type: "POST",
dataType: "json",
url: getUrl,
data: {task: "Filter", view: "viewname", format: "json", arfilter: arfilter},
success: function(result, status, xhr) {displayFilterResults(result); },
error: function() { console.log('ajax call failed'); },
})

Next is a part of the function 'displayFilterResults', which is building the table after AJAX call again:

....
var strhtml     = '<table id="table_players" class="">';
strhtml    +=   '<tbody>';
strhtml += '<tr>';
strhtml += '<td><input type="checkbox" class="select" id="select_' + result.data[i].cmid + '" name="select_' + result.data[i].cmid + '" value="' + result.data[i].cmid + '"' + checked + '/></td>';
strhtml += '<td><input type="text" id="rownr_' + result.data[i].cmid + '" ... /></td>';
strhtml += '<td><input type="text" id="fnam_' + result.data[i].cmid + '" ...  /></td>';
strhtml += '<td><input type="text" id="bnam_'   + result.data[i].cmid + '" ... /></td>';
strhtml += '<td><input type="text" id="lnam_' + result.data[i].cmid + '" ... /></td>';
strhtml += '<td><input type="text" id="catc_' + result.data[i].cmid + '" ... /></td>';
strhtml += '<td><input type="text" class="update" id="shnr_' + result.data[i].cmid + '" name="shnr_'   + result.data[i].cmid + '" value="' + shirtnr  + '" /></td>';
strhtml += '<td>' + result.data[i].posc + '</td>';
strhtml += '</tr>';
strhtml += ' </tbody>'
strhtml += '</table>';

jQuery('#result').html(strhtml).text(); //This line is writing the result to inner HTML of #result
....

Initial opened the table is created server sided by <?php echo $this->form->getInput('fieldname');, and recreated by last line which writing the filter result in the inner HTML of #result:

<div class="controls" id="result"><?php echo $this->form->getInput('fieldname'); ?></div>

Also the event selector 'update' is fired, if change the value.

jQuery('.update').bind('change',function () {
    console.log('update fired');
});

-- Here comes my problem: I have created filter bar, which is doing the the AJAX call and there is raising the issue. After the AJAX call the table is build again, but than the event selector for 'update' is not fired anymore!!??

I start a bit to understand the issue, DOM has been changed - the table is completely build again and assigned to the inner HTML of #result, which means the change event is not yet bind to the input text element with the class="update".

But how do I solve this?

I have tried to add this to the done of the AJAX call, just to bind the 'change' event selector to the class="update":

.done(function() {
    jQuery('.update').each(function () {
        jQuery('.update').bind('change', function () {
            console.log('bind the change to the fields with player update class')
        });
    });

But if change the value of the input field than this one is fired and not 'change' event selector earlier mentioned.

What is the right way, after an AJAX call to get the event selector is working again, what means if I change the value, than this executed.

Remarkable thing is, I have also for the checkbox an click event, which is still working after the AJAX call!!

I hope that someone can help me out with this how to solve this.

user2363969
  • 57
  • 1
  • 5
  • You need to use a delegated event handler as the content is dynamically appended to the DOM after the page loads - see the duplicate I marked for more information on that. However you should note that the use of `bind()` is a code smell. That method was deprecated a ***long*** time ago and should not be used. [on()](https://api.jquery.com/on) is modern best practice instead. Also check that you're using an up to date version of jQuery. The latest release is jQuery 3.5.1 – Rory McCrossan Aug 02 '20 at 20:14

0 Answers0