The prompt popup that occurs when I click the button with class 'alert3' does not close.
CLICKMEMEMEMEMEME
and this is the function that I am invoking:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
});
</script>
The popup does not close because you have an error in the callback function, so it crashes before bootbox can make the popup disappear.
The best guess is that Example is not defined in your code. Maybe you took it on the Bootbox website, they are using a javascript object called Example.
If you want to show the result with your callback function, you can add this to your html:
CLICKMEMEMEMEMEME<br/>
<p id='result'></p>
And then change your javascript:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
$('#result').html("Prompt dismissed");
} else {
$('#result').html("Hi <b>"+result+"</b>");
}
});
});
</script>
Prompt popup in bootbox.js
That is not working because Example function is not defined there.We need to first defined them that using current selector value and text associated with them.here $("#result") is used to show error message in particular div.
html code:
<p>Click here-><a class="alert" href=#>Alert!</a></p><p id='result'</p>
code:
var Example = (
function()
{
"use strict";
var elem,
hideHandler,
that = {};
that.init = function(options) {
elem = $(options.selector);
};
that.show = function(text) {
clearTimeout(hideHandler);
$("#result").html(text);
$("#result").fadeIn();
hideHandler = setTimeout(function() {
that.hide();
}, 4000);
};
that.hide = function() {
$("#result").fadeOut();
};
return that;
}());
Related
I have 2 buttons and when we click it redirects to different pages with window.location.replace and in document ready I put 2 if's for each click button. But what happens is when I click it entry inside both if's and should not.
My click function:
$('a[href="#reception-supplier"]').on('click', function()
{
var type = $(this).attr('data-type');
$.get("/reception-type/"+type, function(data)
{
$('.popup').html('');
$('.popup').append(data);
$('.popup').fadeIn(300);
$('.loading').fadeOut(300);
$('.inputDossie').select2();
$('.enter-reception-order').on('click', function()
{
var supplierId = $('#supplierChoose option:selected').val();
window.location.replace("/reception-order-header-supplier/"+supplierId);
});
});
});
The second function click:
$('a[href="#reception-order"]').on('click', function()
{
$.get("/reception-type/"+type, function(data)
{
$('.popup').html('');
$('.popup').append(data);
$('.popup').fadeIn(300);
$('.loading').fadeOut(300);
$('.input-order').focus();
$('.enter-reception-order').on('click', function()
{
$('.error-message-reception').fadeOut(300);
$('.error-message-reception .error').remove();
var orderId = $('.input-order').val();
$.get("/verify-reception-order/"+orderId, function(validOrder)
{
window.location.replace("/reception-order-header/"+orderId);
});
});
});
});
And in document ready I put this 2 if's:
$(document ).ready(function()
{
if(window.location.href.match('/reception-order-header-supplier/?') !== null)
{
alert('1');
}
if(window.location.href.match('/reception-order-header/?') !== null)
{
alert('2');
}
});
How can I resolve this issue or what are the alternatives?
Thank you
I am landing on the first page of DataTable, make some changes.
Then I move to the second page.
Actually, confirmation popup is shown but it navigate to the second page.
Expected: confirm pop is shown but it still landing on the first.
Here is my code:
$('#dataTable-id').on( 'page.dt', function (event) {
if( change ){
bootbox.dialog({
title: "Confirmation",
message : "Discard changes?",
buttons :{
main: {
label : "Leave",
className : "btn-primary",
callback: function (){
// To avoid broking page/length controller
// move to other pages
return true; // cancel draw
}
},
cancel: {
label : "Stay",
className : "btn-default",
callback : function() {
// stay at current page.
return true;
}
}
},onEscape: function () {return true;}
});
}
});
How to show confirmation popup before page change?
The page.dt event is only informational, it can not be canceled.
You can workaround that restriction by writing a custom preDrawCallback like discussed here: https://datatables.net/forums/discussion/25507
EDIT: You have to cancel the redraw generally and do the paging manually in the bootbox callback (as it does not work as a real modal dialog like the native javascript confirm()). I modified the above example to incorporate a bootbox confirm dialog on paging: https://jsfiddle.net/bk4nvds5/
$(document).ready(function () {
var pageLen = 10;
var originalPage = 0;
var originalPageLen = pageLen;
var gotoPage = 0;
var gotoPageLen = originalPageLen;
var fromBootbox = false;
var table = $('#example').DataTable({
"pageLength": pageLen,
"preDrawCallback": function (settings) {
if(table){ // ignore first draw
if (!fromBootbox) {
// To avoid broking page/length controller, we have to reset the paging information
gotoPage = settings._iDisplayStart;
gotoPageLen = settings._iDisplayLength;
bootbox.confirm("Are you sure?", function(result) {
console.log("goto page" + gotoPage + " (result: " + result + ")");
if (result) {
fromBootbox = true;
table.page.len(gotoPageLen);
table.page(gotoPage / gotoPageLen).draw(false);
fromBootbox = false;
}
});
settings._iDisplayStart = originalPage;
settings._iDisplayLength = originalPageLen;
$('[name="example_length"]').val(originalPageLen);
return false; // cancel draw
}else{
originalPage = settings._iDisplayStart;
originalPageLen = settings._iDisplayLength;
}
}
}
});
});
I have a popup window which disappears on click inside, but my purpose is to make it disappear on click outside.
At the moment the popup works fine but it disappears whenever I click inside the window. When I click outside the window, it stays. How do I make it work the oppersite way around?
Code as:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.invite_room_btn').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('.invite_room_btn'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
And HTML is:
<span class="invite_room_btn">
<div class="messagepop pop">
</div>
</span>
Thanks!
Your question can be interpreted as "how to identify when the click is made outside the popup window"?
as suggested here, you can work by difference, checking that the click occurred anywhere but the popup window (and eventually some other elements)
This can be achieved as follows:
the HTML code may be something like:
<div id="popup" class="popup">
Content
<div>DIV inside</div>
</div>
<button id="open">Open</button>
while the javascript is:
$(document).ready(function () {
$('#popup').hide()
});
$('#open').on('click', function () {
$('#popup').show(500)
});
$(document).mouseup(function (e) {
var popup = $("#popup");
if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(500);
}
});
Full example with some CSS-styling: http://jsfiddle.net/sLdmxda8/2/
I figured it out with the following code!
$(document).ready(function () {
$('.messagepop').hide()
});
$('.invite_room_btn').on('click', function () {
if($(this).hasClass("selected")) {
var popup = $(".messagepop");
popup.hide(150);
$(".invite_room_btn").removeClass("selected");
}
else {
$('.messagepop').show(150);
$('.invite_room_btn').addClass("selected");
}
});
$(document).mouseup(function (e) {
var popup = $(".messagepop");
if (!$('.invite_room_btn').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(150);
}
});
Thanks for the help!
How to hide and show the default Javascript alert in the same HTML Page.
For example:
In function_one I want to hide the Javascript default alert
function function_one() {
//hide Javascript alert
}
In function_two I want to show the default Javascript which has been hidden in function_one
function function_two() {
//show Javascript alert
}
Both Javascript functions are in the same HTML page.
If you want to prevent calls to alert() from being displayed, use the following code:
var defaultAlert = null;
function function_one() {
if (defaultAlert === null) {
defaultAlert = window.alert;
window.alert = function() {};
}
}
function function_two() {
if (defaultAlert !== null) {
window.alert = defaultAlert;
defaultAlert = null;
}
}
You can disable it by overriding its value with an empty function. You store the old value in a variable (oldAlert) and then restore it assigning the old value back to window.alert:
function function_one() {
oldAlert = window.alert;
window.alert = function() {};
}
function function_two() {
window.alert = oldAlert;
}
I have created a JQuery Widget to pop-up a dialogue box and to alow values to be accepted from that dialogue box
My Function defining Dialogue close
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
});
}
How to get the returnText value in the html page at the time of closing dialogue?
I tried calling the variable in the html but it return null since the dialogue is nor opened or closed. I want to receive the data in Html at the time of dialogue close
Widget
$.widget('custom.DivPopUp', {
//Call Constructor
_create: function () {
var returnText;
this._ebDefineDiv();
},
_ebDefineDiv: function () {
if ($("#ebDialogue_div").length == 0) {
//Bringing Dialogue box
$("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";
$('#ebDialogue_div').append(inDialogueDiv);
this._ebCreateDialoge();
this._ebSaveDialogue();
}
},
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
});
}
}(jQuery));
Html
$('#Id').DivPopUp();
Using JQuery, you can trigger a custom event.
An example according to your code:
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
$('#ebDialogue_div').trigger('save_action', returnText);
});
}
Then, from any other point in your script, you set an event listener for that event
$('#ebDialogue_div').on('save_action', function(event, returnText){
alert(returnText);
});
You need to add a callback
so
$.widget('custom.DivPopUp', {
//Call Constructor
_create: function () {
var returnText;
this._ebDefineDiv();
},
_ebDefineDiv: function () {
if ($("#ebDialogue_div").length == 0) {
//Bringing Dialogue box
$("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";
$('#ebDialogue_div').append(inDialogueDiv);
this._ebCreateDialoge();
this._ebSaveDialogue();
}
},
_ebSaveDialogue: function () {
//Saving Dialogue
$('#ebDialogueClose').click(function () {
var text = $('#ebPlaceholder').val();
returnText = text;
$('#ebDialogue_div').dialog("close");
this._trigger( "complete", null, { value: 100 } );
});
}
}(jQuery));
then
$('#Id').DivPopUp({complete:function(event, data) {
var returnText = data.value;
}});