1

Hello I am working with LIKEBTN I have some designs on which I need likes and I have added the likebtn library on the designs but there is a load more which get the old designs as well and after ajax the html appends on the page and there I am not able to load like button library. As script has loaded before on page load so it's not appending on the new DOM elements. I have tried .live and .delegate as well but couldn't find the solution.

Before Load More You can see there is a heart icon which has the like functionality and in console you will find child elements inside <span> as well which loaded by likebtn library but after I load more designs by ajax I couldn't load likebtn library scripts on that elements you can see the image there is no like icon and in console there is no child elements inside <span>.

After Load more

This is my html which appends on ajax load more. it has dynamic variable coming from database.

                <a data-index="{{ loop.index0 }}" class="galimg animate" data-animation="fadeInUp" data-duration="010">
                 <div class="gimg">
                    <img class="img-fluid" src="{% path (design.designThumbnail), 'thumbnail' %}" alt="" />
                    <div class="gimg-caption">
                        <div class="title">
                            <h6>{{ design.title }}</h6>
                            <p>By: {{ (design.userId.userFullname!= ' ')? design.userId.userFullname|uppercase_first_letter : design.userId.contactName|uppercase_first_letter }}</p>
                            <p>From: United Kingdom</p>
                        </div>
                        <div class="likes">=
                            <!-- LikeBtn.com BEGIN -->
                            <span class="likebtn-wrapper" data-theme="custom" data-icon_size="24" data-icon_l="hrt6" data-icon_d="sml3-u" data-icon_l_c="#ffffff" data-icon_l_c_v="#fb0505" data-label_c="#ffffff" data-label_c_v="#ffffff" data-counter_l_c="#ffffff" data-bg_c="rgba(250,250,250,0)" data-bg_c_v="rgba(250,250,250,0)" data-brdr_c="rgba(198,198,198,0)" data-i18n_like="Love this" data-white_label="true" data-identifier="btn_design_{{ loop.index }}" data-dislike_enabled="false" data-icon_dislike_show="false" data-counter_zero_show="true" data-popup_disabled="true" data-share_enabled="false" data-tooltip_enabled="false" data-site_id="5b7ac72c6fd08b366d431a36"></span>
                            <!-- LikeBtn.com END -->
                        </div>
                    </div>
                 </div>
            </a>

This is the library I need to load after ajax succes

<script>(function(d,e,s) {if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>

1 Answer 1

1

You can use init() method after ajax success. It will render your new elements.

if (typeof(LikeBtn) != "undefined") {
    LikeBtn.init();
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.