jquery Editing dynamically generated div content

Question

I have the following code snippet:

(document)
    .on("submit", ".edit-employee-form", function (e) {

    e.preventDefault();

    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        method: $(this).attr("method"),
        dataType: "html",
        context: this,
        data: $(this).serialize(),
        success: function (response) {

            p = $(this).parent();
            p.prevAll('#first-name').html($(this).find("#first_name").val());
            p.prevAll('#last-name').html($(this).find("#last_name").val());
            p.prevAll('#email').html($(this).find("#email").val());
            p.prevAll('#remain_case').html($(this).find("#remain_case").val());
            $(this).parent().hide();


            console.log('yay');

        },
        error: function (response, error) {
            console.log("ERROR");
            console.log(response);
            console.log(error);
        }
    });


}

);

What it does is it submits a form to edit a particular employee (a list is displayed on the page) and then updates the html to reflect the changes the user submitted.

My problem is that some of the employees are also added via ajax calls, so their corresponding list elements are added dynamically to the html. I don't seem to be able to access their divs with id first-name, last-name, email etc. Any advice on how I can select divs which have been added dynamically?

I'm sorry for this being an image but I don't seem to be able to copy off the chrome console. The second element is added dynamically.

<div class="container firm-employees">

<div class="row">

    <div class="col-lg-3 table-header">Name</div>
    <div class="col-lg-2 table-header">Surname</div>
    <div class="col-lg-3 table-header">E-Mail</div>
    <div class="col-lg-1 table-header">Cases</div>
    <div class="col-lg-3 table-header">Options</div>


</div>


    <div class="row manage-user-row">

        <div class="col-lg-3" id="first-name">Gray</div>
        <div class="col-lg-2" id="last-name">Sawyer</div>
        <div class="col-lg-3" id="email">[email protected]</div>
        <div class="col-lg-1" id="remain_case">1</div>
        <div class="col-lg-3">

            <button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp; &nbsp;
                Edit User
            </button>


            <a href="edit/22">
                <button type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp; &nbsp;
                    Edit Secretaries
                </button>
            </a>

        </div>

        <div id="ed-205" class="edit-employee-box">
            <form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">

                <div class="row">

                    <div class="col-lg-3">

                        <label for="first_name" class="form_label">First Name</label>
                        <input type="text" name="first_name" value="Gray" id="first_name" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        <label for="last_name" class="form_label">Last Name</label>
                        <input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        <label for="email" class="form_label">E-Mail</label>
                        <input type="text" name="email" value="[email protected]" id="email" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        &nbsp;


                    </div>

                </div>

                <div class="row">

                    <div class="col-lg-3">

                        <label for="phone" class="form_label">Phone Number</label>
                        <input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        <label for="remain_case" class="form_label">Remaining Cases</label>
                        <input type="text" name="remain_case" value="1" id="remain_case" class="form-control">


                    </div>

                    <div class="col-lg-3">


                    </div>

                    <div class="col-lg-3">

                        &nbsp;


                    </div>

                </div>

                <div class="row">

                    <div class="col-lg-3">

                        <br>

                        <input type="submit" class="btn btn-success btn-md" value="Update User">


                        <a href="edit/22">
                            <button type="button" class="btn btn-info btn-md">
                                Reset Password
                            </button>
                        </a>


                    </div>

                    <div class="col-gl-3">


                    </div>

                </div>

            </form>

        </div>


    </div>








<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">[email protected]</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> &nbsp; &nbsp;Edit User</button>&nbsp;<a href="edit" 206"=""><button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp; &nbsp;Edit Secretaries</button></a></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="[email protected]" id="email" class="form-control"></div><div class="col-lg-3">&nbsp;</div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3">&nbsp;</div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><a href="edit/206"><button type="button" class="btn btn-info btn-md">Reset Password</button></a></div><div class="col-gl-3"></div></div></form></div></div>


</div>

jQuery should be able to select elements that have been added dynamically, as long as you call jQuery after the elements are in the DOM. It would help if you showed some html. — Eric Guan
– Eric Guan, Commented Feb 25, 2016 at 0:34
Do you have the html and the rest of your JavaScript code so I can help you troubleshoot? — Larry Lane
– Larry Lane, Commented Feb 25, 2016 at 0:37
It is hard to answer, because you didn't show enaugh code, but I would guess two things. 1. You shouldn't have two elements with the same id in your code. You should replace #first-name with .first-name, #last-name with .last-name etc. IDs always should be uniqe. 2. Depends how you inject new employee code to your HTML structure. If f.eg. you use $("#some-element").html("<p>Some HTML</p>"). But you really should paste more code, on how you make an injection. — ziemowit
– ziemowit, Commented Feb 25, 2016 at 0:54
You should be able to copy from the chrome developer tool by right clicking on the element you would like to copy and selecting "edit as html". Then select the html and copy. — jnoreiga
– jnoreiga, Commented Feb 25, 2016 at 0:59

Kabkee · Accepted Answer · 2016-02-25 01:37:19Z

1

Your code should be sure the order of finished ajax calls because it's too fast to follow with human eyes. If when appending ajax call is not completed, you cannot select those elements using even element id.

To do so, you should put ajax function calls in "success handler". if Number one is success then Number two in the one's success handler, and Number three in two's success handler, and so on...

The simple solution is to use PROMISE to get all of ajax relative functions in order. Please refer to the link : https://api.jquery.com/promise/

To check the element is successfully appended in time, check out the console with 'console.info or console.log" or something like that. if it's length is 0, then the appending ajax call is not yet completed.

answered Feb 25, 2016 at 1:37

Kabkee

1982 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrD Over a year ago

Thanks @Kabkee, I'll try this later and let you know :)

Kabkee Over a year ago

@MrD Did you solve the problem anyway? in different way?

MrD Over a year ago

apologies - I didn't have a check of looking at it yesterday! Will look by the end of today (I'm on GMT :) ) and let you know! Thanks for your help!

Collectives™ on Stack Overflow

jquery Editing dynamically generated div content

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related