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.
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 am using knockout to render a page with rows of data. On each row there is a link which should call a controller function which returns a partial view.
knockout script for link is (inside foreach loop)...
<a class="lnkEdit" data-bind="attr: {'href': '#Url.Action("ControllerActionName", new RouteValueDictionary() { { "Controller", "ControllerName" } })/'+ id}">Details</a>
Script section...
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#dialog-edit").dialog({
title: 'Details',
autoOpen: false,
resizable: false,
position: ['center', 50],
width: 700,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$(".lnkEdit").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
$("#btncancel").on("click", function (e) {
$("#dialog-edit").dialog("close");
return false;
});
ko.applyBindings(new UnitViewModel());
})
My page has div as place holder for dialog...
<div id="dialog-edit" style="display: none">
Problem: When I click on link for details; the controller returns partial view but jquery is not able to generate dialog so the page opens as normal view. What is wrong with this?
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
I'll Check Your code and is working...
just add CSS and JS proper.
Pretty new to ajax.
So I have this div:
<div id="authentication" title="Authentication" >
<b>Please Generate a new token to continue!</b>
<br /><br />
<table>
<tr>
<td>Token:</td>
<td><input type="text" id="txtToken"/></td>
</tr>
<tr>
<td></td>
<td><label id="lblError"></label></td>
</tr>
</table>
</div>
which is not being displayed on my mvc view because it is a being used as a dialogue box by Ajax code below:
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
beforeclose : function() { return false; },
title: 'Authentication',
modal: true,
buttons: {
"Cancel": function () {
window.location.replace("#Url.Action("Index", "Home")");
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$.ajax({
type: 'POST',
data: { 'token': token},
dataType: 'json',
url: '#Url.Action("CheckNewToken", "Account")',
success: function (result) {
if(result==true)
{
window.parent.jQuery('#authentication').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
}
}
});
However when the codes goes to success and result == result, the dialog box is destroyed but the div (dialog box) is then being displayed on my view which I don't want. What am I doing wrong?
Close the dialog and then destroy. This will hide the dialog completely and then destroy its dialog features. if you just do .dialog('destroy') it will just remove the dialog functionality completely and display the element as is on the page but it wont hide.
success: function (result) {
if(result==true)
{
$('#authentication').dialog('close').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
Another thing is beforeclose : function() { return false; }, you are returning false which will prevent the close event from happening. it should be beforeClose though you can remove it safely.
if the above doesnt work another option to remove the div is by subscribing to close event:-
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
title: 'Authentication',
modal: true,
close:function(){
$(this).dialog('destroy').hide();
},
buttons: {
"Cancel": function () {
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$('#authentication').dialog('close');
}
}
});
There are several posts on StackOverflow on the subject but none of the answers helped me.
I am using the DataList control that is populated by a SELECT through a DataAdapter.
A concept is recommended that only one instance of the dialog must be open but could not apply this method
The structure of the html is:
<asp:DataList ID="DataList" runat="server">
<ItemStyle />
<ItemTemplate>
<a href="" class="link"/></a>
<div class = "dialog" id="dynamicID" style="display:none">
</ div>
</ ItemTemplate>
</ asp: DataList>
The jQuery code I'm using is:
<script language="javascript" type="text/javascript">
$ (function () {
$ (". link. ") click (function () {
var id = '#' + ($ (this). siblings ('. dialog'). attr ('id'));
$ (id). dialog ({
AutoOpen: false,
closeOnEscape: true,
resizable: false,
draggable: false,
modal: true,
width: 800,
height: 600,
overlay: {backgroundColor: "# 000", opacity: 0.5},
top: 20,
show: 'fade',
hide: 'fade',
buttons: {
"Close": function () {
$ (id). dialog ('close');
}
}
});
$ (id). dialog ('open');
});
});
</ script>
Imagine this HTML
<asp:DataList ID="dataList" runat="server">
<ItemTemplate>
<div class="row">
<p>
Result: <strong>
<%# Container.DataItem.ToString() %></strong></p>
<a href="#" class="link" data-open="dialog_<%# Container.ItemIndex %>" />Click
To Open</a>
<div class="dialog" id="dialog_<%# Container.ItemIndex %>">
<h2>
This is the text inside the dialog #
<%# Container.ItemIndex %>.</h2>
<p>
</p>
</div>
</div>
</ItemTemplate>
</asp:DataList>
with this javascript
$(function () {
// create dialogs
$(".dialog").dialog({
autoOpen: false,
closeOnEscape: true,
buttons: {
"Close": function () {
$(id).dialog('close');
}
}
});
// hook up the click event
$(".link").bind("click", function () {
// console.log($(this).parent());
// open the dialog
var dialogId = $(this).attr("data-open");
$("#" + dialogId).dialog("open");
return false;
});
});
works lovely.
Working example can be found here
What is wrong with your approach?
you are creating the dialog's inside a method, and this should be created inside the $(document).ready() so, everytime you click, it creates a dialog, but... it already exists and screws up everything.
When working with dialogs:
First you create them using .dialog()
You just need to use .dialog('open') to make that dialog visible
And use .dialog('close') to hide that dialog
by default jQuery UI CSS will hive the dialogs automatically (display:none;) so you don't need to do anything like that.
Usually just destroying the dialog on close will fix the issue.
$( "#dialogbox" ).dialog({
close: function (event, ui) {
$(this).dialog("destroy");
}
});
When dialog has displayed it fall out from the markup flow. So when you call var id = '#' + ($ (this).siblings('.dialog').attr('id')); you don't get anything. You can add dialog's id to array first time it opens and then if $(this).siblings ('.dialog') result is empty you may get dialog element id from array.
<script type="text/javascript">
var registeredDialogs = [];
function registerDialog(link, dialogDiv) {
var linkId = $(link).attr("id");
if (!registeredDialogs[linkId])
registeredDialogs[linkId] = dialogDiv;
}
function getDialog(link) {
var linkId = $(link).attr("id");
return this.registeredDialogs[linkId];
}
$(function () {
$(".link").click(function () {
var dialogDiv = $(this).siblings('.dialog');
if (dialogDiv.length !== 0) {
registerDialog(link, dialogDiv);
}
else {
dialogDiv = this.getDialog(link);
}
dialogDiv.dialog({
AutoOpen: false,
closeOnEscape: true,
resizable: false,
draggable: false,
modal: true,
width: 800,
height: 600,
overlay: { backgroundColor: "# 000", opacity: 0.5 },
top: 20,
show: 'fade',
hide: 'fade',
buttons: {
"Close": function () {
$(id).dialog('close');
}
}
});
$(id).dialog('open');
});
});
</script>
How to generate a javascript link in asp.net mvc?
eg.
Pop it
Can I use Html.ActionLink and how to do this?
I could do something like this:
Pop it
But I just want to find out will there be some better solutions for this?
Many thanks.
Yes, you can do something like:
<%=Html.ActionLink(model.Title, "View", "PoppedView", new { Id = model.Id.ToString() }, new { target="_blank" })%>
I would look at doing this using jQuery UI and a dialog instead of a new window. You can use the open handler to load up the content into the dialog.
<%= Html.ActionLink( "Pop It",
"ItemDetail",
"Item",
new { ID = model.ID },
new { #class = "popup-link" } ) %>
<script type="text/javascript">
$(function() {
$('.popup-link').click( function() {
var href = $(this).attr('href');
$('<div><p class="popup-content"></p></div>').dialog({
autoOpen: true,
modal: true,
height: 200,
width: 400,
open: function() {
$(this).find('.popup-content').load(href);
},
close: function() {
$(this).dialog('destroy');
}
});
return false;
});
});
</script>