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.
Related
When I'm on my DeskAlert creation page, I wish to open in a dialog box a partial view which contains a list of Alert Template. So I have put a link to open a JqueryUI dialog, and I'm trying to link my Template partial view with it.
But... I don't understand why the view didn't show up, in the dialog box.
I have created Controller/View with VS 2013 assistant. Could you explain me this mecanism ?
Thanks
RouteConfig
routes.MapRoute("Index",
"AlertTemplatesModal/Index/",
new { controller ="AlertTemplatesModal",action="Index"},
new[] {"WebAppDeveloppement.Controllers"});
Create.cshtml
<script type="text/javascript">
$(document).ready(function() {
$(".tlist").on("click",function (event) {
event.preventDefaut();
$('#myDialogContent').dialog("open");
});
$('#myDialogContent').dialog({
autoOpen:false,
height:500,
width:500,
modal:true,
open:function () {
$.ajax({
url:"#(Url.RouteUrl("Index"))",
type:"GET",
succes:function(data)
{
$('#myDialogContent').html("");
$('#myDialogContent').html(data);
},
error:function(xhr,ajaxOptions, thrownError){
alert("error");
}
});
},
buttons:{
Cancel:function() {
$(this).dialog("close");
}
}
});
});
</script>
<div id="myDialogContent"></div>
AlertTemplatesModalController
private DSdatabaseEntities db = new DSdatabaseEntities();
public ActionResult Index()
{
var alertTempalte = db.AlertTemplate.Include(a=>a.AlertMode).Include(a=>a.AlertPriority).Include(a=>a.RecipientMap);
return View(alertTemplate.ToList());
}
Index.cshtml
#model IEnumerable<WebAppDeveloppment.AlertTemplate>
<div id="myDialogContent">
...
</div>
Ok, I've found the solution. Your response give me the idea to test with Firebug... and I could see my error. I make a confusion in the url syntax between Controller/Action/View. So I have created a special action, a partialview, and finally, it's worked.
This link helps me to understand : http://www.itorian.com/2013/02/jquery-ui-autocomplete-with-json-in-mvc.html the logic, and this one : Loading a partial view in jquery.dialog how to call partial view. My solution :
Create.cshtml
<script type="text/javascript">
$(document).ready(function() {
$(".tlist").on("click",function (event) {
event.preventDefaut();
$('#myDialogContent').dialog("open");
});
$('#myDialogContent').dialog({
autoOpen:false,
height:500,
width:500,
modal:true,
open:function () {
$(this).load("/AlertTemplatesModal/TemplateView/");
},
buttons:{
Cancel:function() {
$(this).dialog("close");
}
}
});
});
</script>
<div id="myDialogContent"></div>
AlertTemplatesModalController
public ActionResult TemplateView()
{
ViewBag.AlertTemplateTitle = new SelectList(db.AlertTemplate,"AlertTemplateID","AlertTemplateTitle");
return PartialView("Index");
}
I have changed the code little bit. Created a function to load partial view in div and created a parameter for callback function so that when partial view is loaded, you could apply jquery dialog on that div. Give it a try and let me know.
<script type="text/javascript">
$(document).ready(function() {
$(".tlist").on("click",function (event) {
event.preventDefaut();
loadPartialView(function(){
$('#myDialogContent').dialog("open");
});
});
$('#myDialogContent').dialog({
autoOpen:false,
height:500,
width:500,
modal:true,
buttons:{
Cancel:function() {
$(this).dialog("close");
}
}
});
});
function loadPartialView(callback){
$.ajax({
url:"€(Url.RouteUrl("Index")}",
type:"GET",
succes:function(data)
{
$('#myDialogContent').html("");
$('#myDialogContent').html(data);
callback();
},
error:function(xhr,ajaxOptions, thrownError){
alert("error");
}
});
}
</script>
Jquery Opens Multiple Dialog boxes in MVC 4.0
In _layout file I have this code:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
$("#dialog").dialog({
autoopen: false,
height: 600,
width: 800
});
});
</script>
and when I use an Ajax call using this:
success: function (data) {
$("#dialog").html(data);
}
it show a lot more 100 of dialog boxes and keeps opening until closed forcely,
but when I use only
success: function (data) {
alert(data);
}
it shows only 1 alert box containing data,
Please lead me to some Solution,
Try this code
<script type="text/javascript">
function show()
{
$("#dialog").dialog({
autoopen: false,
height: 600,
width: 800
});
}
</script>
success: function (data) {
$("#dialog").html(data);
show();
}
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.
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>
I am very fresh to asp.net mvc and jQuery. After one day trying, I still don't know how to pop up a jQuery dialog using data from a action(return JsonResult) while user click a link.
Any suggest or guideline is appreciate.
Thanks!
Thx for Stuntz & RhinoDevX64 's reply, finally I work it out.
jQuery Code:
<script type="text/javascript">
$(function() {
$('.newsitem').click(function() {
var $thisLink = $(this);
$('#dialog').empty();
$.getJSON($thisLink.attr("href"), function(data) {
$('#dialog').html(data.content);
$("#dialog").dialog({
autoOpen: false,
title: data.title,
bgiframe: true,
modal: true,
height: 450,
width: 540,
buttons: {
'关闭': function() {
$(this).dialog('close');
}
}
});
$('#dialog').dialog('open');
});
return false;
});
});
</script>
ActionLink
<%= Html.ActionLink(item.Title, "GetByJs", "Article", new { id = item.ID }, new { #class = "newsitem" })%>
Action Code
public ActionResult GetByJs(Guid id) {
var item = Article.SingleOrDefault(a => a.ID == id && a.AtFront == true);
var jsonData = new {
title = item.Title, content = item.BodyContent
};
return new JsonResult {
Data = jsonData
};
}
var ph = $("#idOfPlaceHolderInPage");
ph.load(/Controller/SomeActionWhichReturnsPartialView, function() {
// this callback will be called after your partial view loaded into placeholder
ph.dialog({
// pass options here to customize dialog
});
});
1st use jQuery UI follow their documentation for including the css and js files.
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#idOfModalPlaceholder").dialog({autoOpen: false, title:"MODAL TITLE"});
});
function OpenModalGetContent(){
$("#idOfModalPlaceHolder").load("/Controller/View");
$("#idOfModalPlaceHolder").dialog('open');
}
</script>
CLICK HERE FOR MODAL
2nd You should really just use a regular ActionResult and a Partial View (*.ascx), if you are just grabbing some content;
if you are calling data I presume you may be loading into an autocomplete which would be completely different than this scenario.