Not able to append HTML code in jquery

Question

I am not able to append my HTML code using jQuery. This is my HTML code:

<div class="am-right-section">
    <div class="right-quote-section">
    <img class="customer-profile-img" src="http://45.56.70.30/mijpaal_am/pub/media/images/avtaaar.png" width="100px" height="100px"><div class="centered">
    <div id="loading" style="display:none">
    <img src="http://45.56.70.30/mijpaal_am/pub/media/am-loader/loader.gif">
    </div>
    </div>
<form class="form customerdetail" action="http://45.56.70.30/mijpaal_am/accountmanager/accountmanager/amsave" id="customerdetail" method="post" data-hasrequired="* Required Fields" novalidate="novalidate">
    <fieldset class="fieldset">

                <div class="control">
                    <input name="customer_land" id="customer_land" class="customer_land required-entry1" aria-required="true" type="text">
                </div>

                <button type="submit" title="Submit" class="action submit primary">
                    <span>Generate Request</span>
                </button>

    </form>
    </div>
    </div>
        <div class="tab-content">
            <div class="tab-pane active" id="contact_01">kndsa jkasf kajf kndsa jkasf kajf  kndsa jkasf kajf  kndsa jkasf kajf  kndsa jkasf kajf  kndsa jkasf kajf  </div>

        </div>

This is my jQuery:

<script>
 jQuery('.add-contact').click(function(e) {
        e.preventDefault();
        var id = jQuery(".nav-tabs").children().length; //think about it ;)
        jQuery(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');         
        jQuery('.tab-content').append('<div class="tab-pane" id="contact_'+id+'"><?php echo $template;?></div>');
});
</script>

I have set my HTML in $template variable successfully.But append does not works.my html does not append into the tab-content class.

Please solve my query.Thanks in advance!!!!

@SunnyRahevar first try to append simple markup without the $template. To rule out any problem that may be caused by $template — Benny Halperin
– Benny Halperin, Commented Mar 24, 2018 at 10:48

Andrik007 · Accepted Answer · 2018-03-24 11:23:46Z

1

I think, your jQuery code is running before page load. Try this:

jQuery(document).ready(function(){
    jQuery('.add-contact').click(function(e) {
        e.preventDefault();
        var id = jQuery(".nav-tabs").children().length;
        jQuery(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');         
        jQuery('.tab-content').append('<div class="tab-pane" id="contact_'+id+'"><?php echo $template;?></div>');
    });
});

answered Mar 24, 2018 at 11:23

Andrik007

576 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karlo Kokkak · Accepted Answer · 2018-03-24 11:33:55Z

1

Tested with the below. It works. Must be a problem with the content of $template.

<?php
        $template =<<<JS
        <div class="quote-status"> <input name="quote-status-value" value="0" checked="" type="radio"> Get Email and set value<br> <input name="quote-status-value" value="1" type="radio"> Set value<br> </div>
JS;
        ?>      
        <script>
 jQuery(document).ready(function(){
    jQuery('.add-contact').click(function(e) {
        e.preventDefault();
        var id = jQuery(".nav-tabs").children().length; //think about it ;)
        jQuery(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');   
        jQuery('.tab-content').append('<div class="tab-pane" id="contact_'+id+'"><?php echo $template;?></div>');
  });
});

</script>

edited Mar 24, 2018 at 11:33

answered Mar 24, 2018 at 11:06

Karlo Kokkak

3,7344 gold badges21 silver badges35 bronze badges

4 Comments

Sunny Rahevar Over a year ago

can i put php variable between <<<JS and JS?

Karlo Kokkak Over a year ago

Yes you can. Make sure the last JS; has no indentation.

Sunny Rahevar Over a year ago

can you please send me with example? how to put the variable between that?

Karlo Kokkak Over a year ago

Just a simple $variable. If it's an array then do {$variable[0]} or {$variable['key']}

Collectives™ on Stack Overflow

Not able to append HTML code in jquery

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related