I´m trying create a bootstrap popup with bootbox modal, inside of form has a input text with masked input, but any events inside of popup don´t work.
See here: http://jsfiddle.net/ens1z/UK6x5/5/
The html:
<p>The mask input below WORKS great</p>
<p>
<input type="text" class="mask" />
</p>
OPEN BOOTBOX
<div id="frm" style="visibility: hidden">
<div class="form-horizontal">
<p>The mask input below DON´T WORK. :-(</p>
<input type="text" class="mask"/>
</div>
</div>
JavaScript:
$("#asssf").click(function (e) {
e.preventDefault();
bootbox.dialog({
message: $("#frm").html(),
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-danger",
callback: function() {
return;
}
}
}
});
$(".mask").mask("999-99-9999",{placeholder:"_"});
});
$(".mask").mask("999-99-9999",{placeholder:"_"});
How to mask works inside of popup?
Try this fiddle :) HERE
The problem is that you loaded the html to bootbox without his events.
i made a function to solve your problem:
function BootboxContent(){
var content = $("#frm").clone(true);
$(content).css('visibility','visible');
content.find('.mask').mask("999-99-9999",{placeholder:"_"});
return content ;
}
call it on your message as in the fiddle, or without function like this :
bootbox.dialog({
message: $("#frm").clone(true).css('visibility','visible').find('.mask').mask("999-99-9999",{placeholder:"_"}),
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-danger",
callback: function() {
return;
}
}
}
});
});
Related
I have a wordpress auction site and wanted to add a confirm dialog with jquery when someone clicks on the "bid" button. I can achieve this with the default system dialog but I want a more custom dialog box with jQuery. How can I make it click the bid button once the end user has confirmed the bid?
Here is the code example:
<button type="submit" class="bid_button button alt"><?php echo wp_kses_post( apply_filters( 'bid_text', esc_html__( 'Bid', 'auctions-for-woocommerce' ), $product ) ); ?></button>
<script>
jQuery('button').confirm({
title: 'titletext',
content: 'content text"',
type: 'red',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-primary',
keys: ['enter'],
action: function(){
console.log('Brukeren bekreftet "OK"');
}
},
No: function(){
text: "No",
jQuery.alert('Kansellert!');
console.log('the user clicked cancel');
}
}
});
</script>
it seems like this libary is not created for submitting forms via button, more like using it for <a> tags, source - https://github.com/craftpip/jquery-confirm/issues/229
I thought i will give you still a way to solve your problem.
now i am preventing the default behavior from the button when its not confirmed and trigger it again when its confirmed, but this time the button can submit the form.
Also added the id submitButton to your button for making it individual.
<button type="submit" id="submitButton" class="bid_button button alt"></button>
<script>
var confirmed = false;
$('#submitButton').on('click', function() {
if (!confirmed) {
event.preventDefault();
$.confirm({
title: 'titletext ',
content: 'content text"',
type: 'red',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-primary',
keys: ['enter'],
action: function() {
confirmed = true;
$('#submitButton').click()
console.log('Brukeren bekreftet "OK"');
}
},
No: function() {
text: "No",
jQuery.alert('Kansellert!');
console.log('the user clicked cancel');
}
}
})
} else {
confirmed = false
}
})
</script>
hope I could help you. :)
I have a dialog box that is opened when field validation errors are found. I have successfully captured the html formatted text inside the jQuery dialog box. I have 3 buttons defined in the dialog box. Continue (close the dialog box), Show Fields (which should display the fielderrors html text) and Show Details (which should show error details)
Here is the HTML code from the Page
<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
<div id="fielderrors" style="display:none"> </div>
<div id="errordetail" style="display:none"> </div>
</div>
This is the code in the .js file within the Ready function
when I press the Submit button on the Main Form, I get back the presubfields and presubdetail variables. I know that part is working because the console.log lines show the right information.
For test purposes here you can use
var presubfields = "The following fields contain errors: <br> member status <br> member since";
$(function() {
$( "#dialogpresubval").dialog({
autoOpen: false,
hide: "puff",
modal: true,
closeOnEscape: false,
height:400,
width:450,
resizable: true,
draggable: true,
title: "Pre-Submit Validation Errors",
open: function() {
console.log("4119 - On Open presubfields is: " + presubfields); // I see the presubfields variable and its text;
// $("#fielderrors div").html(presubfields);
// $("#fielderrors", {html:presubfields});
},
buttons: [
{
text: "Continue",
click: function() {
var button = $(this).prop("id");
console.log("4127 You clicked on:", button);
$(this).dialog("close");
},
},
{
text: "Show Fields",
click: function() {
var button = $(this).prop("id");
// Show the Fields requiring correction - div id = fielderrors
//var field_errors = $('#dialogpresubval').attr('note_text');
console.log("4143 - presubfields = " + presubfields); // console shows the correct information;
//$("#fielderrors").append(presubfields);
//$("#fielderrors", {html:presubfields});
$("#fielderrors").text("presubfields should be shown");
// Used this to test for generic text - $("#fielderrors").text("presubfields should be shown");
// $("#fielderrors").val(presubfields);
//$("#fielderrors").prop('display', 'block');
$("#fielderrors").css({'display':'block'});
$("#errordetail").hide();
},
},
{
text: "Show Details",
click: function() {
// Show the Details of the errors - div id = errordetail
// presubfields presubdetail
$("#errordetail").val(presubdetail);
$("#errordetail").show();
$("#fielderrors").hide();
},
}
],
position: {
my: "center center",
at: "center center"
}
});
});
I left in the commented out fields so you could see what I've tried already. I can't get the presubfields or presubdetail to display in the appropriate div.
What I want is that when the Show Fields button is pressed, the presubfields html is shown and the same for the presubdetail.
Thanks for looking.
You were close with $("#fielderrors div").html(presubfields); but that is saying find a div element that is inside another element with an id of fielderrors. There is no such element in your HTML.
You can instead simply use only the id (ID's on elements should be unique) so it would be $("#fielderrors").html(presubfields); in the open function.
You now have the html in the proper div's so the next step is to either .show() and/or .hide() the elements when the corresponding buttons are clicked. An example below.
var presubfields = "The following fields contain errors: <br> member status <br> member since";
var presubdetail = "I am an example of an error detail.";
$(function() {
$("#dialogpresubval").dialog({
autoOpen: false,
hide: "puff",
modal: true,
closeOnEscape: false,
resizable: true,
draggable: true,
title: "Pre-Submit Validation Errors",
open: function() {
$("#fielderrors").html(presubfields)
$("#errordetail").html(presubdetail);
},
buttons: [{
text: "Continue",
click: function() {
var button = $(this).prop("id");
console.log("4127 You clicked on:", button);
$(this).dialog("close");
},
},
{
text: "Show Fields",
click: function() {
$("#fielderrors").show();
$("#errordetail").show();
},
},
{
text: "Show Details",
click: function() {
$("#fielderrors").hide();
$("#errordetail").show();
},
}
],
position: {
my: "center center",
at: "center center"
}
});
// show the modal
$( "#dialogpresubval" ).dialog( "open" );
});
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
<div id="fielderrors" style="display:none"> </div>
<div id="errordetail" style="display:none"> </div>
</div>
I'm using Bootstrap 4 Beta and JavaScript for my university project, I'm making some calendar event function. and I'm used Bootbox.js for popup, my issue is When I click the calendar event alert is display but this alert cant customize ,I want to know how to added <div> <button> text and etc for this alert, look my attached image, you can understand it
This is my script,
event
dp.events.list = [{
start: "2017-12-20",
end: "2017-12-28",
id: "1",
resource: "A",
text: "Mahesh",
backColor: "#70CB85",
},
click
dp.onEventClicked = function(args) {
bootbox.alert(" " + args.e.text()); //Alert
};
As from their documentation:
An alert callback should not supply an argument; it will be ignored
If you want to pass a button you can use confirm:
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
// ...
}
});
Or use Dialog:
bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>' })
you can put html in alert easily .
bootbox.alert("Your message <b>here…</b>")
see this link for more option of alert
The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
callback(){//stuff that happens when they click Ok.}
I do not want to disable/hide the close button with
closeButton: false,
There is onEscape function for this.
bootbox.dialog({
message: 'the msg',
title: "Title",
onEscape: function() {
// you can do anything here you want when the user dismisses dialog
}
});
You can use a variable to check if the modal was hidden after a click on OK or x button / escape key
var status = false;
$('.btn').on('click', function () {
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess: {
label: "Ok",
callback: function () {
status = true;
}
}
},
onEscape: function () {
$('.bootbox.modal').modal('hide');
}
});
});
$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
callback();
});
function callback() {
if (!status) {
onClose();
} else {
onOK();
status = false;
}
}
function onClose() {
$('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}
function onOK() {
$('p.alert span').removeClass().addClass('text-success').text("Sucess");
}
Fiddle demo
Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.
Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.
This hides the confirm button, thus the Modal appears as a normal Alert box.
bootbox.confirm({
message: "Some Button Text",
buttons: {
"cancel": {
label: "<i class='fa fa-check'></i> OK - I understand",
className: "btn btn-primary"
},
//Hide the required confirm button.
"confirm": { label: "", className: "hidden" }
},
callback: function(){
//Begin Callback
alert( "Finished" );
}
});
JsFiddle Example
I know the correct way to manage JQuery.dialog is to initialize with:
$("#dialog").dialog({ autoOpen: false });
Then use the following to open and close it:
$("#dialog").dialog("open");
$("#dialog").dialog("close");
But there are some cases when this model is not fully applicable.
For instance, I use a dialog to create new data and to edit existing data. In the first case I have a cancel and a create button, but in the second case I have also a delete button.
I've seen that there is a destroy function in jquery.dialog. The question is: in these cases, should I destroy the dialog instead of close it and create a new one? There is any better option?
jQuery UI dialog allows you to manipulate most properties after initialization. You can change the buttons some time after the dialog is initialized; e.g. when the insert or update button is clicked.
// imported from http://jsfiddle.net/salman/VYAJw/9/
$(function() {
$("#dialog1").dialog({
autoOpen: false,
modal: true
});
$("#button-insert").click(function() {
$("#dialog1").dialog("option", "title", 'Insert Record');
$("#dialog1").dialog("option", "buttons", [{
text: "Insert",
click: function() {
alert("Record inserted");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]);
$("#dialog1").dialog("open");
});
$("#button-update").click(function() {
$("#dialog1").dialog("option", "title", 'Update Record');
$("#dialog1").dialog("option", "buttons", [{
text: "Update",
click: function() {
alert("Record updated");
$(this).dialog("close");
}
}, {
text: "Delete",
click: function() {
alert("Record deleted");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]);
$("#dialog1").dialog("open");
});
});
#import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
body {
font: medium sans-serif;
}
#dialog1 label,
#dialog1 input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog1">
<p>Fill out this form.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
</form>
</div>
<input type="button" id="button-insert" value="Insert" />
<input type="button" id="button-update" value="Update" />
An alternate method would be to add the buttons directly inside the form and .hide() them depending on whether you're showing insert or update dialog.
you can set different buttons as option before dialog open
e.g.
var buttons = {
"act_add": {
"Insert": function() { ... },
"Cancel": function() { ... }
},
"act_edit": {
"Save": function() { ... },
"Delete": function() { ... }
}
};
$('.dialogOpenLink').click(function(){
var $dlg = $('#dialog'),
actType;
//get an action name from data attribute of the clicked element
actType = $(this).data('action'); //or get the action in way that best suits you
$dlg.dialog( "option", "buttons", buttons[actType]);
$dlg.dialog('open');
});
To safelly remove dialog all you need is to set close option like this:
close: function() {
return $(this).remove();
}