Ajax: refresh div continuously with onclick jQuery

Question

I have been trying refresh the div contents after button click but it happen only one time and need to refresh the page to click the button again to refresh the content. I'm new to AJAX, please help me to solve this issue.

Here is my HTML:

<li id="personal-info" class="personal-info-wrapper">
    <div class="profile_content" id="personal-info-contents"> 
      **more codes to follow....**
      **at last**
    <tr class="pro-info-set">
        <td class="info-group-left">
            <input class="form-control" type="text" id="js_personal_title" name="js_personal_title">
        </td>
        <td class="info-group form-inline">
            <input class="form-control" type="text" id="js_personal_desc" name="js_personal_desc">
            <input id="submit_person" class="form-control" type="button" value="Add">
            <label id="submit_person_msg" value="Add"></label>
        </td>                                       
    </tr>
       <?php }  ?>
</table>

Here is my JS

$("#submit_person").click(function(e){
    e.preventDefault();
    js_personal_title = $("#js_personal_title").val();
    js_personal_desc= $("#js_personal_desc").val();
    if (js_personal_title !== null && js_personal_title !== "") {
        if (js_personal_desc !== null && js_personal_desc !== "") {
            var datastr = 'js_personal_title='+js_personal_title + '&js_personal_desc='+js_personal_desc; 
            $.ajax({
                type: "POST",
                url: "<?php echo base_url().'index.php/Jobseeker/add_personal' ?>",
                data: datastr,
                success:function(e) {
                    //e.preventDefault();
                    $(".personal-info-wrapper").load(location.href  + " #personal-info-contents");
                }
            });
        } else { alert('Please enter the decription');}
    } else { alert('Please enter the title');}
return false;
});

Did you checked the Ajax response. Is **success** callback called ? — Mayank, Sep 30 '15 at 15:10
yeah, its working, when I try second time only its getting stuck — Sahan Perera, Sep 30 '15 at 15:12
did you assigned the **$("#submit_person").click(** on Document Ready event ? — Mayank, Sep 30 '15 at 15:16
check out browser console window for Javascript errors on the second click. — Mayank, Sep 30 '15 at 15:18
Is this markup accurate? Your whole form is inside the `li` element? — MinusFour, Sep 30 '15 at 15:24
Yeah, but there is no form though, its execute one time per page loads — Sahan Perera, Sep 30 '15 at 15:25
Possibly, this post will be helpful http://stackoverflow.com/questions/18196185/jquery-click-event-doesnt-work-after-append-dont-know-how-to-use-on — Sergey, Sep 30 '15 at 15:33

score 2 · Accepted Answer · answered Sep 30 '15 at 15:29

2

You are clearing out all the elements inside the li element and replacing them with new ones. Your old listeners are gone. You'll have to reattach the listeners or use delegation. For example, change this:

 $("#submit_person").click(function(e){

For this:

 $('.personal-info-wrapper').on('click','#submit_person', function(e) {

This assuming .personal-info-wrapper never gets replaced.

answered Sep 30 '15 at 15:29

MinusFour

11,617
3
23
30

Cool, this solves lots of questions I have, thanks a lot. – Sahan Perera Sep 30 '15 at 15:44

Ajax: refresh div continuously with onclick jQuery

1 Answers1