CODEWITHSUNDEEP
javascriptjquery
JasonDavis
JasonDavis

Reputation: 48983

Insert HTML into page targeting a DIV ID that is added after the DOM has loaded?

I have a page that has a Modal that generates HTML from an AJAX request when each Modal is clicked on.

Inside the modal comments can be posted and in it;s AJAX response should insert new comment into the modal HTML with this...

$(result.html).hide().insertBefore('#addCommentContainer').slideDown();

For some reason it does not insert the HTML on success of new comment AJAX response.

I think it might because #addCommentContainer is added after the DOM is loaded.

So with that known how can I insert HTML after the DIV ID #addCommentContainer when #addCommentContainer is added after DOM load?

UPDATE TO EXPLAIN BETTER...

1) page is loaded and DOM is loaded

2) AJAX request is made which adds a DIV with ID #addCommentContainer to page.
<div id="addCommentContainer">this div was added to page after the dom was loaded from an AJAX request</div>

3) Now another separate AJAX request is made which is trying to add comments to the HTML DOM. AJAX reuquest POST comment to server and server returns success and tries to append comment HTML to the previous DIV with ID #addCommentContainer that was added to the DOM before this AJAX request.

It does so with this jQuery code where result.html holds the comment HTML that should be added to the DOM:
$(result.html).hide().insertBefore('#addCommentContainer').slideDown();

The problem This HTML for the new comment is NOT added to the DOM. I assume it is because jQuery cannot find #addCommentContainer since it was added after the DOM was loaded.

Generally when I need to use an elelment that was added after DOM load I can use document like this....
$(document).on('click', '#addCommentContainer', function(e){

However in this case it is not a simple click event and instead it needs to find the element so it can append more HTML to it.

Upvotes: 0

Views: 370

Answers (3)

zer00ne
zer00ne

Reputation: 44108

UPDATE

Try wrapping your jQuery in $(document).ready(function() {...}); just before the closing </body> tag like you normally do (a safe assumption).

Then use the async attribute on the <script> block.

EXAMPLE:

    <script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.slim.min.js" async></script>
    $(document).ready(function() {
     $(result.html).hide().insertBefore('#addCommentContainer').slideDown();
       ....
    });
   </script>

Upvotes: 0

Sceptic
Sceptic

Reputation: 1659

You could place async: false in the options of your first AJAX request. It seems to me it's quite possible that your second request returns sooner then your first one. AJAX request are asynchronous unless specified otherwise. A more common solution would be to place the second request in the callback of the first request.

Upvotes: 1

user5162985
user5162985

Reputation:

Can you not use the ready() or load() functions? I believe How can I call a function after an element has been created in jquery? may contain the answer to what you are trying to achieve.

Upvotes: 0

Related Questions