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>
Related
I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});
The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});
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 am displaying a dialog box on opening of the page. But the problem is when I click on one of the buttons of dialog box, the dialog box window does not close. I don't know why.
Here is my code :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
$(this).dialog("close");
callback("1");
},
"No,Thanx": function() {
$(this).dialog("close");
callback("2");
}
}
});
}
});
And in html I have the dialog div and other necessary inputs.
Html:
<div name="dialog" id="dialog"></div>
<input type="hidden" name="loginstatus" id="loginstatus" value="<%=firstlogin%>"/>
test this, I made some changes in button :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
callback("1");
$(this).dialog("close");
},
Cancel: function() {
callback("2");
$(this).dialog("close");
}
}
});
}
});
Try
$("#dialog").dialog('close');
instead of
$(this).dialog("close");
It's not quite recommended to use this unless you are absolutely sure about the scope.
$('#dialog').click(function() {
$('.dialog').hide();
});
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...
I am trying to get a button inside a jQuery UI modal dialog to close itself and open another modal dialog.
The problem is that the second dialog when opened will always open without the screen overlay you expect from a modal dialog, as a result you can still click on the screen behind the modal.
The jQuery is as follows
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
I have also tried changing the handler to
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog("close");
$("#DialogCreateToDo").dialog("open");
});
Which didn't help
Here is the jsFiddle
Could someone please help me understand why this might be happening? Is this a bug or have I done something wrong?
There is a typo in your code, in the second dialog definition you have "model : true", when it is supposed to be "modal : true"
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
modal: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
Try this: http://jsfiddle.net/tzKf7/3/
Hope it helps.
Moving the .dialog definition into the click handler will do the trick.
$("#btnCreateToDo").click(function (e) {
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: true,
width: 450
});
});