I have this jquery function that opens up a modal anytime a button is pressed of type 'btnClr'
$(document).ready(function () {
$('#[id*=btnClr]').onload(function () {
$dialog.dialog('open');
});
var $dialog = $("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I'm trying to move it into a function so that it's opened anytime the function is called instead of any time the button is clicked.
I was able to achieve this with this code
function modalOpen() {
var $dialog = $("#trUI")
.dialog({
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function(e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function(e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
}
However, any one of the buttons will only work once.
Does anybody have any recommendations for how to do this?
I believe your issue is that you also are not "opening" the dialog. Move $dialog.dialog('open'); into the new function you wrote, so whenever it is called it will open it.
I was able to get it working. It was a TINY change in code. All I had to change was the call to dialog("open")
// some function{
$("#trUI").dialog('open'); //instead of $dialog.dialog("open")
}
$(document).ready(function () {
$("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
Related
I have a jquery UI modal which opens on checkbox click and cause postback after clicking ok button but its not working .I have tried all solutions.please help.Asp.net button is inside form tag.
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Other-Legend",
width: 300,
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: {
Ok: function () {
$("[id*=btnConfirm]").click();
},
Close: function () {
$(this).dialog('close');
}
}
});
jQuery('input[type="checkbox"]').click(function () {
var parentClass = jQuery(this).parent('td').attr('class');
var checked = jQuery(this);
jQuery('.' + parentClass.substring(0, parentClass.length - 8) + ' input[type="checkbox"]').each(function (i, e) {
jQuery(this).prop('checked', false);
})
jQuery(checked).prop('checked', true);
if (parentClass.indexOf("mdclass") >= 0) {
$('#dialog').dialog('open'); }
});
<asp:Button ID="btnConfirm" runat="server" Text="Button" style="display:none" OnClick ="Button1_Click" />
You can try adding the jQuery UI v1.10 or greater syntax of appending the modal DIV to the form.
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Other-Legend",
width: 300,
appendTo: "form",
buttons: {
Ok: function () {
$("[id*=btnConfirm]").click();
},
Close: function () {
$(this).dialog('close');
}
}
});
When I add the card to the in box. Then it is possible to double click on the card, and dialog pop up. In the dialog I have Tow buttons (Save) and (Cancel). When I press Cancel buttons a confirm window pop-ups.
I want when I press the close in the right corner, that confirm window pop-ups. I tried by this part of code to fix it, but not succeeded:
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
The issue is when I'm doing it in that way, the dialog window first close, then the confirm window pop-up. I don't want that, but I want the opposite.
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center',
buttons: {
Save: function () { //submit
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val());
$('#modalDialog').dialog("close");
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
},
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
});
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
});
Maybe I'm wrong, in that way I'm doing. Any idea how to fix it?
Live Demo
You may try use the beforeClose for the confirm window, and if confirmed then close the dialog.
I'm working on a prototype mobile app and having difficulty returning back to the splash screen once the user button presses the Yes button on a modal (on the login page).
This is my code so far:
$("#login_cancel").click(function () {
$(function () {
$("#login_canceldialog").dialog({
resizable: false,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
close_login()
},
"No": function () {
$(this).dialog("close");
}
}
});
});
});
jsFiddle here: http://jsfiddle.net/QaCCH/1/.
try this to avoid reloading as your own answer has nothing to do with giving the #splash a top to down slide
$(document).ready(function () {
$("#splash_logo").hide().fadeIn(1500);
animateSignup()
function animateSignup() { //new function to animate signUp_btn
$("#signup_btn").animate({
"padding-top": "+=100px"
}, "slow");
}
$("#signup_btn").click(function () {
close_splash();
$("#signup").show();
});
$("#login_btn").click(function () {
close_splash();
$("#login").show();
});
function close_splash() {
$("#splash").animate({
"margin-top": "-=568px"
}, "slow").hide(1)
//assign initial padding value to signup_btn to again animate when splash reappear
$('#signup_btn').css('padding-top', '100px');
}
function close_login() {
$('#splash').css("margin-top", "0px"); //in case slide from top to down not required
$('#login').fadeOut("fast", function () {
$('#splash').fadeIn('fast',function(){
animateSignup();
})
})
}
$("#login").hide();
$("#login_canceldialog").hide();
$("#login_btn").click(function () {
close_splash();
$("#login").show();
});
$("#login_cancel").click(function () {
$(function () {
$("#login_canceldialog").dialog({
resizable: false,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
close_login();
},
"No": function () {
$(this).dialog("close");
}
}
});
});
});
$("#signup").hide();
});
DEMO
Used - location.reload();
so code became:
function close_login() {
$("#login").animate({
"margin-top": "-=568px"
}, "slow").hide(1);
location.reload();
}
I have got a jquery dialog with autoOpen set to false:
$(document).ready(function() {
$('#test').text("hello!").dialog({
autoOpen: false,
resizable: false,
modal: true,
});
});
I trigger the dialog like this:
$('x').click(function() {$('#test').dialog('open');});
I want to add buttons with some functionality on open, something like this:
$('x').click(function() {$('#test').dialog('open', 'option', 'buttons', {
'Ok': function() {
myFunction();
$(this).dialog('close');
}
});
});
But no luck so far, any help?
Change the third part like :
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: { "Ok": function() { $(this).dialog("close"); } }
Ok i got this code:
$(document).ready(
function() {
$(".dialogDiv").dialog({
autoOpen: false,
modal: true,
position: [50, 50],
buttons: {
"Print page": function() {
alert("Print");
},
"Cancel": function() {
$(this).dialog("close");
}
}
}
);
$('.ui-dialog-buttonpane button:contains("Print page")').attr("id", "dialog_print-button");
$(".dialogDiv").parent().appendTo($('form'));
}
How do I assign or set a new function to the click event?
$("#dialog_print-button"). ???
Edit, This works:
$("#dialog_print-button").unbind("click").click(
function () {
alert("new function that overide the old ones")
}
)
Tried to find how to do in the jQuery documentation but I think it's hard to find around in the documentation. Especially when new to javaScript and the jQuery libary.
Edit, A fast way to get help is to go to jQuery irc channel :D
I think this would help:
$(".dialogDiv").dialog("option", "buttons", {
"Print page": function() { /* new action */ },
"Cancel": function() { $(this).dialog("close"); }
});
Because buttons property sets all the buttons, you have to include cancel button handler.
$("#Print page").click(function () {
...
});
Or maybe it should be
$("#dialog_print-button").click(function () {
...
});
jQuery UI dialog buttons now supports the "id" attribute natively.
$("#dialog-form").dialog({
autoOpen: false,
height: "auto",
width: 300,
buttons:
[
{
text: "Create Revision",
id: "btnCreateRev",
click: function () {
//code for creating a revision
}
},
{
text: "Cancel",
id: "btnCancel",
click: function () { $(this).dialog("close"); },
}
]
});
You put the code within the button section:
...
buttons: {
"Print page": function() {
//here you execute the code or call external functions as needed
}
Once you click the button on the Dialog, that code is automatically invoked.
Therefore you insert there directly the code that implements your logic.