As said in the title I would like to prevent removing a jquery ui tab or at least asking a confirmation before.
I tried
$( "#tabs" ).bind( "tabsremove", function(event, ui) {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
return true;
} else {
return false;
};
});
or
$( "#tabs" ).bind( "tabsremove", function(event, ui) {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
return true;
} else {
return false;
};
});
But the question is asked after, and not before as I want.
Is this possible ?
Is this what you mean?
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
} else {
return false;
};
This is from jQuery-ui-tabs
Related
Trying to open random pages through casperJS start method but some pages are loading properly and some of them are not, so in this scenario it is not exiting from casperjs.
It is getting stuck in console then need to manually exit from console using CTR+C.
casper.start("some url", function() {
if(this.status().currentHTTPStatus == 200) {
casper.echo("page is loading");
} else {
casper.echo("page is in error ");
this.exit();
}
});
Wrap it by a then step with a global stepTimeout option.
Sample code:
var casper = require('casper').create({
stepTimeout: 10000 //10s
})
casper.start()
casper.then(funtion(){
casper.open(url)
})
casper.run()
Try bypass() to ignore the next thens.
casper.start("some url", function() {
if(this.status().currentHTTPStatus == 200) {
casper.echo("page is loading");
} else {
casper.echo("page is in error ");
this.bypass(2); // Will not execute the then functions.
}
}).then(function() {
// The 1st then function.
}).then(function() {
// The 2nd then function.
})
casper.run(function() {
this.echo('Something');
this.exit(); // <--- Here.
});
I want to remove selected file of kendo upload control on click event of another button and I followed the below link
Triggering OnCancel event of kendo upload on click of button the remove event fired but not clear the file below is my code. please can any one help me what i am doing wrong.
$(document).ready(function () {
$("#files").kendoUpload({
"multiple": false,
select: function (event) {
console.log(event);
var notAllowed = false;
$.each(event.files, function (index, value) {
if ((value.extension).toLowerCase() !== '.jpg') {
alert("not allowed! only jpg files!");
notAllowed = true;
}
else if (value.size > 3000000) {
alert("file size must less than 3MB ");
notAllowed = true;
}
if (event.files.length > 1) {
alert("Please select single file.");
e.preventDefault();
}
});
var breakPoint = 0;
if (notAllowed == true) event.preventDefault();
var fileReader = new FileReader();
fileReader.onload = function (event) {
var mapImage = event.target.result;
$("#sigimage").attr('src', mapImage);
document.getElementById("sigimage").style.display = 'block';
}
fileReader.readAsDataURL(event.files[0].rawFile);
},
remove: function (e) {
alert("remove");
e.preventDefault();
},
});
$("#closewindow").click(function (e) {
$("#files").data("kendoUpload").trigger("remove");
});
});
You can use the following code for removing the file inside your click function.
$(".k-delete").parent().click();
Please visit the fiddle here for a working example
You can create your custom function like this:
function remove(){
$(".k-upload-files").remove();
$(".k-upload-status").remove();
$(".k-upload.k-header").addClass("k-upload-empty");
$(".k-upload-button").removeClass("k-state-focused");
};
It will delete trigger delete of uploaded files.
I have the popup working but sometimes a user clicks the back button on their browser to close the popup.
How can I make the browser back button close a 'magnific-popup' that is already open?
Thanks
After some digging found history.js and then the following
var magnificPopup = null;
jQuery(document).ready(function ($) {
var $img = $(".img-link");
if ($img.length) {
$img.magnificPopup({
type: 'image',
preloader: true,
closeOnContentClick: true,
enableEscapeKey: false,
showCloseBtn: true,
removalDelay: 100,
mainClass: 'mfp-fade',
tClose: '',
callbacks: {
open: function () {
History.Adapter.bind(window, 'statechange', closePopup);
History.pushState({ url: document.location.href }, document.title, "?large");
$(window).on('resize', closePopup);
magnificPopup = this;
},
close: function () {
$(window).unbind('statechange', closePopup)
.off('resize', closePopup);
var State = History.getState();
History.replaceState(null, document.title, State.data["url"]);
magnificPopup = null;
}
}
});
}
});
function closePopup () {
if (magnificPopup != null)
magnificPopup.close();
}
I'm using this solution:
callbacks: {
open: function() {
location.href = location.href.split('#')[0] + "#gal";
}
,close: function() {
if (location.hash) history.go(-1);
}
}
And this code:
$(window).on('hashchange',function() {
if(location.href.indexOf("#gal")<0) {
$.magnificPopup.close();
}
});
So, on gallery open I add #gal hash. When user closes I virtually click back button to remove it. If user clicks back button - everything works fine olso.
This solution does not break back button behavior and does no require any additional plugins.
Comments are welcome.
Just to add to your answer, these are the meaningful lines that I got to work for me.
callbacks:
open: ->
History.pushState({ url: document.location.href }, null, "?dialogOpen")
History.Adapter.bind(window, 'statechange', attemptToCloseDialog)
close: ->
$(window).unbind('statechange', attemptToCloseDialog)
History.replaceState(null, null, History.getState().data['url'])
With attempt being:
attemptToCloseDialog = ->
$.magnificPopup.close() if $.magnificPopup.instance
I should run multiple ajax requests in one button click, but all requests should wait until the first one is executed. I have tried to put all requests in the success callback of the first one but this gives this error:
TypeError: o is undefined
return o.id;
And just the first request is executed.
This is my code:
if(form1.isValid()) {
form1.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
console.log('form1 success');
//Submit Form2
if(form2.isValid()) {
form2.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
console.log('form2 success');
}));
//Submit Form3
....
_genFormSubmitAction:
_genFormSubmitAction: function(db,action, successCallback) {
var me = this;
return {
clientValidation : true,
url : me.getApplication().apiUrl,
waitMsg : '<p align=right>..الرجاء الإنتظار</p>',
async:false,
params : {
_module: 'administrationcassocial',
_action: action,
_db:db
},
success : function(form, action) {
if(action.result.success == true) {
Ext.callback(successCallback, me);
form.owner.destroy();
} else {
console.log('url=',url);
Ext.Msg.alert(action.result.error, action.result.errormessages.join("\n"));
}
},
failure : function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert(action.result.error, action.result.errormessages.join("\n"));
}
}
};
}
This is a scope issue.
The callback of form1.submit happens in the callback own scope, so it has no idea what form2 is.
You can try:
if(form1.isValid()) {
var me = this;
form1.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
console.log('form1 success');
//Submit Form2
if( me.form2.isValid() ) {
form2.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
console.log('form2 success');
}));
}
}));
}
Or the more proper solution in my view:
// Added aScope var
_genFormSubmitAction: function( db,action, aScope, successCallback ) {
var me = this;
return {
// ...
scope: aScope
}
}
Then you call:
form1.submit(me._genFormSubmitAction('my_DB','my_Action', this, function() {
}));
I'm creating a dialogbox from ExtLib and I want to prevent users to press Escape or click on X icon.
I've checked several posts about same implementation but none of them using a Dialogbox from ExtLib.
I was able to hide icon with CSS and I'm trying with dojo.connect to prevent the use of Escape key:
XSP.addOnLoad(function(){
dojo.connect(dojo.byId("#{id:dlgMsg}"), "onkeypress", function (evt) {
if(evt.keyCode == dojo.keys.ESCAPE) {
dojo.stopEvent(evt);
}
});
});
Note I'm able to get it working only if I create my dialogbox manually and not from ExtLib; then I can use for example:
dojo.connect(dojo.byId("divDlgLock"), "onkeypress", function (evt) {
if(evt.keyCode == dojo.keys.ESCAPE) {
dojo.stopEvent(evt);
}
});
Any ideas?
By adding an output script block you can extend the existing declaration:
<xp:scriptBlock id="scriptBlockNonCloseableDialog">
<xp:this.value>
<![CDATA[
dojo.provide("extlib.dijit.OneUIDialogNonCloseableDialog");
dojo.require("extlib.dijit.Dialog");
dojo.declare(
"extlib.dijit.OneUIDialogNonCloseableDialog",
extlib.dijit.Dialog,
{
baseClass: "",
templateString: dojo.cache("extlib.dijit", "templates/OneUIDialog.html"),
disableCloseButton: true,
_onKey: function(evt){
if(this.disableCloseButton &&
evt.charOrCode == dojo.keys.ESCAPE) return;
this.inherited(arguments);
},
_updateCloseButtonState: function(){
dojo.style(this.closeButtonNode,
"display",this.disableCloseButton ? "none" : "block");
},
postCreate: function(){
this.inherited(arguments);
this._updateCloseButtonState();
dojo.query('form', dojo.body())[0].appendChild(this.domNode);
},
_setup: function() {
this.inherited(arguments);
if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
dojo.query('form', dojo.body())[0].appendChild(this.domNode);
}
}
);
// This is used by the picker dialog to grab the correct UI
XSP._dialog_type="extlib.dijit.OneUIDialogNonCloseableDialog";
]]>
</xp:this.value>
</xp:scriptBlock>