Ajax request inside keyup event listener

nayanadas

Right now, I'm trying to send a ajax request after the enter key pressed using keyup event listener of search text-box, but it is not working, even the console.log is not printing.

$("#tableid_filter input")
           .unbind() 
            .bind('keyup', function(e) {
                   if(e.keyCode == 13) {
                       console.log("after enter key");  //this statement is printing
                       $("#tableid").on( 'ajax', function ( data, callback, settings ) {
                              console.log("inside ajax request"); // this statement not printing
                          var out = [];
                        $.ajax({
                            type: "POST",
                            async: false,
                            url: "/getTableData",
                            data: "parameter=" + params,
                            success: function (data) {
                            console.log("success:data: " + data);
                            out = data;
                            }
                        });
                        callback({
                            "draw": out.draw,
                            "aaData": out,
                            "recordsTotal": numOfRecords,
                            "recordsFiltered": numOfRecords
                        });
                    });
                }
            });

I'm trying to use the above solution from https://datatables.net/forums/discussion/2990/how-to-filter-with-the-search-text-box-after-press-enter-key

Please help me with a solution. Thank you.

colin

Hi @nayanadas ,

I took your code and pasted it here - and the console message is being displayed as expected. Is your table's ID "tableid"? Other than that, we'd need to see the page.

Cheers,

Colin

nayanadas

Hi @colin,

the second console message "console.log("inside ajax request");" this is not displayed in console. The code inside the ajax callback function is not getting executed. Hope you can help me with that.
Thank you.

nayanadas

Hi @colin

The following is the example done with my code, here too the statement inside the ajax callback function inside keyup event listener is not getting executed.
https://jsfiddle.net/ye2dLj3n/2/
Please check the jsFiddle link.
Thank you.

colin

Hi @nayanadas ,

Ah, I see, that line,

      $("#example").on('ajax', function ( data, callback, settings ) {

is setting up an event listener, it's not calling an Ajax command. You want to call the ajax() method.

Cheers,

Colin

nayanadas

Hi @colin

yes that's right. why it is not getting executed? any idea?
Thank you.

colin

Hi @nayanadas ,

As I said, it's an event listener, so that code will only be called when the event triggers, that code isn't initiating an Ajax request. To initiate the request, which you want to do, you need to call theajax() function directly, or jQuery's - see here.

Cheers,

Colin