Question posted in
You can find the official documentation here.

Jquery ajax – How can I add an AJAX-loaded form after the div that has been clicked?

I have a list of items on a webpage. I would like to load a form via Ajax each time I click on any item in the list. The HTML looks like this:

<div class="item">
    <... some html code for the first item ...>
</div>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

My goal is that if the user clicks on the first “item-div” a form shall be loaded using AJAX. The loaded form shall be inserted after the “item-div”… something like this:

<div class="item">
    <... some html code for the first item ...>
</div>
<form>
    <... some html code for the form... loaded via AJAX...>
</form>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

I can’t understand why this won’t work. Here is my jQuery code:

$(document).ready(function(){
  $(".item").click(function(){
    $(this).after().load("loadform.php");
  });
});

The Ajax-load function overwrites the inner <... some html code... > instead of adding it after the “item-div”. What is wrong? How can I solve it?

Tags:

4

Answers


  1. 0

    Maybe Try the below way. Get the data from php and then insert it using after function.

    $.get('loadform.php', function(data){ 
    $(this).after(data); 
  });
    Login or Signup to reply.
  2. 0

    You can not use load() with after() . When a successful response is detected (i.e. when textStatus is “success” or “notmodified”), .load() sets the HTML contents of the matched elements to the returned data.If you want to load content fro loadform you can try $.get method as below.

    $(document).ready(function(){
      $(".item").click(function(){
         $.get('loadform.php', function(data){ 
        $(this).after(data); 
       });

      });
    });
    Login or Signup to reply.
  3. 0

    Sometime it happens like, if you have inserted new html code into DOM with jquery, then you will follow this procedure. This will refresh the DOM behind the seen. It may help you, A simple test without ajax. You have error in your ajax request, first be sure to console.log(data) your return data, and then append it. Thanks.

        <!DOCTYPE html>
      <html>
        <head>
         <title>Smple Test</title>
        </head>
      <body>
       <div class="item">Div 1</div>
       <div class="item">Div 2</div>
       <div class="item">Div 3</div>
       <div class="item">Div 4</div>
     </body>
    </html>


    $(document).ready(function(){
      var form = '<form action="#" id="form1"><div>Hello Text</div></form>';
      $(document).on('click','.item',function(){
       $(this).after(form);
      });
    });

    A Simple JSFiddle Test

    Login or Signup to reply.
  4. 0

    I have no dummy snippet somewhere in the internet where I can load some dummy content to simulate your loadform.php but I tested it locally and it is working.

    1. First you attach click event, you can also use on('click', function ...)
    2. You store the clicked element in currentItem
    3. You do the Ajax request with $.get
    4. If successful, append the Ajax request result to the stored element currentItem 
    $(document).ready(function(){
    $(".item").click(function(){
        var currentItem = $(this);
        $.get('loadform.php', function(data){
            currentItem.after(data); 
        }).fail(function() {
            console.log( "Can't load loadform.php" );
        })
    });
});
    .item {
    cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
    ... some html code for the first item ...
</div>
<div class="item">
    .. some html code for the next item ...
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search