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.





    Name
    Surname
    E-Mail
    Cases
    Options





    

        Gray
        Sawyer
        masakotypu@hotmail.com
        1
        

            


            
                
            

        

        
            

                

                    

                        First Name
                        


                    

                    

                        Last Name
                        


                    

                    

                        E-Mail
                        


                    

                    

                         


                    

                

                

                    

                        Phone Number
                        


                    

                    

                        Remaining Cases
                        


                    

                    


                    

                    

                         


                    

                

                

                    

                        


                        


                        
                            
                        


                    

                    


                    

                

            

        


    








Evan
Thompson
pubazof@hotmail.com
2
 
First Name
Last Name
E-Mail
 
Phone Number
Remaining Cases

Kabkee · Accepted Answer

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.

jquery Editing dynamically generated div content

Answers (1)

Related Questions