CODEWITHSUNDEEP
javascriptjqueryajaxeventsdatatable
usr4896260
usr4896260

Reputation: 1507

Keyup event for datatables search input not firing when using ajax

I am loading a page that contains a jquery datatable via AJAX. My goal is when the user starts typing in filter(the default one supplied through datatables), grab the input and apply custom filtering. The custom logic will be applied when the keyup event fires. Since I'm using AJAX, I can't use my javascript directly as used in the api as all the content wouldn't have been loaded. However, with the help of this post, I was able to get certain events to fire (click, focus) to work correctly. Now, I can't seem to get it to fire for the keyup event. I have the following:

Updated

HTML enter image description here

This works:

// Event fires correctly
$(document).on("focus", 'input[type="search"]', function () {
    alert('focus');
});

This doesn't work:

// Event never fires
$(document).on("keyup", 'input[type="search"]', function () {
    alert('keyup');
});

What is the proper way to call the on keyup event for datatables search bar when using ajax?

Upvotes: 0

Views: 8480

Answers (3)

san
san

Reputation: 88

Are you sure your selector matches the correct input element?

Update

Can you trying binding the keyup event handler like the following?

$("input[type='search']").on("keyup", function () {
    alert('keyup');
});

If there is another keyup event handler attached to text box which stops propagation of the event, then the event handlers registered using $(document).on("keyup", "input[type='search']", ... ) are not triggered. However, other event handlers that are registered using $("input[type='search']").on("keyup", ...) are triggered.

Here's a code snipped that demonstrates this behavior:

$(document).ready(function() {

    var first_count = second_count = third_count = 0;
    $("input[type=text]").on("keyup", function (event) {event.stopPropagation(); first_count = first_count + 1; $("#first-handler").html(first_count)})
    
    $(document).on("keyup", "input[type=text]", function () {second_count = second_count + 1; $("#second-handler").html(second_count)})
    
    $("input[type=text]").on("keyup", function () {third_count = third_count + 1; $("#third-handler").html(third_count)})    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
          First event handler invocations: <span id="first-handler">0</span> <br/>
          
          Second event handler invocations: <span id="second-handler">0</span> <br/>
          
          Third event handler invocations: <span id="third-handler">0</span> <br/>
          
          <input type="text" placeholder="Type here" />
</div>

There are three event handlers attached to the input text. The First and Third event handlers are registered using $("input[type=text]").on and the Second event handler is registered using $(document).on. The First event handler stops the propagation of the event, because of which the second event handler is never triggered. However, the third event handler which is directly registered on the element is triggered irrespective of whether the event propagation stops or not.

Upvotes: 3

alireza
alireza

Reputation: 546

Try using $('input[type="search"]').keyup(function(){/* do something */ });.

I hope it solves

Update

var target = document.body;
var observer = new MutationObserver(function() {
    $('input[type="search"]').keyup(function(){console.log("dddd") });  
});

// configuration of the observer:
var config = { childList: true, subtree: true};

// pass in the target node, as well as the observer options
observer.observe(target, config);

Please choose the most proper target to observe.

Bind after appending input element to the HTML DOM.

Upvotes: 1

e_i_pi
e_i_pi

Reputation: 4820

I'm guessing your HTML is wrong, or something else in code you haven't posted. This, for example, works fine:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <input type="search">
</body>
</html>
<script>
    $("input[type='search']").on("keyup", function () {
        alert('keyup');
    });
</script>

Upvotes: 1

Related Questions