i want to close the popup modal confirm alert but above code is not working.
I also tried popupcsd.onbeforeunload and popupcsd.onUnload but not working
var popupcsd = window.open('www.example.com', 'CSD ', 'width=1000, height=800');
var popupcsd =window.open('www.example.com', 'CSD ', 'width=1000, height=800');
popupcsd.beforeunload = function(){
console.log('leaving page'); // Use 'Preserve Log' option in
Console
alert('alert');
return leavingPageText;
}
am working this code in Angular JS
Instead of beforeunload use onbeforeunload
popupcsd.onbeforeunload = function(){
console.log('leaving page');
alert('alert');
return leavingPageText;
}
I tried and its working on my end
Callback name that you have used is wrong. It should be changed as below.
popupcsd.onbeforeunload instead of popupcsd.beforeunload
Related
Im using ContentTools and everything works as expected when using the standard Ignition. However when I instead of using the Blue button add my own to Start editing/Save and Discard changes the Editor is unable to reactivate. This means that the user can Edit, then Save once. All subsequent attempts at reactivation fail silently.
Init code:
window.addEventListener('load', function() {
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'id');
ContentTools.IMAGE_UPLOADER = imageUploader;
$('#btnStartEdit').click(function() {
editor.start();
$(this).hide();
$('#btnSaveChanges').fadeIn();
$('#btnDiscardChanges').fadeIn();
});
$('#btnSaveChanges').click(function() {
editor.save();
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
$('#btnDiscardChanges').click(function() {
editor.revert();
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
ContentTools.EditorApp.get()._ignition.unmount();
});
Instead of using the save() and revert() methods directly I recommend you use stop(true) for save and stop(false) for cancel/revert.
The save and revert methods don't stop the editor (for example save(true) can be used to auto-save content while the user continues to edit). Using stop should allow you to restart the editor, e.g:
window.addEventListener('load', function() {
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'id');
ContentTools.IMAGE_UPLOADER = imageUploader;
$('#btnStartEdit').click(function() {
editor.start();
$(this).hide();
$('#btnSaveChanges').fadeIn();
$('#btnDiscardChanges').fadeIn();
});
$('#btnSaveChanges').click(function() {
editor.stop(true);
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
$('#btnDiscardChanges').click(function() {
editor.stop(false);
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
ContentTools.EditorApp.get()._ignition.unmount();
});
The following .click()-method is fired in Chrome without problems.
In Internet Explorer it is only fired if I refresh the page (F5). If I access the page by entering the url (or redirected by a buttonclick from an other page) the .click-method is NOT fired.
But if I put an alert("?") before the .click() it works in IE too!
Why does it not work correctly in IE? I can't let the alert() be there...
$(window).load(function() {
//Fake click on the last used Tab
alert("?");
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
});
=> The available (clickable) tabs are created in
jQuery(document).ready(function($) {
...
});
EDIT From comments:
They are created inside the .read(function($) in this way:
$("#HillbillyTabs").append('<li>' + title + '</li>').after('<div id="Tab' + upperIndex + '"></div>');
After Container is created after the script:
<div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>
Do not try to inject the function call, but rather add an event listener to the code. For example: (I made up some variables as your code did not indicate some things here)
var upperIndex = $('#tabsContainer').find('ul').length;
var title = "mytitle";
var newHeadId = 'TabHead' + upperIndex;
var newTabId = 'Tab' + upperIndex;
$("#HillbillyTabs").append('<li>' + title + '</li>').after('<div id="' + newTabId + '"></div>');
$("#HillbillyTabs").on('click', '#' + newHeadId, function() {
console.log(this.id);
SetCookie(this.id);
});
It seems IE does not recognize :
$(window).load()
You could try :
window.onload = function() {
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
};
Got the solution.
Curiously the fadeIn in the .load doesn't work for IE too (like the .click)
$(window).load(function() {
//Fake click on the last used Tab
alert("?");
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
// When the page has loaded in Chrome
$("#DeltaPlaceHolderMain").fadeIn(0);
});
For fading in I had to put the method immediately after the creation-method for the tabs (inside the .ready()) instead of the end of .ready().
There is now also the .click and it works now for IE.
jQuery(document).ready(function($) {
setTimeout(function() {
...
//Creation of tabs
$("#tabsContainer").tabs();
//Fake click on the last used Tab
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
// When the page has loaded in IE
$("#contentBox").fadeIn(0);
}, 0);
//.click NOT here
});
Thanks for your fast responses and tips!
Kind regards
I am new to casper js. I am not able to click a button on an overlay page. Can you tell me how to work with overlay page using casper js?
Well, these events should help you :
casper.on('popup.created', function() {
this.echo("url popup created : " + this.getCurrentUrl(),"INFO");
});
casper.on('popup.loaded', function() {
this.echo("url popup loaded : " + this.getCurrentUrl(),"INFO");
});
And here an exemple :
casper.then(function(){
this.clickLabel("Activate your account");
// */mail/* = RegExp for the url
this.waitForPopup(/mail/, function(){
this.test.pass("popup opened");
});
this.withPopup(/mail/, function(){
this.viewport(1400,800);
this.test.pass("With Popup");
//following, a 'wait instruction' because I have a redirection in my popup
this.waitForSelector(".boxValid", function(){
this.test.assertSelectorHasText(".boxValid", "Inscription confirmed");
});
});
});
To know how it works, look at the doc.
I call content for modal dialog from ajax
$.ajax({
url: "/Clerk/PauseServiceDialog",
success: function (data) {
$("body").append(data);
$("#pauseServiceDialog").modal({ keyboard: false });
}
});
When I close modal I use this code
$(document).on('hidden.bs.modal', ".modal", function (e) {
this.remove();
});
In firebug I see html code is deleted. But if I again call dialog and use some event I get 2 event. How I understand modal dialog do not correct deleted from DOM.
I found answer how fix duplicate event.
$(document).on('hidden.bs.modal', ".modal", function (e) {
var name = "#" + $(this).find("button.btn-primary").attr("id");
$("body").off("click", name);
$(this).remove();
});
You can hide modal by code
$("#pauseServiceDialog").data('bs.modal').hide()
P.S. sorry, i didn't understand notation $(document).on('hidden.bs.modal' in general - you should delete modal element AND object which handle its events ( it stored at $("#pauseServiceDialog").data('bs.modal') )
In our application we use a general function to create jQuery dialogs which contain module-specific content. The custom dialog consists of 3 buttons (Cancel, Save, Apply). Apply does the same as Save but also closes the dialog.
Many modules are still using a custom post instead of an ajax-post. For this reason I'm looking to overwrite/redefine the buttons which are on a specific dialog.
So far I've got the buttons, but I'm unable to do something with them. Is it possible to get the buttons from a dialog (yes, I know) but apply a different function to them?
My code so far:
function OverrideDialogButtonCallbacks(sDialogInstance) {
oButtons = $( '#dialog' ).dialog( 'option', 'buttons' );
console.log(oButtons); // logs the buttons correctly
if(sDialogInstance == 'TestInstance') {
oButtons.Save = function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
}
}
}
$('#dialog').dialog({
'buttons' : {
'Save' : {
id:"btn-save", // provide the id, if you want to apply a callback based on id selector
click: function() {
//
},
},
}
});
Did you try this? to override button's callback based on the need.
No need to re-assign at all. Try this.
function OverrideDialogButtonCallbacks(dialogSelector) {
var button = $(dialogSelector + " ~ .ui-dialog-buttonpane")
.find("button:contains('Save')");
button.unbind("click").on("click", function() {
alert("save overriden!");
});
}
Call it like OverrideDialogButtonCallbacks("#dialog");
Working fiddle: http://jsfiddle.net/codovations/yzfVT/
You can get the buttons using $(..).dialog('option', 'buttons'). This returns an array of objects that you can then rewire by searching through them and adjusting the click event:
// Rewire the callback for the first button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons[0].click = function() { alert('Click rewired!'); };
See this fiddle for an example: http://jsfiddle.net/z4TTH/2/
If necessary, you can check the text of the button using button[i].text.
UPDATE:
The buttons option can be one of two forms, one is an array as described above, the other is an object where each property is the name of the button. To rewire the click event in this instance it's necessary to update the buttons option in the dialog:
// Rewire the callback for the OK button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons.Ok = function() { alert('Click rewired!'); };
$('#dialog').dialog('option', 'buttons', buttons);
See this fiddle: http://jsfiddle.net/z4TTH/3/
Can you try binding your new function code with Click event of Save?
if(sDialogInstance == 'TestInstance') {
$('#'+savebtn_id).click(function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
});
}