I'm trying to submit a dialog form when the user presses enter. I had the form setup as below:
$("#band-dialog-form").dialog({
buttons : {
"Save" : function(){
$(this).dialog("close");
$("#editBandForm").submit();
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
}
});
When I added the key listener I changed to:
"Save" : function submitBand(){
$(this).dialog("close");
$("#editBandForm").submit();
},
But my key listener can't find the function submitBand. If I try and pull the function out of the dialog and make it:
"Save" : submitBand(),
The submitBand function is called on initialization and the page is sent without the user doing anything. What is the propper way to used named functions in the buttons object?
You are assigning the result of executing submitBand to the "Save" key, as the parentheses following submitBand (or "function call" construct) means "execute this function object and return the result". Try passing the function object without the function invocation construct:
"Save" : submitBand,
You should do:
var submitBand = function(){
$("#band-dialog-form").dialog("close");
$("#editBandForm").submit();
};
and thenn pass a reference to the function to the button:
$("#band-dialog-form").dialog({
buttons : {
"Save" :submitBand ,
"Cancel" : function() {
$(this).dialog("close");
}
},
close : function() {
}
});
Related
I have 2 functions: myFunc1 and myFunc2. When myFunc1 is called, a jQuery confirmation Dialog appears. When the user clicks yes, myFunc2 is called, which should show another dialog.
But, despite successfully calling myFunc2, the second dialog never appears.
Here is a fiddle.
function myFunc1() {
dialog().then(function(data) {
if (data == "yes") {
console.log("clicked yes: show another dialog")
myFunc2();
} else {
console.log("clicked no")
}
});
}
function myFunc2() {
dialog();
console.log("myFunc2 is called")
}
function dialog(title) {
var def = $.Deferred();
$("#dialog").dialog({
modal: true,
buttons: {
"Yes": function() {
def.resolve("yes");
$(this).dialog("close");
},
"No": function() {
def.resolve("no");
$(this).dialog("close");
}
}
});
return def.promise();
}
$("button").on("click", myFunc1);
You are resolving the Deffered-Object before you are actually closing the first dialog. So when the then()-callback is hit, the dialog is still open, therefore no new one is created.
Just swap the functions and it should be working.
"Yes": function() {
$(this).dialog("close");
def.resolve("yes");
},
Example
When the Deferred is resolved, any doneCallbacks added by deferred.then() or deferred.done() are called. Callbacks are executed in the order they were added
.resolve()
You're using the same div to create all your dialogs, if you need to have more than one dialog open at once that will be an issue.
// Get a random unique number to use as the dialog id
var guid = Math.floor(Math.random() * 9999999999999) + 1;
// Clone the dialog div and give it a new name
$("#dialog").clone()[0].id = guid;
// Create the dialog with the new unique div
$("#"+guid).dialog({...});
Also,
// Make sure you remove the div after you close it
$(this).dialog("close").remove();
I want to stop an event show a modal dialog and if the user presses yes persue this event. event.run() brings an error in firefox.
jQuery(element).click(function(event) {
event.preventDefault();
dialog.dialog({
buttons: {
'Ja': function() {
event.run();
},
'Nein': function() {
jQuery(this).dialog('close');
}
}
}).dialog('open');
});
Thanks to a friend and hashbrown I managed to solve this problem. An event cannot be paused and persued. If it is paused it will block the whole DOM. Try:
jQuery(link).click(function(){while(true)});
When using jQuery its possible to set additional event parameters what I did:
jQuery(element).click(function(event, show_dialog) {
var that = jQuery(this);
if(!show_dialog) {
dialog.dialog({
buttons: {
'Yes': function() {
that.trigger(event.type, [true]);
},
'No': function() {
jQuery(this).dialog('close');
}
}
}).dialog('open');
return false;
} else {
dialog.dialog('close');
return true;
}
});
First click show_dialog is undefined and modal dialog is shown. Clicking on Yes in modal dialog triggers the event.type (click) with the additional parameter true for show_dialog. http://api.jquery.com/trigger/#trigger-eventType-extraParameters
It was not possible to that.trigger(event, [true]);. I think cause events default action was prevented before.
That is because immediately after creating the popup the function returns and the event expires.
What you'll have to do is .trigger() a new event.
Note: set some sort of global variable to ignore this second event firing in your anonymous function (infinite loop problem).
Can I ask why you want to do this; what would click go off and do if you let it?
If it just fires off a different function, why not just call that function instead of attempting event.run()?
I have a anchor tag in my page for logout.
<a href="/logout/" id="lnk-log-out" />
Here I am showing a Popup for confirmation with jQuery UI dialog.
If user click Yes from dialog it has to execute the link button's default action, I mean href="/logout".
If No clicked a Popup box should be disappeared.
jQuery Code
$('#lnk-log-out').click(function (event) {
event.preventDefault();
var logOffDialog = $('#user-info-msg-dialog');
logOffDialog.html("Are you sure, do you want to Logout?");
logOffDialog.dialog({
title: "Confirm Logout",
height: 150,
width: 500,
bgiframe: true,
modal: true,
buttons: {
'Yes': function () {
$(this).dialog('close');
return true;
},
'No': function () {
$(this).dialog('close');
return false;
}
}
});
});
});
The problem is I am not able to fire anchor's href when User click YES.
How can we do this?
Edit: Right now I managed in this way
'Yes': function () {
$(this).dialog('close');
window.location.href = $('#lnk-log-out').attr("href");
}
In the anonymous function called when 'Yes' is fired, you want to do the following instead of just returning true:
Grab the href (you can get this easily using $('selector').attr('href');)
Perform your window.location.href to the url you grabbed in point 1
If you want the a tag to just do it's stuff, remove any preventDefault() or stopPropagation(). Here I have provided two different ways :)
Don't use document.location, use window.location.href instead. You can see why here.
Your code in the 'Yes' call should look something like, with your code inserted of course:
'Yes': function () {
// Get url
var href = $('#lnk-log-out').attr('href');
// Go to url
window.location.href = href;
return true; // Not needed
}, ...
Note: Thanks to Anthony in the comments below: use window.location.href = ... instead of window.location.href(), because it's not a function!
I have used this in many of my projects so i suggest window.location.href
'Yes': function () {
$(this).dialog('close');
window.location.href="your url"
return true;
},
I have added a custom edit button control on the jqGrid navigator as follows:
jQuery("#grid").navButtonAdd('#pager',
{
caption:"Edit",
buttonicon:"ui-icon-pencil",
onClickButton: editSelectedRow,
position: "last",
title:"click to edit selected row",
cursor: "pointer",
id: "edit-row"
}
);
So that rather than use the default function: editGridRow, it uses my custom function editSelectedRow. However, I also want to add the doubleClick function to so that it calls editSelectedRow on doubleClick.
using the default editGridRow function works as such
ondblClickRow: function()
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
jQuery(this).jqGrid('editGridRow', rowid);
}
However, when I replace the default editGridRow function with my default function editSelectedRow as such,
ondblClickRow: function()
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
jQuery(this).jqGrid('editSelectedRow', rowid);
}
I get the following error within firebug:
uncaught exception: jqGrid - No such method: editSelectedRow
The function editSelectedRow however does exist and works with clicking the custom edit button. Please help, thanks.
UPDATE:
#Oleg: As requested here's the code defining method: editSelectedRow
function editSelectedRow(rowid)
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
if( rowid != null )
{
var dialogId = '#edit-form-dialog';
var dialogTitle = 'Edit Customer';
$(dialogId).load('/customer/edit/id/' + rowid, function ()
{
$(this).dialog(
{
modal: false,
resizable: true,
minWidth: 650,
minHeight: 300,
height: $(window).height() * 0.95,
title: dialogTitle,
buttons:
{
"Save": function ()
{
var form = $('form', this);
$(form).submit();
$("#grid").trigger("reloadGrid");
},
"Cancel": function ()
{
$("#grid").trigger("reloadGrid");
$(this).dialog('close');
}
}
});
LaunchEditForm(this);
});
}
else
{
jQuery( "#dialogSelectRow" ).dialog();
}
return false;
}
#Oleg: Thanks, you advised against using a custom method editSelectedRow in place of method editGridRow. The reason I am using this is that my forms are Zend Forms and I need all the bells and whistles of Zend Form to be available. The server generates this form and it's loaded into a dialog form. If there's a way to still achieve this without resorting to my editSelectedRow custom method, I'd be glad to learn it. Thanks.
You question is pure JavaScript question.
If you define the function editSelectedRow as
function editSelectedRow(rowid)
{
...
}
you can call it as editSelectedRow(rowid) and not as jQuery(this).jqGrid('editSelectedRow', rowid);.
Another problem is that you use this inside of he body of editSelectedRow function. It's not correct. You can define editSelectedRow function in a little another way
var editSelectedRow = function (rowid) {
...
};
In the case editSelectedRow will be able to bind this to any value. To do this you need use another form of invocation of the function. Inside of ondblClickRow it will be
ondblClickRow: function () {
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
editSelectedRow.call(this, rowid);
}
In the above example the first parameter of call is the value used as this inside of the function. We forward just the current this value forward to editSelectedRow. If we would use the form editSelectedRow(rowid); for the invocation of the function the value of this inside of function will be initialized to window object.
The usage of editSelectedRow inside of navButtonAdd can stay unchanged.
I'm trying to impliment a confirmation box, but I need to edit the text with html. So I found the jquery "confirm override" here:
http://www.ericmmartin.com/projects/simplemodal-demos/
He mentions here about styling the string with html:
http://www.ericmmartin.com/projects/simplemodal/
But I don't inderstand where in my function I am supposed to do that? Here is the function:
$(document).ready(function () {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId:'confirm-overlay',
containerId:'confirm-container',
onShow: function (dialog) {
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
Thank you for any help!
Basically instead of confirm("Continue to the SimpleModal Project page?", function () I need to have an unordered list in ther (terms of service)
Have you tried passing HTML as the first argument?
Your code should work fine like this
confirm('<ul><li>somedata</li><li>moredata</li></ul>', function(){});
because your confirm function appends the message variable.