Reputation: 48983
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
Reputation: 44108
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
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
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