my site is in mvc-4, i am opening partial view in dialog. partial view works fine first time, but when i open it second time and so on it opens he dialog but partial view is not working. I think some jquery issue i am doing wrong. In partial view div hover event is not working.
This is my code to open dialog:
<div onclick="ShowHistory();">Actions History</div>
function ShowHistory()
{
myDialog = $("<div> </div>");
myDialog.dialog({
autoOpen: false,
width: 1050,
title: "Title",
resizable: false,
modal: true,
draggable: false,
});
myDialog.load("#Url.Action("Method_return_partial_view", new {id = 1 })",
function () {
myDialog.dialog('open');
});
}
Controller method:
[Authorize]
public PartialViewResult Method_return_partial_view(int id)
{
var list = GetHistory(id);
return PartialView("_partialViewName", list);
}
Edit:
I am also sorting the grid, and grid sorting is done using jquery ajax, it works fine when open first time and controller method for sorting called once, but when i open dialog second time and i click on sorting header then controller methods called with multiple of two, means if click once then call once, if click 2nd time then controller method calls 2 times, if 3rd then calls 4 times.
You should try and specify what happens when the dialog closes so that it can be reused again. Try this:
function ShowHistory()
{
myDialog = $("<div> </div>");
myDialog.dialog({
close: function (event, ui) {
// remove div with all data and events
myDialog.remove();
},
autoOpen: false,
width: 1050,
title: "Title",
resizable: false,
modal: true,
draggable: false,
});
myDialog.load("#Url.Action("Method_return_partial_view", new {id = 1 })",
function () {
myDialog.dialog('open');
});
}
Related
Hi i got issue in opening pop-up window multiple times while clicking button. I will explain my issue clearly.
Hi, this is my parent view Customer Form.I have one add button near to Area if i enter the CustomerName AddressType, Street, Location,Place and then select the area.Suppose if area is not in the list means i have to add that. so i click that add button it will open AreaPartial view as popup window.
After i enter the details and click the create button it will save the data in db and it shows the same popup window when it was close means when i click x mark[which is in the pop up window right top corner ) . Now all are working fine.
Now my issue is i open the pop-up window by clicking the button and add the area and close the pop-up window before clicking the main save button in parent view i have to add another one area so i click the add button again but it wont opening the pop-up window . This is my issue.
My Controller code to save the data which is entered in the partial view pop-up window
public ActionResult AreaPartialView()
{
ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
return View("AreaPartialView");
}
[HttpPost]
public ActionResult AddAreaInfo(CustomerViewModel objareaVM)
{
var objAreaID = Guid.NewGuid();
ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM.CityID);
var ObjArea = new Area()
{
AreaID =objAreaID,
DisplayName = objareaVM.Area,
PrintName = objareaVM.Area,
CityID = objareaVM.CityID,
IsActive = true,
IsDeleted = false,
CreatedDate = DateTime.Now,
EditedDate = DateTime.Now,
LastActiveOn = DateTime.Now,
RowID = Guid.NewGuid(),
CreatedSessionID = Guid.NewGuid(),
EditedSessionID = Guid.NewGuid(),
OfflineMode = false,
OfflineID = Guid.NewGuid()
};
db.Areas.Add(ObjArea);
db.SaveChanges();
ModelState.Clear();
return Json(objAreaID);
}
My j-query code to display the area partial view as popup window once the add button is clicked in Parent View
<script src="~/Scripts/jquery-1.10.2-ui.js"></script>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$("#AddArea").click(function () {
$('#AddAreaNew').dialog("open");
});
$(function () {
$('#AddAreaNew').dialog({
autoOpen: false,
width: 400,
height: 500,
resizable: false,
title: 'Add Area',
modal: true,
open: function (event, ui) {
$(this).load("#Url.Action("AreaPartialView", "Customer")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
});
My Partial View code
#Html.Label("Area" , new { #class = "control-label" })
#Html.TextBoxFor(model => model.Area, new { #class = "form-control", type = "text" ,id ="AreaName"})
#Html.ValidationMessageFor(model => model.Area)
#Html.Label("City")
#Html.DropDownList("CityID", null, "Select", new { #class = "form-control " })
<script src="~/Scripts/jquery-1.10.4-ui.min.js"></script>
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript">
function SaveArea() {
debugger;
var Area = $("#AreaName").val();
var CityID = $("#CityID").val();
alert(Area);
var AreaAdd = { "Area": '' +Area + '', "CityID": CityID };
$.post("/Customer/AddAreaInfo", AreaAdd, function(data) {
var option = new Option(Area, data);
$('#AreaID').append($(option));
alert("sucess");
window.close();
});
}
This is my issue i cant able to open my pop-up window multiple times.i tried my level best to explain my issue. please any one help me to solve this issue.
Advance thanks..
Perhaps something like this would help you, as a brief example.
<style>
.floatingbox
{
z-index:99999;
position:absolute;
/* and more of your styling here, the main point is to make to appear above any other element on the page */
}
</style>
<div class="floatingbox" id="inputbox">
</div>
EDIT: <input type="button" value="Add Field" onclick="WhenIGetClicked(this)"/>
function WhenIGetClicked(e)
{
RefershContent();
document.getElementbyId('input').style.left = e.style.left;
document.getElementbyId('input').style.top = e.style.top; // show div at position of button but you can change it to where-ever
}
function RefreshContent()
{
// put your html in here for the different fields you'll need in the div
document.getElementbyId('inputbox').innerHTML = '';
// add the rest of your html mark up but make it as a function so it can be 'refreshed' and look like a new blank form each time, i found this easier than making a partial view and having to deal with loading it into the div/messing with javascript inside the partial view but may be personal preference :)
}
function OnSaveClick()
{
var SomeValueYouWantToPass = document.getElementbyId('inputboxinsidethediv').value; // or innerHTML works sometimes too if it's not getting the value correctly
$.ajax({
type:post,
url: '/MyController/ActionName',
dataType: 'json',
data: { MyVariableOnTheControllerSide: SomeValueYouWantToPass },
success: function()
{
alert('hey it worked!'); // or refresh the page to load the new field, etc
}
)}
}
</script>
On the controller side now:
public JsonResult UpdateField(string MyVariableOnTheControllerSide)
{
//do something with the data.
return Json('Hey it worked!', JsonRequestBehavior.AllowGet);
}
If you'd like to pass it as a class since that's how you have it set up on your controller, you'll have to create the class as a Json object on the HTML markup side of it when grabbing the values (heck you could even do a for loop of the controls in the div and dynamically grab the values instead of reaching out to each element to get it's value). Very basic run down of how I usually do pop ups. Let me know if you need clarification or if I missed your point :)
I'm trying open a view in popup (dialog) after a click on a link, i don't find the problem:
Here is my JS code in my view:
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").on("click", "a", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
$(".close").on("click", "a", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
And here is my link in the same view:
#Html.ActionLink("Exports",
"List",
new { id = Model.Orga_Id },
new {
#class = "openDialog",
data_dialog_id="exportDialog",
data_dialog_title="Tous les exports"
})
All the code is of this view and the code of the view i'd like to show in the dialog is in the same Controller.
When i click on the link, my nav only change the page like a <a href="#"..></a>
Can you see what is wrong here? Do you need more information?
I believe your problem is your click handler.
$(".openDialog").on("click", "a", function (e) {
Your ActionLink is an A tag. The javascript you are using adds a click to an anchor tag that is a child of the object with the .openDialog class. But the anchor is the object with the .openDialog class, e.g. has no child anchor to attach a click handler to.
Try just
$(".openDialog").on("click", function (e) {
Refer to JQuery Documention for .on() for more detailed examples,
http://api.jquery.com/on/
Change your code as like below,
$(".openDialog").on("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
Perhaps trying the .live method instead of the .on
something like
('.openDialog').live('click', function (e) {
This solved a similar issue I was having recently, granted I am relatively new to JS/jQuery
I'm trying to open a jQuery UI dialog from my C# ASP.NET code based on a value being outside a certain range, rather than based on a button click or other client-side event. Here's the Javascript function that should create the dialog (at the top of the .aspx page):
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#rangeDialog').remove();
},
buttons:
{
'OK': function () {
$(this).dialog('close');
}
}
});
}
</script>
Here's the dialog div itself (at the bottom of the .aspx page):
<div id="rangeDialog" style="display: none;" title="Total out of range">
<p>
Your line items total is out of the range allowed by the approval level you chose.
Please check the approval range and adjust the line items or quantities.
</p>
</div>
And here's the section of the C# code behind that attempts to display the dialog:
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
The code in the if block is being reached and executed if I step through it in the debugger, but the dialog isn't being displayed. What am I missing?
I modified my function slightly, based on a question/answer I found at How do I open a jQuery UI Dialog from my c# code behind?, and now it works. Here's the modified function:
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$(function() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) { $('body').find('#rangeDialog').remove(); },
buttons: { 'OK': function () { $(this).dialog('close'); }
}
})
}).dialog("open");
}
</script>
try this
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
You should just be calling the function name.
Also, you may want to try startupscript instead of registerclientscriptblock. You have to be sure that your script gets added AFTER the function is defined, and not before.
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterStartupScript(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
I have a pageA.aspx. In it I open a jQuery dialog with an iframe containing the pageB.asxp.
var dlg = $('#dialog1').html('<iframe id="ifrm"></iframe>');
dlg.dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true
});
dlg.parent().appendTo(jQuery("form:first"));
$('#buttonOpenDialog').click(function () {
var url = '../PageB.aspx';
$("#dialog1>#ifrm").attr("src", url);
$('#dialog1').dialog('open');
return false;
});
Until here is all alright. Now I submit the form and when postback finishes I want to close this dialog I do it like that:
function closePopup() {
parent.$("#dialog1").dialog('close');
__doPostBack();
}
and I want to refresh the parent page pageA.aspx without doing the ugly
__doPostBack()
How Can I accomplish this?
thank you
EDIT: It seems is a complex issue. Please get involved ;P
Add a hidden button in parent page. And when the modal closed, generate the hidden button's click event. It will refresh the parent page.
dlg.dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
close: function (event, ui) {
// btnHidden is the id of the hidden button.
document.getElementById('<%=btnHidden.ClientID%>').click();
// To refresh gridview when user close dialog
}
});
You can set the _target attribute of the submitted form to _parent . The result of the POST will then be displayed in the parent frame (pageA.aspx)
<form target="_parent">
</form>
Is this what you wanted?
Good morning.
I have a modal JQuery dialog that on Open calls and loads a Partial View. Good example can be seen here https://stackoverflow.com/a/4802423/1193841 but I'll re-paste:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
In my case ActionMethod "CreateAlbumPartial" takes an ID parameter that's passed from another page with onclick="" event.
How can I make that Id available to pass to an ActionMethod when its called as shown above ? Something like
$('#dialog').dialog('open',Id)
Would be awesome but I dont think that's how it works.
P.S. Right now I'm displaying my popup by doing $.post() to load .html(data) to div and then displaying that DIV in a .show().dialog('open').
However, instead of having my Action method call and Dialog related stuff separately I would really like to re-do it the way I'm asking to keep all logic in one place.
Thank you in advance.
Why dont you make a hidden control and assign the value to that and use it in the dialog