onclick $(document.body).append() is not working

Question

here i want to show bootstrap modal on onclick event. Onclick event alert() is coming but $(document.body).append() (modal code) is not initializing it seems... i am not getting any error in console also... this is my code...

    (function() {  
tinymce.create('tinymce.plugins.wpc', {  
    init : function(ed, url) { 
        ed.addButton('wpc', {  
            title : 'Add Contact Us form',  
            image : url+'/dd_note.gif', 
            onclick : function() {
                alert("hii"); // it's coming on onclick event

                $(document.body).append('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');

                $('#myModal').modal();
            }  
        });  
    },  
    createControl : function(n, cm) {  
        return null;  
    },  
});  
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);  
})();

can anyone suggest me what's going wrong with my code?

Thanks in advance

Answer 1

In your html there are is script tag and some browsers does not allow to add it as text so u have to create script dom element from javascript and then append it or try something like this:

to replace in your appending html:

<script> showForms("'+url+'"); </script>

to:

<script> showForms("'+url+'");</' + 'script>

to allow browser to know that it is script tag.

working demo for appending this html

Answer 2

Try this

(function() {  
tinymce.create('tinymce.plugins.wpc', {  
    init : function(ed, url) { 
        ed.addButton('wpc', {  
            title : 'Add Contact Us form',  
            image : url+'/dd_note.gif', 
            onclick : function() {
                alert("hii"); // it's coming on onclick event

                $('body').append('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');

                $('#myModal').modal('show');
            }  
        });  
    },  
    createControl : function(n, cm) {  
        return null;  
    },  
});  
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);  
})();