AjaxForm function doesn't work on second time

Question

I am trying to use AjaxForm to update data. On first call it works great and updates the html text in my by id.

            <script type="text/javascript">
            $( document ).ready(function() {
                $('.entry_form').ajaxForm(function(data) { 
                        $("#results").html(data);
                });
                $('.submitclosest').on('click', function(e) {
                    e.preventDefault();
                    $(this).closest('form').submit();
                });
            });
        </script>

On my fetching file I got this line:

<script>$('#sales_<?=$tid;?>_<?=$position_json;?>').html('<?php ShowSlot($tid, $position_json);?>');</script>

And I got this on the functions file:

    function ShowSlot($tid, $position_json)
{
?><form action="fetch/add_entry.php" method="post" class="entry_form"><input type="hidden" name="tid" value="<?=$tid;?>" /><input type="hidden" name="position" value="<?=$position_json;?>" /><a href="#" class="submitclosest"><i class="fas fa-user-plus"></i></a></form><?php   
}

Any idea why it works only on first refresh?

I'm going to assume that your `$("#results").html(data);` is replacing the entry_form that was originally on the page, perhaps? — Taplar, May 31 '18 at 20:51
Yes, but as you can see in the fetching code, it also has the same name as the previous one - "entry_form" — D. Yeffet, May 31 '18 at 20:53
It doesn't matter. If you replace it, the new element will not have the binding on it. — Taplar, May 31 '18 at 20:53

Tijmen · Answer 1 · 2018-05-31T20:57:08.313

0

At first glance, it seems you're only calling the AJAX function on

$(document).ready

which means it is called only when the page first loads or is refreshed. If you want to update the form after your page has already loaded, you'll have to call the AJAX function again by means of a timer or a click event or something similar.

EDIT: example for implementation

Assuming submitclosest is the element a user clicks when submitting, I'd simply do this:

$( document ).ready(function functionName() {
            $('.entry_form').ajaxForm(function(data) { 
                    $("#results").html(data);
            });
            $('.submitclosest').on('click', function(e) {
                e.preventDefault();
                $(this).closest('form').submit();
                functionName;
            });
        });

edited May 31 '18 at 20:57

answered May 31 '18 at 20:50

Tijmen

495
1
5
23

Any idea what would be the best way? – D. Yeffet May 31 '18 at 20:51
Depends on your use case really. A timer (for instance by using a callback and `setTimeOut` would auto-execute the function every X milliseconds, but if you only want to update when the user submits, I'd name the function and call it by name as a click event. (Use an event listener though, inline calls are bad) – Tijmen May 31 '18 at 20:53
May I ask of an example of how to implant it in the code? – D. Yeffet May 31 '18 at 20:54
I've updated my answer with an example – Tijmen May 31 '18 at 20:57
Thanks, but it still gives me the same result :( – D. Yeffet May 31 '18 at 20:59
In that case there's probably something else going on that I cannot troubleshoot without seeing more code. Could you add the relevant bits of HTML? – Tijmen May 31 '18 at 20:59
There's nothing interesting to see to be honest. I think it just won't apply the "submitclose" event after 1 ajax usage. I get it that its because of the reason you stated but trying to solve it as well – D. Yeffet May 31 '18 at 21:01
In that case, I'm afraid I can't help you any further. Hopefully someone else can, or you manage to figure it out some other way. Good luck. – Tijmen May 31 '18 at 21:02
Perhaps I got the reason. When I used "OnClick="$(this).closest("form").submit();"" I couldn't do that (as the click event) because when appending html I couldn't use any quoates so I used a function. I think I need to find a way to append quotes. – D. Yeffet May 31 '18 at 21:07

Taplar · Answer 2 · 2018-05-31T21:09:46.337

-1

function convertFormToAjaxSubmit () {
  //initialize the entry_form in the results to submit with ajax
  //this only effects the elements that exist in the DOM at that point in time
  $('#results .entry_form').ajaxForm(function(data) {
    //the following line replaces the elements that were previously initialized with
    //different elements
    $("#results").html(data);
    //call the method again to bind on the new form created in the results
    convertFormToAjaxSubmit();
  });
}

convertFormToAjaxSubmit();

edited May 31 '18 at 21:09

answered May 31 '18 at 21:01

Taplar

24,246
4
18
33

Could you please explain what you did and why so OP can learn from this, rather than just copy your code? [This answer isn't really up to par for SO](https://stackoverflow.com/help/how-to-answer) – Tijmen May 31 '18 at 21:04
https://meta.stackoverflow.com/questions/258673/can-code-only-answers-be-high-quality @Tijmen – Taplar May 31 '18 at 21:07

AjaxForm function doesn't work on second time

2 Answers2