0

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.

JasonDavis
  • 48,204
  • 100
  • 318
  • 537
  • Are you getting any error in console? – Praveen Singh Jul 30 '15 at 01:47
  • what does `result.html` point to? Since jQuery(javascript) uses actual DOM node, it does not matter the element you want to select is inserted after page load or not,You can select it if it exists. First of all, check AJAX calls are executed as you expect or not.I think it's highly possible that your second request finishes before first one does. – suish Jul 30 '15 at 04:40
  • Do a `console.log($('#addCommentContainer'));` the line before the failing DOM addition runs to check whether jQuery can find the element. Also be aware that id must be unique and if it's not, jQuery will always only return the first element matching the id. – connexo Jul 30 '15 at 05:56

3 Answers3

1

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.

Sceptic
  • 1,659
  • 2
  • 15
  • 25
0

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.

Community
  • 1
  • 1
mmax
  • 28
  • 1
  • 5
  • No that is not the issue. Generally You can target an element added after the DOM was loaded by using `document` but this applies to things like applying click events. I need to actually append html to an element that is added after DOM load – JasonDavis Jul 30 '15 at 02:10
0

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68