I have a site in which there are alot of confirm pages and need for a dialog window. Im am wondering if there is a better way to write my code so that i dont have to spell out all of the dialog parameters every single time. Each dialog may have 1 thing different. usually the complete button is different function.
for example:
$('#dialogA').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR A(possible print results of something)
}
}
});
and another
$('#dialogB').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR B (possibly some ajax call)
}
}
});
so the only thing that changes is what the Complete button does. in laymen's terms i guess is I want to set a variable the contains all the dialog parameters....
Extend jQuery:
(function ($) {
$.fn.extend({
confirmDialog: function (options) {
var defaults = {
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
};
var options = $.extend(defaults, options);
$(this).dialog(options);
}
}
})(jQuery);
and call it like this:
$('#dialogB').dialog({Complete: function() { … }; });
You can also override the defaults when call the dialog...
Related
I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.
The links are dynamic from a webgrid which is where the #item.GrouperIDForLookip comes from.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).
Does anyone happen to know what would cause this to happen? If you need more code just let me know.
Please update the URL in the load function in the below code.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load(
'#URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
I want to call the default action of dialogue box button, so please tell me how to pass the variable in side the dialogue box initialization. Here is my try for that :
Calling the dialogue box with default function of 'Yes' button
$( "#confirmComplete" ).dialog( "option", "buttons:Yes");
$( "#confirmComplete" ).dialog({
autoOpen: false,
resizable: false,
modal: true,
async:false,
position: 'top',
buttons: {
"Yes": function() {
//SOME FUNCTIOANLITY
}
}
})
Put the code in a named function, call the function:
function doYes() {
// some functionality
}
$("#confirmComplete").dialog({
autoOpen: false,
resizable: false,
modal: true,
async: false,
position: "top",
buttons: {
"Yes": doYes
},
});
doYes(); // Call the default button action
You could do:
buttons: {
"Yes": function() {
$(this).dialog("close");
return true;
}
}
You could also have a No button that closes dialog and return false;
Based on the true/false returned, you can take further actions.
I want to disable some buttons (with some additional conditions) on jquery dialog show and I am unable to do this. I tried many different ways and none of them worked. I am out of ideas.
Example code attached (in coffeescript):
$('#messages').dialog({
height: 500,
width: 800,
resizable: false,
modal: true,
show: 'fade',
hide: 'clip',
buttons: [
{
id: "msg-close",
text: "Close",
click: ->
$('#msg-close').prop('disabled', true) //this one works
}
],
open: ->
$('#msg-close').prop('disabled', true) //this one doesnt work
});
$('#msg-close').prop('disabled', true) //this one doesnt work
open expects a function like this
open: function () {
$('#msg-close').prop('disabled', true);
}
yesterday I started working on a Jquery Dialog box to replace the default confirm box that jquery has... I came across an issue and all the tutorials I see tell me to use .submit() on my form but that does not seem to want to play nicely (or play at all for that matter)
This is the JSFIDDLE
And now this is my javascript that is not working for me :
<script>
$(document).ready(function() {
$(function() {
var currentForm;
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
currentForm.submit();
}
}
});
});
$("#signinform").submit(function() {
currentForm = this;
$('#dialog-confirm').dialog('open');
return false;
});
});
</script>
The problem is happening at the "Enter Queue" button. Pretty much the scenario (as it is shown on the jsfiddle) is I need users to acknowledge the rules of the office, and if they do so they click on a check-box, once they do so then they click Submit, which then sends a dialog explaining to the user what they are getting into. However for some reason the "Enter Queue" button does nothing. I am quite confused. Any help would be great.
Thanks
It's because your re-using the $(document).on('submit', "#signinform", function(e) method
which got e.preventDefault(); for first instruction when you call $('#signinform').submit();.
You need to set a temporary variable to see wether you come from your code or the submit button.
Here is a JSFiddle with a working test, but you should do something nicer =)
EDIT : Javascript is an asynchronous langage, it means that your $('#dialog-confirm').dialog('open'); doesn't block and just modify the html, so the submit event always will return false -> it will never be sent.
So I get that JSFiddle which not really works like you want but if you trigger the submit button a second time after clicked the Enter Queue button it will work, so i'm wondering why the submit() method don't work when called from here.
A method you could use is to send the form with ajax (look at post() in jquery) and then redirect your user with something like window.location = "yourpage".
Try this way (jsFiddle):
$(document).ready(function() {
window.enterQueue=false;
$("#signinform input:submit").on('click',function() {
return getDialog(window.enterQueue);
});
function getDialog(enterQueue){
if(!enterQueue){
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: true,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
window.enterQueue=true;
$(this).dialog("close");
$("#signinform input:submit").trigger('click');
}
}
});
return false;
} else
return true;
}
});
I figured it out last night with the help of jquery website and a lot of google-ing. Thanks to the both of you for your help and time it took for the answers. + 1
This is my solution :
<script type="text/javascript">
$(document).ready(function()
{
var Form = $("#signinform");
$(function()
{
$("#dialog-confirm").dialog(
{
resizable: false,
autoOpen: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
'Cancel': function()
{
$(this).dialog("close");
Form.data("confirmProgress", false);
},
'Submit Information': function()
{
Form.submit();
Form.data("confirmProgress", false);
}
}
});
});
Form.submit(function()
{
if (!$(this).data("confirmProgress"))
{
$(this).data("confirmProgress", true);
$('#dialog-confirm').dialog('open');
return false;
} else {
return true;
}
});
});
// Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
$(document).on('click', "#Cancel", function(e)
{
e.preventDefault();
var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
$("#dialog-noconfirm").dialog(
{
resizable: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
"Cancel": function()
{
$(this).dialog("close");
},
"Go Back": function()
{
window.location.href = href;
},
}
});
});
</script>
This is my document.ready code:
$(document).ready(function() {
$("#dialogbox").dialog({
open: function(event, ui) {$("a.ui-dialog-titlebar-close").remove();},
bgiframe: true,autoOpen: false,closeOnEscape: false,draggable: false,
show: "drop",hide: "drop",zIndex: 10000,modal: true,
buttons: {'Ok': function() {$(this).dialog("close");processEmp();}}
});
});
I have the following JavaScript code that takes one parameter:
function test(pEmp)
{
var a = pEmp.value);
$('#dialogbox').dialog('open');
}
My question is, based on the value that I pass into my test function, which in turn calls my jQuery UI dialog ('#dialogbox'), when the user presses the 'Ok' button in the dialog, I need to somehow (which is what I am not sure how to do), pass the the variable "a" which holds my pEmp.value, into my other function processEmp(a?), which I have attached to my 'Ok' button.
I basically need this value when the user acknowledges the dialog box.
You may pass custom option to dialog before opening it:
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp($(this).data("pEmpValue"));
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
$("#dialog").data("pEmpValue", pEmp.value).dialog("open");
}
Or even the simplest solution is to declare a variable in scope of the window:
var a = null;
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp(a);
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
a = pEmp.value;
$("#dialog").dialog("open");
}
You can achieve this by adding an event handler for 'close'. Something like this:
$("#dialogbox").bind("dialogclose", function(event, ui) { processEmp(a); });