jQuery dialog jumping to full page in browser - javascript

I have a dialog with a WebGrid that displays a list of items:
#if (Model.ItemsByLocation != null)
{
#grid.GetHtml(
tableStyle: "table",
fillEmptyRows: true,
headerStyle: "header",
footerStyle: "footer",
mode: WebGridPagerModes.All,
firstText: "<<First",
previousText: "<Prev",
nextText: "Next>",
lastText: "Last>>",
htmlAttributes: new { id = "grid"},
columns: new []
{
//grid.Column("ItemNumber", "Item"),
grid.Column(header: "Item Number", format: (item) => Html.ActionLink((string)item.ItemNumber, "ShowItem", "Inventory", new { id = item.ItemNumber.ToString()}, new {onclick = "GetItemDetails(" + item.ItemNumber.ToString() + ");"})),
grid.Column("ItemDescription","Desc"),
grid.Column("ItemSerialNumber","SN"),
grid.Column("itemLocationSite","Site"),
grid.Column("ItemLocationBuilding","Bldg"),
grid.Column("ItemLocationFloor","Flr"),
grid.Column("ItemLocationOffice","Off"),
grid.Column("ItemTypeDescription","Type"),
grid.Column("FirstName","First"),
grid.Column("LastName","Last")
})
}
else {
<p><i>No item to display</i></p>
}
This is a dialog itself from another page - no problem with this. When I click on the link the JS function is called:
function GetItemDetails(id) {
var test = id;
$.ajax({
type: 'GET',
url: '#Url.Action("ShowItem")?id=' + id,
success: function (data) {
$("#divDetails").html(data);
$("#divDetails").dialog("open");
$("#divDetails").show();
}
});
return false;
}
This responds with another dialog on top of the first dialog, but only for a second or two and then both dialog close and the data in the second dialog is displayed full page in the browser. Any ideas why this is?
This is the dialog for the details:
$(document).ready(function () {
//debugger;
$("#divDetails").dialog({
autoOpen: false,
width: 'auto',
resizable: true,
title: 'Item Details',
modal: true,
closeOnEscape: false,
show: {
effect: 'drop', direction: 'up'
},
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
}).prev("ui-dialog-titlebar").css("background", "#FF3300");
$(".dialog").click(function () {
$("#divDetails").dialog("open");
});
});
<div id="divDetails" style="display:none" class="ui-dialog-titlebar ui-widget-header">
</div>
I put some breakpoints in the code and after the second dialog is displayed the controller Index function is called. How does that happen? It does this if I remove the ShowItem from the link, But if I put that back in, it calls the ShowItem function twice. Why?

I still do not know what the problem was but if I change the webgrid column to this, it works just fine:
grid.Column(header: "Item Number", format:##item.ItemNumber.ToString()),

Related

How can I load a pop up box with a specied URL in asp.net using JavaScript?

I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>

JQueryUI model not working as expected

First time I am using JqueryUI.
I am trying to pop a conditional modal to alert the user.
In my ajax call I have the following code:
.done(function (result) {
$('#reportData').append(result);
var totalColumns = '#(ViewBag.TotalColumns)';
if (totalColumns > 10) {
callDialog();
}
else {
print();
}
})
The callDialog function is:
function callDialog() {
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizeable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 600,
dialogClass: 'ui-dialog-osx',
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
};
The HTML for the modal is:
<div style="margin-left: 23px;">
<p>
Some Text
</p>
</div>
The issue I am seeing is the the modal appears, but then quickly goes away and the print() is then called.
I would expect the modal to appear and if the user clicks the OK button the print() would fire off and if the user clicks the cancel it woudl just close the modal.
From the API documentation: http://api.jqueryui.com/dialog/#option-buttons
The way you are using the button option is not correct.
Here is the working snippet:
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]

Show Popup on Click

Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.

Take selected DDL value an use as parameter for actionlink

I have an MVC view with a few dropdown lists. There is some custom validation on there that under certain conditions will show an action link by the side of the drop down list. These action links will pop up a modal window with information related to the choice made in the dropdown list.
My problem is that I can seem to see how to take the value chosen from the dropdown and get it in to my ajax request!!
Here is my code: (dropdown)
<div id="holderlist">
#Html.DropDownListFor(i => i.holderid, (SelectList)ViewData["holdersList"], "", new { #class = "chosenlist" })
</div>
(action link)
<div id="add" style="display:none;">
#Html.ActionLink("Actions", "existingOfficers", "Roles",
new { id = ?????<how do I get DDL chosen ID here> },
new { #class = "openDialog", dialog_id = "productDetail", dialog_title = "Workflow Centre" })
</div>
(ajax request)
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 706,
height: 300
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
What I cant do is get the ID set to the ID of the value chosen in the DDL. The DDL value isn't at this point stored in the database as this is essentially a new input form.
Any help would be greatly appreciated :-)
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
}); ​
You can test here

Is it possible to display url of some view or something ID when using JQuery UI Modal dialog

I am trying to achieve something but I don't know is it possible.
I have a link that point to /ControllerName/ActionName.
When I click on it view is opened and url is like:
localhost:xxxx/ControllerName/ActionName
or
localhost:xxxx/ControllerName/ActionName/9879878927
Now, when I use JQuery UI modal dialog to display the same view it opens in modal view but url isn't changed.
Is this possible in this way that I am making? Am I on the right direction or I did something completely wrong?
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
open: function (event, ui) {
window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 600,
height: 'auto',
resizable: false, position: 'top'
}).load(this.href);
});
...
#Html.ActionLink("about", "About", "Home", null,
new { #class = "openDialog", data_dialog_id = "test" })

Categories