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

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">×</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

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

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">×</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);
})();

Related

passing values to bootstrap modal

I am trying to pass values to my modal in html using JQUERY.
I have this:
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#clientStatus" data-clientCurrentStatus="inactive">Change Client Status</a>
<script>
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var clientCurrentStatus = button.data('clientCurrentStatus'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('#clientCurrentStatus').val(clientCurrentStatus);
});
});
</script>
and what I am trying to do is inside data-clientCurrentStatus i am passing the value. and then inside my modal I have this:
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
so as you can see, the id matches, and everything matches. I am not sure why it isn't working. I am importing the jquery tag like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
but nothing is working. how can i fix this?
I think there are some issues with what you can use for attribute names:
http://html5doctor.com/html5-custom-data-attributes/
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var client_current_status = button.data('client_current_status');
var modal = $(this);
modal.find('#clientCurrentStatus').val(client_current_status);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
<button type = "button" class="btn btn-primary" data-toggle="modal" data-target="#clientStatus" data-client_current_status="inactive">Change Client Status</button>

Ckeditor is not working in a modal dialog

I am trying to use ckeditor inline with knockoutjs in a modal dialog. But it is not working. Ckeditor all buttons are diasbled. It is not working only chrome browser. It is working on firefox and ie. I found a solution but it is not great for me. Problem is about modal showing status.
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" contenteditable="true" id="myModalLabel">Modal title</h4>
</div>
<div id="bodyModal" contenteditable="true" class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default navbar-btn margin-right-button-nav" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-new-window"></span> Edit Modal</button>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
Here is a Fiddle
You have to use bootstrap modal events like shown.bs.modal
CKEDITOR.disableAutoInline = true;
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function () {
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
})
});
Here is the updated jsFiddle : http://jsfiddle.net/8t882a2s/3/
And an other answer with more information : https://stackoverflow.com/a/25786444/4682796
// My problem was chkeditor drop down was not working propely ON IE.
this worked for me.follow below step to implement.
1. this below line of code will execute after jquery and bootstrap javascript load.
i.e
1. register the jquery version file
2. bootstrap java script load
3. then execute this code
$.fn.modal.Constructor.prototype.enforceFocus = function () {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& $(e.target.parentNode).hasClass('cke_contents cke_reset')) {
modal_this.$element.focus()
}
})
};

fade in fullcalendar with a bootstrap modal

I'm trying to fade in a bootstrap modal that has a fullcalendar in it without having the fullcalendar pop in. how would I render the calendar before starting the modal fade in?
html
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<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">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id='calendar'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
js
$(document).ready(function () {
$('#calendar').fullCalendar({
})
$('#myModal').on('shown.bs.modal', function (e) {
$('#calendar').fullCalendar('render');
});
});
http://jsfiddle.net/waspinator/HfSLs/3/
remove the fade class from the modal and change the JS to the following:
$(document).ready(function () {
$('#calendar').fullCalendar({
})
var shown = false;
$('#myModal').on('shown.bs.modal', function (e) {
if(shown === false) {
shown = true;
$('#calendar').fullCalendar('render');
$('#myModal').modal('hide');
$('#myModal').addClass('fade');
$('#myModal').modal('show');
}
});
});
http://jsfiddle.net/waspinator/HfSLs/5/

Modal work But not delete data with clicking confirm

I want to delete my data with modal confirmation.on remove click my modal show but when click confirm then data not delete.
I am trying but cant understand whats wrong with my code
my code
<script>
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
console.log($("#myModal btn-warning a"));
$("#myModal .btn-warning a").attr('href',link);
$(".modal").modal("show");
});
</script>
<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">×</button>
<h4 class="modal-title">Remove Client Account</h4>
</div>
<div class="modal-body">
Body goes here...
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-warning" type="button"> <a href="" >Confirm</a></button>
</div>
</div>
</div>
</div>
<a class="btn btn-warning" id="deleteBtn" data-adid=?a=client&cdid='.$cd[$i][0].' data-toggle="modal" href="#myModal">Remove</a>
I too can't understand what's wrong with your code, but since you want to delete the data attribute, you can do the below.
$(this).removeAttr("data-adid");

How set a value in modal action url

when click in delete button the modal delete button link have a value from delete button.
my code
<script>
$(document).on("click", "#myModal", function (e) {
e.preventDefault();
var _self = $(this);
var myBookId = _self.data('adid');
$("adid").val(myBookId);
$(_self.attr('href')).modal('show');
});
</script>
delete button code
print'<td><button class="btn btn-danger" data-toggle="modal" id="myModal" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</a></button>
modal code
<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">×</button>
<h4 class="modal-title" id="myModalLabel">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="a=yes&adid=" >Delete</a></button>
</div>
</div>
</div>
</div>
when click in delete item button then show a modal and this modal delete link have a url like ?a=yes&adid=
after &adid have a value that come fro delete item data-adid.
but my code not work
First of all you have the same id(myModal) for delete-button as well as for modal.
Try below code
<button class="btn btn-danger" data-toggle="modal" id="deleteBtn" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</button>
<div class="modal hide" 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">×</button>
<h4 class="modal-title" id="myModalLabel">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="" >adid=''</a></button>
</div>
</div>
</div>
</div>
script
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
$("#myModal .btn-success a").attr('href',link);
$(".modal").modal("show");
});
JSFIDDLE

Categories