adding dynamically created content to the DOM using Javascript

Question

I am working on a piece of code to load part of my content dynamically after user triggers the event by clicking. the code works when i'm using static pages but loading dynamically generated page blank.

Case Scenario is: when user clicks on the post, it will open a modal and display the detailed view which is the dynamic generated content using the slug in the link.

here is my code.

PHP (Laravel) and HTML snippet ():

updated

<div class="content-blocks blog hidex">

        <section class="content">
            <div class="block-content">
                <h3 class="block-title">My Blog</h3>
                <div id="post-list" class="col-md-10 col-md-offset-1">

                    {% set posts = blogPosts.posts %}

                    {% for post in posts %}
                    <div class="post">

                        <div class="post-thumbnail">
                            {% if post.featured_images.count %}
                            {% set image = post.featured_images|first %}
                            <a class="open-post" href="{{'blog-post'|page}}">
                                <img
                                        data-src="{{ image.filename }}"
                                        src="{{ image.path }}"
                                        alt="{{ image.description }}"
                                        style="max-width: 100%"/>

                            </a>
                            {% endif %}
                        </div>
                        <div class="post-title">
                            <a class="open-post" href="{{ post.url }}"><h2>{{ post.title }}</h2></a>
                            <p class="post-info">


                                <span class="post-author">Posted by {{ post.user.first_name}} </span>
                                <span class="slash"></span>
                                <span class="post-date">on {{ post.published_at|date('M d, Y') }}</span>
                                <span class="slash"></span>
                                {% if post.categories.count %} in {% endif %}
                                {% for category in post.categories %}
                                <span class="post-category">{{ category.name }}</span>
                                {% if not loop.last %}, {% endif %}
                                {% endfor %}
                            </p>
                        </div>
                        <div class="post-body">
                            <p>{{ post.summary }}</p>
                            <a class="btn open-post" href="{{ post.url }}">Read More</a>
                        </div>
                    </div>
                    {% endfor %}

                    <div class="text-center">
                        {% if posts.lastPage > 1 %}
                        <ul class="pagination">
                            {% if posts.currentPage > 1 %}
                            <li>
                                <a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}"
                                   aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a></li>
                            {% endif %}

                            {% for page in 1..posts.lastPage %}
                            <li class="{{ posts.currentPage == page ? 'active' : null }}">
                                <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
                            </li>
                            {% endfor %}

                            {% if posts.lastPage > posts.currentPage %}
                            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}"
                                   aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                            </li>
                            {% endif %}
                        </ul>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>
    </div>

JavaScript updated:

$('#post-list').on('click','a', function(){
    var postUrl = $(this).attr("href");

    var post = '<div class="modal" id="post-modal"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>';

    $(post).modal({
      remote: postUrl + ' #post'
    })

    return false;

});

result adds only this code to the DOM without the dynamic content from the post link:

<div class="stripe-loading-indicator loaded"><div class="stripe"></div><div class="stripe-loaded"></div></div>
<div class="modal-backdrop in"></div>
<div class="modal in" id="post-modal" style="display: block;"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>

Expected result is to add the following code to the DOM:

<div class="stripe-loading-indicator loaded"><div class="stripe"></div><div class="stripe-loaded"></div></div>
<div class="modal-backdrop in"></div>
<div class="modal-dialog"><div class="modal-content"><div id="post" class="blog">

    <section id="layout-content">

        <div class="content"><p>This is your first ever <strong>blog post</strong>! It might be a good idea to update this post with some more relevant content.</p>
            <p>You can edit this content by selecting <strong>Blog</strong> from the administration back-end menu.</p>
            <p><em>Enjoy the good times!</em></p></div>

            <div class="featured-images text-center">
                <p>
                    <img
                    data-src="PhenometechBusiness-Card-Back.jpg"
                    src="/storage/app/uploads/public/587/d0a/0e0/587d0a0e0608e385456109.jpg"
                    alt=""
                    style="max-width: 100%" />
                </p>
            </div>

            <p class="info">
                Posted
                in
                <a href="http://localhost:8000/blog">generic</a>                on Jan 16, 2017
            </p>        

        </div>
    </section>
</div>
</div>
</div>

*note: I have read similar questions posted, but none of the solutions worked for me so far.

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jared Smith, Jan 20 '17 at 16:43
@ChrisCaviness no need to take your frustration out on this poor soul. Just DV or Vote-to-close and move on. But FWIW, I just voted to close my 8 millionth 'return a value from an ajax request' question. I think I get a plaque. — Jared Smith, Jan 20 '17 at 16:46
@ChrisCaviness. i've read about it but according to JQuery website it's been deprecated. and many posts on web suggested to use `.on` instead. — Poorya, Jan 20 '17 at 16:51
are you using any third party library? how your {{ ..}} will get parsed? are you using Angular JS or any other library? — K D, Jan 20 '17 at 16:55
I didn't say ".delegate()" I said delegate. One is a deprecated jquery function, the other is an event handling strategy. Here... https://learn.jquery.com/events/event-delegation/ — Chris Caviness, Jan 20 '17 at 16:55
@Poorya I'm legitimately curious how you expect anyone here to understand what you are trying to accomplish. Nor is it at all clear what static vs dynamic pages means here. — Jared Smith, Jan 20 '17 at 16:57
I don't think it is about ajax results, but regarding the {{ .. }} template. @Poorya can you tell us how it is getting parsed? — K D, Jan 20 '17 at 16:57
@KD yes i's laravel's twig tag. I am sure the code is functioning fine on that part and suspecting that my lack of understanding on `delegate` is causing the issue. — Poorya, Jan 20 '17 at 17:08
@JaredSmith I thought the update made it clear. but please let me know if it's still unclear. — Poorya, Jan 20 '17 at 17:09
@Poorya you posted an HTML template with no mention of how it gets realized (client-side, server-side, if server-side what language, etc). You posted a snippet of jquery which is using plugins that you don't mention. KDs solution, in the second comment on your question, should work. You say it doesn't, meaning you have not reduced the problem to a MVE, which could be put in a fiddle. If you had done all of this, you would have undoubtedly solved your own problem already, which is part of why you are getting testy responses. — Jared Smith, Jan 20 '17 at 17:52
@JaredSmith I understand why i received this sort of reply as well. and I also voted up comments which directed me to the right direction even though somewhat testy. I updated the question to make it more clear. thanks — Poorya, Jan 20 '17 at 19:05
@ChrisCaviness I did read more about delegate but so far haven't been able to make it work. I have updated the question with more details. I think I might have miss lead you guys because of lack of detail in my question. so far i haven't been able to find an example or snippet that involves modals and loading content from dynamic link. thanks — Poorya, Jan 20 '17 at 20:37

score 0 · Accepted Answer · answered Jan 21 '17 at 10:51

Finally found out what was the issue. as suspected it was not a delegate issue. it was a problem with remote URL used in bootstrap's modal in the javascript code:

$('.open-post').on('click', function(){
    var postUrl = $(this).attr("href");

    var post = '<div class="modal" id="post-modal"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>';

    $(post).modal({
      remote: postUrl
    })
    return false;
});

adding dynamically created content to the DOM using Javascript

1 Answers1