JQuery $('form').serialize() not working after $('div.container').load()

Question

I've a page with a div that is updated via an AJAX call, like this:

<body>
    <div id="container">
        <div id="newinfo">
            <form id="selectform">
                Your name:<br>
                <input type="text" name="firstname"><br>
            </form> 
        </div>
    </div>
    <script>
        function reload_container() {
            $('#container').load('url/to/ajax/update');
            console.log($('#selectform').serialize());
        }
    </script>
</body>

The load response is identical (including the form id), but with differing contents.

If I run reload_container(); from the debug console in Firefox however the serialize() function is empty, but $('#selectform') does is defined.

I need the contents of the form however. I do not know why the $('#selectform') selector does work after the reload but serialize() does not. Any help is much appreciated.

Please note that the inputs of the form do contain the name-tag. jQuery serialize not working is not relevant.

Update: events that are bound to elements in the container do not work either after the load(). E.g. $('#newinfo').click(function(){alert('hi!'}); in the body load script. This is solved however by jQuery .live() vs .on() method for adding a click event after loading dynamic html

You want to serialize the result of the ajax request? And how do you call `reload_container()`? — Mark Baijens, Sep 20 '18 at 08:28
You can define delegate events with `on( events, selector, handler )` — Mark Baijens, Sep 20 '18 at 08:30
Yes I need to serialize, and reload_container is fired by a setInterval — L.A. Rabida, Sep 20 '18 at 08:31

score 0 · Answer 1 · answered Sep 20 '18 at 07:34

0

You should execute your code inside the load complete handler.

$('#container').load('url/to/ajax/update', function() {
  console.log($('#selectform').serialize());
});

Check examples here http://api.jquery.com/load/

answered Sep 20 '18 at 07:34

CodeThing

2,580
2
12
25

Thanks, I tried it but serialize() inside the load gives me the same result, serialize() still gives an empty result after a succesful load(). Besides, I do need serialize() later on when submitting the form in a get request. – L.A. Rabida Sep 20 '18 at 07:53
1

It's perfectly fine to use `serialize()` outside of the ajax handler. – Mark Baijens Sep 20 '18 at 08:57

Mark Baijens · Accepted Answer · 2018-09-20T08:49:05.573

This seems to work fine. There is probably something wrong in your ajax handler. Hope this example helps you. Also made an example with a delegated input event on the input element.

please provide your ajax handler if you need help with that.

//define delegate event so it triggers after inserting new elements (with ajax) too.
$('#newinfo').on('input', 'input[name=firstname]', function(){
  console.log($(this).val());
});

//attach the reload_container function to the button for testing purpose
$('#reload').on('click', reload_container);

//This function mimics the result of your ajax request assuming you do something like this. It updates the form with a new form and run the serialize function on it.
function reload_container() {
  var ajaxResultMimic = '<form id="selectform">Your name:<br><input type="text" name="firstname" value="updated"><br></form>';
  $('#newinfo').html(ajaxResultMimic);
  console.log($('#selectform').serialize());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="reload">reload</button>
    <div id="container">
        <div id="newinfo">
            <form id="selectform">
                Your name:<br>
                <input type="text" name="firstname"><br>
            </form> 
        </div>
    </div>
</body>

You're right, this does work fine. My problem must be unrelated to this. Thanks. — L.A. Rabida, Sep 20 '18 at 08:57
@L.A.Rabida Yeah I think you do something in your ajax handler that removes the `#selectform` element or removing the id of the element. Or not adding any inputs to it. — Mark Baijens, Sep 20 '18 at 08:59

JQuery $('form').serialize() not working after $('div.container').load()

2 Answers2