0

I'm trying to reload a select with jquery and ajax, this select must be reload after I submit a new entry, right now I reach this point.

$("form").on("submit", function (e) {
    e.preventDefault();
    var form_id = $(this).attr('id');
    var form_details = $('#' + form_id);
    $.ajax({
        type: "POST",
        url: 'Users.php',
        data: form_details.serialize(),
        success: function (data) {
            $('#check_data').html(data);
            $('#div_to_update').load('my_page.php #div_to_update');
        }
    }
});

The div to be reloaded has a html select generate by a php code, the other fields are just plain html:

This is the first form, that must be reloaded with the values I enter in the form2:

<div id="div_to_update">
    <form id="form1">
        <?php Helper::combo_users(); ?>
        /*
        ...
       */
    </form>
</div>

This is the form 2:

<form id="form2" method="post">
    <input type="text" id="user_reg" name="user_reg"/>
    <input type="text" id="user_name" name="user_name"/>
    <input type="submit" value="Add"/>
</form>

The odd thing is, this code will run the first time ok(I enter the values in the form2 and send, the form1 will reload with the new value), but the second time it does not work(when I click submit on the form2 nothing seems to happen) and the third time it will work again (click the submit button again and the value is send and the form 1 is reloaded) and so on.

Siva.G ツ
  • 831
  • 1
  • 7
  • 20
heliosk
  • 1,113
  • 3
  • 23
  • 45
  • You're overwriting the form each time, is that what you intended? – Jay Blanchard Jun 08 '15 at 17:36
  • Everytime when the users generate a new user this select must reloaded with the new values. I forgot to say that that I'm using two forms. One to submit the new users and other to use the information submitted, as you see above. – heliosk Jun 08 '15 at 17:40
  • Is it the first or second form that isn't working? – Jay Blanchard Jun 08 '15 at 17:41
  • I edited my question. – heliosk Jun 08 '15 at 17:51
  • possible duplicate of [JavaScript does not fire after appending](http://stackoverflow.com/questions/27494227/javascript-does-not-fire-after-appending) – Jay Blanchard Jun 08 '15 at 17:55
  • 1
    jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use [event delegation](http://learn.jquery.com/events/event-delegation/), bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use `document` as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally [you should delegate to the nearest parent that exists at the time of page load.](http://stackoverflow.com/a/12824698/1011527) – Jay Blanchard Jun 08 '15 at 17:55

1 Answers1

0

Simply you are not working for second time since you are serializing a form which is dynamically updated within ajax.

jQuery won't serialize when you load a form elements such as inputs dynamically.

You're solution can be loading your new values with JSON object, and put in a foreach to display new content.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Alex
  • 715
  • 5
  • 14