JQuery doesn't work on input field thats loaded from ajax

Question

I've got a page with a couple of input fields in a table, where when somebody somebody stops typing, a function gets called which should return a new table filled with content filtered by the value put in the input fields.

The content page:

 <form id="formFrm1" method="post">
                <div class="frm-table-overflow stg-att-overview1">
                    <table class="frm-sg-table">
                        <tr>
                            <td></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput11" style="width:100% !important;" type="text" size="2"></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput12" style="width:100% !important;" type="text" size="2"></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput13" style="width:100% !important;" type="text" size="2"></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput14" style="width:100% !important;" type="text" size="2"></td>
                        </tr>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Naam</th>
                            <th>Team</th>
                            <th>Ticket</th>
                        </tr>
                        <?php
                        foreach($cleanAttendeeArray as $arKey => $arVal){

                            $ticketName = array_column($eventsCollection, $arVal["Ticket"]);
                            echo
                            "<tr>
                                <td>
                                    <input type='checkbox' name='selectedAttendeeID[]' value='" . $arVal["ID"] . "'>
                                </td>
                                <td>
                                    " . $arVal["ID"] . "
                                </td>
                                <td>
                                    " . $arVal["Name"] . "
                                </td>
                                <td>
                                    " . $arVal["Team"] . "
                                </td>
                                <td>
                                    " . $ticketName[0] . "
                                </td>
                            </tr>"
                            ;
                        }
                        ?>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Naam</th>
                            <th>Team</th>
                            <th>Ticket</th>
                        </tr>
                    </table>
                </div>
                <br>
                <span>Selecteer een startgroep om de geselecteerde deelnemers aan te koppelen</span>
                <select name="frm-sg-selectedsg">
                    <option value="-1" selected>Selecteer startgroep...</option>
                <?php
                foreach($startgroupResultsArray as $sgKey => $sgVal){
                    echo"<option value=" . $sgVal['StartGroupId'] . ">" . $sgVal['Name'] . "</option>";
                }
                ?>
                </select>
                <br><br>
                <button type="submit" name="frm-sg-submit-addtogroup">Toevoegen</button>
            </form>

The js in tags;

 //setup before functions
var typingTimer1;                //timer identifier
var doneTypingInterval1 = 500;  //time in ms
var $input1 = jQuery('.myFrmInput1');

//on keyup, start the countdown
$input1.on('keyup', function () {
  clearTimeout(typingTimer1);
  typingTimer1 = setTimeout(doneTyping1, doneTypingInterval1);
});

//on keydown, clear the countdown 
$input1.on('keydown', function () {
  clearTimeout(typingTimer1);
});

jQuery("#formFrm1").on("keypress", function (e) {
if (e.keyCode == 13) {
    return false;
}
});
//user is "finished typing," do something
function doneTyping1 () {
        var frmInput11 = document.getElementsByClassName("myFrmInput11")[0].value;
        var frmInput12 = document.getElementsByClassName("myFrmInput12")[0].value;
        var frmInput13 = document.getElementsByClassName("myFrmInput13")[0].value;
        var frmInput14 = document.getElementsByClassName("myFrmInput14")[0].value;
    //jQuery.ajax({url: "/../wp-content/plugins/Farmstacle-run-manager/ajax/managersearch.php?frm11="+frmInput11+"&frm12="+frmInput12+"&frm13="+frmInput13+"&frm14="+frmInput14, success: function(result){
        //jQuery(".stg-att-overview1").html(result);
    //}});
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementsByClassName("stg-att-overview1")[0].innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","/../wp-content/plugins/Farmstacle-run-manager/ajax/managersearch.php?frm11="+frmInput11+"&frm12="+frmInput12+"&frm13="+frmInput13+"&frm14="+frmInput14,true);
        xmlhttp.send();
}

The page called with Ajax:

<table class="frm-sg-table">
<tr>
    <td></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput11" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm11."'"; ?>></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput12" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm12."'"; ?>></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput13" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm13."'"; ?>></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput14" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm14."'"; ?>></td>
</tr>
<tr>
    <th></th>
    <th>ID</th>
    <th>Naam</th>
    <th>Team</th>
    <th>Ticket</th>
</tr>
<tr>
    <th></th>
    <th>ID</th>
    <th>Naam</th>
    <th>Team</th>
    <th>Ticket</th>
</tr>

But after executing the function once, returning the value from the other page, it doesn't do anything after the second time I stop typing, though the newly created table does contain the correct classes.

I have no clue to why it doesn't seem to recognize the newly created (identical) classes.

Since you're asking about some Javascript code, it would make sense to show it. — ADyson, Feb 19 '18 at 10:49
ok it's simply because those elements didn't exist when you bound the "keyup" and other events. The code can only bind events to elements which already exist in the page. There is a way round it though - look into "delegated events" in jQuery. See http://api.jquery.com/on/ — ADyson, Feb 19 '18 at 10:59
It's not clear though why you would need to replace the textboxes themselves in the ajax update though, is that really necessary? — ADyson, Feb 19 '18 at 11:02
I think so, because the input fields have to be in the table (in a tr), and the ajax has to refill the table with content. Also, on the jquary documentation website it says that the .delegate is deprecated and you should use .on instead. I also tries using the .delegate but get an uncaugt type error (probably because it's deprecated). — JeroenM, Feb 19 '18 at 11:31
"have to be in a table", well that's a choice not a must, but ok, it fits your design. "the ajax has to refill the table with content". So? It doesn't have to replace the _whole_ table. If you use `tbody` and `thead` sections to separate the textboxes and headings from the content, then replacing just the body area becomes trivial. — ADyson, Feb 19 '18 at 11:35
" it says that the .delegate is deprecated". I know. I never suggested you should use .delegate(). I suggested you should use the "delegated events" pattern - there's a section "direct and delegated events" in the link I gave you. Sorry, I thought it would be obvious. P.S. A deprecated method is merely obsolete, not yet removed, and would not by itself give you a type error. You did something else to create that. — ADyson, Feb 19 '18 at 11:36

MPAvance · Answer 1 · 2018-02-19T12:15:15.143

1

Your jQuery event is only bound to the elements loaded when the jQuery is handled, made some changes so it bound to the document and now also works with ajax loaded forms.

Edit fixed the code below order is now correct

var $input1 = jQuery('.myFrmInput1');

//on keyup, start the countdown
$('document').on('keyup', '.myFrmInput1', function () {
  clearTimeout(typingTimer1);
  typingTimer1 = setTimeout(doneTyping1, doneTypingInterval1);
});

//on keydown, clear the countdown 
$('document').on('keydown', '.myFrmInput1', function () {
  clearTimeout(typingTimer1);
});

jQuery("document").on("keypress", '#formFrm1', function (e) {
if (e.keyCode == 13) {
    return false;
}
});

edited Feb 19 '18 at 12:15

answered Feb 19 '18 at 11:05

MPAvance

34
4

This is functionally equivalent to the OP's code. You used the "on" method, but not the delegated event syntax – ADyson Feb 19 '18 at 11:18
This answer doesn't seem to work for me. (nothing happens at all) – JeroenM Feb 19 '18 at 11:23

JQuery doesn't work on input field thats loaded from ajax

1 Answers1