I have developed a Window Pop up, using below code:
UPDATED CODE:
Parent.html
<a class="btn btn-primary" onclick="PopUp();">Pop Up</a>
<script>
var popup;
function PopUp() {
document.getElementById('myModal').style.display="block";
popup = window.open('popup.html', 'Google', width=700, height=600);
popup.onbeforeunload = function(){
alert("close");
document.getElementById('myModal').style.display="none";
}
}
</script>
POPUP.html
window.location = "http://www.google.com";
My requirement is that whenever someone close the Window Pop up there should be alert on Parent.html. As we don't have any control on Pop up window.
Is, there any way to do this.??
Try with something like thhis....
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
You can store the result of window.open:
let popup = window.open()
popup.onbeforeunload = function(){ }
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
EDIT
It only works if the popup opens the site in the same domain.
Related
I have a logout button in my navber.blade.php:
<a class="dropdown-item" id="logout" href="{{ route('admin.logout') }}">
{{ __('Logout') }}
</a>
I want that when I click the logout button, it will show me a confirmation message prompting whether you want to logout - (yes or no)? How to do this with jQuery or javascript?
Edit: I have add this jQuery code
<script>
$(document).on("click", "#logout", function(e) {
e.preventDefault();
var link = $(this).attr("href");
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
});
</script>
For logout it's showing message
But not logging out.
Note: I am just beginner of jQuery
I have missed to added
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
This link
I'm confused. I can open the modal using this:
onNext: function() {
$('#modal').modal('toggle');
}
But I can't close the modal with the same function with another $('#modal').modal('toggle'); or $('#modal').modal('hide').
I even tried creating a registerHelper but it still doesn't.
hopscotch.registerHelper('closeModal', function() {
$('#modal').modal('toggle');
});
Oops, I made a mistake. I can close the modal using the onEnd setting.
var tour = {
id: 'tour1',
steps: [{
target: 'Target',
title: 'Target Title',
content: 'Target Content'
}
],
onEnd: ["closeModal"]
}
Made a callback helper to close the modals.
hopscotch.registerHelper('closeModal', function() {
$('.modal').modal('hide');
});
I'm new to jQuery and I'm using the confirm box from here. But I'm facing a problem where my current page redirects back to Login page before even confirming my logout in the dialog box.
Below is my script:
$('a#logout').on('click', function () {
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
// $.alert('Confirmed!');
return true;
},
cancel: function () {
// $.alert('Canceled!');
return false;
},
}
});
if(isConfirmed == true){
window.location.href="extra-login.html";
}
});
And this is my HTML
<a href="extra-login.html" id="logout">
Log Out <i class="entypo-logout right"></i>
</a>
Any help would be appreciated. Thanks in advance!
The problem is your anchor elements default action is to take the user to login page which is not prevented.
You can call the event.preventDefault() to do this.
Also the confirm plugin looks like a non blocking plugin, so you need to move the redirect code to the success handler.
$('a#logout').on('click', function(e) {
e.preventDefault();
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function() {
window.location.href = "extra-login.html";
},
cancel: function() {},
}
});
});
I'm guessing the dialogue isn't blocking (I don't know of any that are in JS). You should just put your success code in the callback for the confirm button, like so:
$('a#logout').on('click', function () {
$.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
// $.alert('Confirmed!');
//I'm guessing this function is called when the button is clicked.
window.location.href="extra-login.html";
return true;
},
cancel: function () {
// $.alert('Canceled!');
return false;
},
}
});
});
But the main reason your code is redirecting immediately is the href tag in your link. You basically have a link to another page, that also tries to run some JS, but because it's a link it redirects before the JS can even run. Do this instead:
<a href="#" id="logout">
Log Out <i class="entypo-logout right"></i>
</a>
i am new,too
i hope my suggestion is right but why don't you put href in confirm function.
$('a#logout').on('click', function (event) {
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
window.location.href="extra-login.html";
},
cancel: function () {
event.preventDefault();
},
}
});
});
Why don't you use like this -
$('a#logout').on('click', function(){
if($(this).confirm({title: 'Logout Confirmation', content: 'Are you sure you want to logout?'})){
window.location.href="extra-login.html";
}else{
return false;
}
});
I have a simple bootbox / javascript confirm window at:
https://www.guard-gate.com/test2/index.html
How do I make the Success button link to google, the Danger button link to yahoo.com and the Click Me button close the box?
How do I change the position of the window to get it in the middle of the page?
You could try something like this for setting the modal in the middle:
var windowHeightCalc = $(window).height() / 2,
modalHeightCalc = $('.modal-content').height();
$('.modal').css({ 'margin-top': [windowHeightCalc - modalHeightCalc, 'px'].join('') });
You don't really need Bootbox for making the modal just use the default Bootstrap modal - http://getbootstrap.com/javascript/#modals
You can modify it and change the links as you wish. To open it simply run:
$('#myModal').modal('show');
and to hide it:
$('#myModal').modal('hide');
In Bootbox you could try using that what the documentation advise you:
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});
In the callbacks you could do everything. For JS-redirects you can do:
window.location.href = "http://whatever.com";
I have a button that opens a dialog and when I close the dialog it stops working. When I save on the dialog screen it continues to work fine.
This is the button that opens the dialog:
<button class="actionbutton" type="button" onclick="addLitigant();">Add Litigant To Case(s)</button>
The code it calls:
function addLitigant(){
console.log("Calling addLitigant()");
editDialog.extendedDialog('loadUrl','CRFilingLitigantDialog.do?action=addLitigant', 'Add Litigant');
}
The close code on the dialog screen:
param['buttons'].push(
{
id: "closeButton",
text: "(C)lose",
accessKey: "c",
click: function () {
jQuery(this).extendedDialog('close');
jQuery(this).html('');
}
}
);
The save button code:
function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
We are using jquery 1.6.2. I have tried adding console.log statements to the addLitigant() function but when I come back from the close it doesn't call anything in the console. If I refresh the page it does begin to work again until we close from the dialog.
This is the immediate function that is on the page that opens the dialog
jQuery(function(){
console.log("function");
verificationDialog = jQuery('<div id="verificationDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:800,
title: "Compare Eflex and Icis"
});
compareDialog = jQuery('<div id="comparisonDialog"></div>').clerkReviewDialogTemplate({
height:400,
width:500,
title: "Imported Person"
});
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});
jQuery('.saveOnChange').bind('change', function(){
updateLitigants();
});
jQuery('.pin').icisAutocomplete({
mustMatch: true,
source: function(request, response){
getQuickAccess(request, response);
},
change: function(event, ui){
updateLitigants();
}}).each(function(index){
var data = jQuery(this).data('staging-json');
jQuery(this).bind('keydown', function(event){
return f5_handler({
event: event,
onf5key: function(){
var popup = people_popup({elem: this, event: event, data: data, success: function(data){
if(data['pin'] != 'null'){
jQuery(event.currentTarget).val(data['pin']);
}
if(data['masterPin'] != 'null'){
jQuery('#'+jQuery(event.currentTarget).attr('masterPinField')).val(data['masterPin']);
}
compareDialog.extendedDialog('close');
updateLitigants();
}});
compareImportedLitigant(data['id'], popup);
}
});
});
});
});
Thanks,
Tom
looks like a post back issue that makes you lose you bind events - this is the only thing that could cause losing button event - try to replace your immediate function with
function pageLoad() {}
see this $(document).ready() and pageLoad() are not the same!
might help
I compared this code to an older version. I noticed that it worked in an older version and I compared the two. The older version had a change in the edit dialog code, I added the close code to it and it now works.
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
close: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy').remove();
},
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});