Works fine with a text link to fire dialog - but lasts for about .5 second if triggered from an html form submit button. Sounds crazy! Yep, just cannot get it to work. Help!
$(document).ready(function() {
$('#rating-0').click(function() { $('#dialog').dialog('open'); }); $('#dialog').dialog({ autoOpen: false, height: 280, modal: true, resizable: false, buttons: { Continue: function() {
$(this).dialog('close'); // Submit Rating
}, 'Change Rating': function() {
$(this).dialog('close'); // Update Rating
} }
});
});
<form action="https://www.etc" id="rating-0">
<input type="hidden" name="cmd" value="_s-xclick" />
<input name="submit" type="image" src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" />
</form>
<div id="dialog" title="Are you sure?">
<p>You've assigned the current celebrity a rating of 0…</p> <p>Perhaps you are just judging them on the terrible last movie…</p>
</div>
Add return false; to your submit or click handler to prevent the browser from submitting the form and reloading the page.
EDIT:
$(document).ready(function() {
$('#rating-0').submit(function() {
$('#dialog').dialog('open');
return false;
});
...
});
Related
If I initialize my modal like this:
$("#dlg").dialog({
open: function (e) {
$(this).load('mvc action url');
},
close: function () {
$(this).dialog('destroy').empty();
},
modal: true
});
...it initializes as modal. However, if I leave out modal: true at initialization and try to set modality after the dialog is already open like this:
$("#dlg").dialog("option", "modal", true);
...it doesn't work. I know it's being set because I can alert the modal value after setting it. I'm also properly referencing jquery-ui's library because I can open it as modal at initialization.
Edit
Here's a fiddle:
http://jsfiddle.net/s9zmfkdn/1/
When you click open initially, it shows as modal as expected. Now remove the line as I instruct in the fiddle. When you open the dialog this time and then click Make it modal, nothing happens
So there are a few things that are causing this to fail to work as you anticipated.
You wrapped the initialization of the dialog in a function, so it was not globally available to other functions.
You destroy the dialog upon close, so it no longer exists to allow the change of the modal option.
It's not clear why you're doing it this way and I suspect there is something you're not sharing. Regardless, here is one example that works:
http://jsfiddle.net/Twisty/s9zmfkdn/2/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" />
JavaScript
$(function() {
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});
Now if you need, you can define the object more globally and manipulate it like so:
http://jsfiddle.net/Twisty/s9zmfkdn/4/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" data-modal="true" />
JavaScript
$(function() {
var $diag = $("#basesystem");
$(".moduleloader").click(function() {
$diag.dialog({
open: function(e) {
$diag.html('<span>hello</span>');
},
close: function() {
$diag.dialog("destroy").empty();
},
modal: $("#makemodal").data("modal")
});
});
$("#makemodal").click(function() {
if ($(this).data("modal")) {
$(this).data("modal", false);
$(this).val("Make Modal");
} else {
$(this).data("modal", true);
$(this).val("Remove Modal");
}
});
});
This creates a new dialog every time and destroys it upon close. The only difference is that modal preference is stored someplace. You could also do this by storing it in global variable too.
Update 1
Based on your description, what you'll want to do is remove or create the ui-widget-overlay element.
Try this on for size: http://jsfiddle.net/s9zmfkdn/5/
$(function() {
function removeOverlay() {
$(".ui-widget-overlay").remove();
}
function setOverlay() {
if ($(".ui-widget-overlay").length) {
return false;
}
var $ov = $("<div>", {
class: "ui-widget-overlay"
}).css({
width: $(window).width(),
height: $(window).height(),
zIndex: 1001
});
$("body").append($ov);
}
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
var $button = $("<a>", {
href: "#"
}).html("Toggle Modal").button().click(function() {
if ($(".ui-widget-overlay").length) {
removeOverlay();
} else {
setOverlay();
}
}).appendTo($(this));
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});
I have a form with three inputs: Save, Delete, and Exit. When Delete is clicked, I pop a JQuery UI Dialog box to confirm that the user wants to delete that data. They have two buttons as options: Delete or Cancel. Cancel works fine and closes the Dialog box. If they click Delete, I wish to submit the original form and delete the data as if the Dialog box was not there, which is not working. I click it and nothing appears to happen.
I am attempting to submit the "update_purchase" form but simulate using the "delete_purchase" input to convey information. With the below code, once I click "Delete" on the Dialog box nothing happens; however, if I click "Cancel" to exit the dialog box and then click "Exit" on the original form, I find the entry has been deleted.
Thanks for any and all help.
<form method="post" id="update_purchase" enctype="multipart/form-data" action="{{ url }}">
...
<input type="Submit" name="save" value="Save">
<input type="Submit" name="delete_purchase" id="delete" value="Delete">
<input type="Submit" name="exit_edit" value="Exit">
// Confirm Delete dialog
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
height: 180,
modal: true,
buttons: {
"Delete": function() {
$("#update_purchase").submit( function(eventObj){
$('<input />').attr('type', 'hidden')
.attr('name', "delete_purchase")
.attr('value', "Delete")
.appendTo('#update_purchase');
$( this ).dialog( "close" );
return true;
});
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#dialog").dialog("open");
return false;
});
});
I'm trying to create dynamic dialog, with one input field and with some texts. Problem is, that dialog remembers value of old input fields and is not updating them. I created JSfiddle example of my problem. If you click on <li> element than dialog will come up. There is one input field, that is changing content of <li> element and some pointless text. Problem comes if, when you change content of input field and save it, from this time is stopped being dynamic and become pure static field. I totally don't understand why. PS Sorry for my bad english
HTML
<div id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text
</div>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
JavaScript
$('li').click(function () {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function () {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
},
Storno: function () {
$(this).dialog('close');
}
}
});
jsfiddle
Change the dialog to a <form>, then use its reset() method.
$('li').click(function() {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function() {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
this.reset();
},
Storno: function() {
$(this).dialog('close');
this.reset();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text</form>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
I think you can easily achieve what you want to achieve by setting the input value with the jquery val() method on the input.
Here is what i mean
Change this
$('#xxx').attr("value", $(this).text());
to this
$('#xxx').val($(this).text());
And here is a working jsfiddle http://jsfiddle.net/gzx3z6e5/
When I call fadeOut on my dialog it only does a partial fade and leaves the grey header area where the dialog title is. I've tried removing the title as well as the various attributes that disable the exit button in the upper right corner of the dialog, but that didn't work. As you'll see in my script below, I want the dialog to close after the form submission has been validated.
//HTML
<div id="dialog">
<form id="form">
<p id="thanks">Please provide a contact number. It will only be shared with the
host</p><input id="number" name="number" type="text"/>
<button id="submit" type="submit">Submit</button>
</form>
</div>
//JS
if(myConditional){
//FORM IS HIDDEN ON PAGE LOAD AND SHOWN ON CLICK
$('form').show();
$('#dialog').dialog({
//These parameters are meant to disable the dialog close button
closeOnEscape: false,
beforeclose: function (event, ui) { return false; },
dialogClass: "noclose",
title: "Thanks For Volunteeering",
minWidth: 500
});
$('button').button();
}else{
//other code
}
//Validate the phone number before saving it to local storage
$("#form").validate({
rules: {
number : {
required: true
customvalidation: true
}
},
messages: {
number : {
required: "enter a phone number"
}
},
submitHandler: function(form) {
var number = $('#number').val();
localStorage.setItem('number', JSON.stringify(number));
//THIS FADE OUT ISN'T FULLY FADING THE DIALOG
$('#dialog').fadeOut();
} //closes submit handler
});//close validate
Ok I figured it out.
I got rid of the beforeClose parameter in the dialog init code, and in the form validation submit handler I added this:
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
});
//The fadeOut method has a call back function you can use with it to do something after the fade is completed.
I am trying to get a JQueryUI (1.8.23) dialog to work on an ASP.NET MVC view. I have specified the dialog to "autoOpen: false" and have specified some buttons on the dialog as well.
The first problem is that the dialog doesn't seem to respect the "autoOpen: false" declaration and always opens when the page loads. The second problem is that the buttons I have specified don't display; either when I open the dialog from links on the page or when it opens when the page loads.
My Javascript that sets up the dialog is:
$(function() {
var actionUrl = "";
var passReason = $("#passReason"),
allFields = $([]).add(passReason);
$("#pass-dialog").dialog({
autoOpen: false,
height: 100,
width: 300,
modal: true,
buttons: {
"Pass": function() {
actionUrl = actionUrl.replace('COMMENT', escape(passReason.combobox('getValue')));
document.location = actionUrl;
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
},
close: function() {
$(this).dialog("close");
}
});
$(function() {
$("#passReason").combobox({
url: '<%= Url.Action("GetOverrideReasonCodes", "Statistics") %>',
valueField: 'code',
textField: 'description',
method: 'GET',
mode: 'remote'
});
});
});
function getManagerComment(jobId, routeId, crisId) {
actionUrl = '<%= Url.Action("ManualCompleteSegment", "Statistics", new RouteValueDictionary{{"jobId", "JOBID"}, {"routeId", "ROUTEID"}, {"crisId", "CRISID"}, {"comment", "COMMENT"} }) %>';
actionUrl = actionUrl.replace('JOBID', jobId);
actionUrl = actionUrl.replace('ROUTEID', routeId);
actionUrl = actionUrl.replace('CRISID', crisId);
$("#pass-dialog").dialog("open");
}
function getManagerRouteComment(jobId, routeId) {
actionUrl = '<%= Url.Action("ManualCompleteRoute", "Statistics", new RouteValueDictionary{{"jobId", "JOBID"}, {"routeId", "ROUTEID"}, {"comment", "COMMENT"} }) %>';
actionUrl = actionUrl.replace('JOBID', jobId);
actionUrl = actionUrl.replace('ROUTEID', routeId);
$("#pass-dialog").dialog("open");
}
and the that represents the content of my dialog is:
<div id="pass-dialog" title="Enter Pass Reason">
<form>
<fieldset>
<label for="passReason">Pass Reason: </label>
<input id="passReason" name="passReason" class="easyui-combobox" />
</fieldset>
</form>
</div>
I have the beneath the emitted HTML.
Any suggestions?
Thanks,
Matthew
Found out there was a conflict between jQueryUI and "EasyUI" CSS files. Once I removed the EasyUI from the equation and went to a more manual population of my dropdown, everything worked as expected.