I am working on ASP.NET webform development. I am working with jquery fancybox to call my webpage as a popup window. Everything is working fine. But my issue comes up when I close my pop-up window and open the same page as a pop-up again, the page_load is calling multiple times.
Example: I have a button "Add User". When I click first time, it opens the pop-up and Page_load is called once. I closed the pop-up window and again click on "Add User", this time when I run Debug, it loading Page_Load method twice and again thrice and so on.
On my master page I am calling the fancybox api (Because I will be using Fancybox in my whole application)
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(FancyBoxLoad);
function FancyBoxLoad(sender, args) {
var dWidth = parseInt(500);var dHeight = parseInt(500);
$(".various").click(function() {
if ($(this).attr('href').match(/width=[0-9]+/i) != null) {
dWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=', ''));
dHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=', ''));
}
$(".various").fancybox({
maxWidth: dWidth,
maxHeight: dHeight,
fitToView: true,
width: '75%',
height: '100%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
}
On my Content page I have
<div style="float: right; padding-right: 10px;">
<a id="addnew" class="various fancybox.iframe" href="">
<input class="button" value="Add User" type="button" /></a>
</div>
Related
I have created a dialog box that calls a user Control for creating a grid and populating it respectively. but this user control is used earlier, so when I am showing the dialog box, it is showing me the same grid. So, in order to call the user control again, i want its load event to get fired again. Is it possible to do this. Below is my code:
HTML
<%# Register TagPrefix="uc" TagName="ReviewGroupGrid" Src="UserControls/ReviewGroupGrid.ascx" %>
<%# Register TagPrefix="uc" TagName="ReviewGroupGrids" Src="UserControls/ReviewGroupGrid.ascx" %>
<%# Register Assembly="OCM.Phoenix.WebToolsFramework.Server.Modules.DataSteward.WebExtensions" Namespace="OCM.Phoenix.WebToolsFramework.Server.Modules.DataSteward.WebExtensions" TagPrefix="cc1" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="DataStewardContent">
<cc1:Button ID="btnMerge" runat="server" Text="Merge & Edit" OnClick="btnMerge_Click"
OnClientClick="javascript:return reviewGroupForm.getSelectedRowsForMerge()" />
<div class="modal-dialog" id="updateClaimConfirmPopUp" style="display: none">
<div class="modal-content">
<div class="modal-header" id="popUpHeader">
<button type="button" class="close closeClaimPopUp">
<span>×</span></button>
</div>
<div class="modal-body" id="confirmData">
<div id="random"></div>
<div class="dataTable_wrapper">
<div class="table-responsive">
<uc:ReviewGroupGrids ID="reviewGroupCtrls" runat="Server" />
</div>
</div>
</div>
<div class="modal-footer">
<asp:LinkButton ID="claimMerge" CssClass="buttonClassClaim btn btn-primary" runat="server" Text="Accept" OnClick="btnMerge_Click"/>
<button type="button" id="btnClosePopUp" class="buttonClassClaim btn btn-primary closeClaimPopUp">
Discard</button>
</div>
</div>
</div>
</asp:Content>
jQuery
getSelectedRowsForMerge: function () {
var entityType = $("input[id*='hdnEntityType']").val();
if (entityType === "19") {
$('#popUpHeader').find('h4').remove();
$('#random').find('h4').remove();
$('#popUpHeader').append(' <h4 class="modal-title" > ' + 'Need Your' + ' Attention!</h4>');
$('#random').append('<h4><b> ' + 'The Claims that you are merging are associated with different patients, merging the claims will result in explicit merging of the associated Patients as well, Please review the patient(s) details shown below before merging the claim' + '</b></h4>');
//$('#confirmData').append('<div class="table-responsive"').append(' <uc:ReviewGroupGrid ID="reviewGroupCtrl" runat="Server" />').append('</div>');
$("#updateClaimConfirmPopUp").dialog({
autoOpen: true,
width: 1600,
resizable: false,
draggable: true,
modal: true,
show: { effect: 'blind' }
});
}
},
When my dialog box is getting created, it is creating the user control but this user control is already populated. I want to call its load event so that the user control processes again. Can i do this via click event when opening the dialog?
Do you want the btnMerge to refresh the div everytime its shown. If so then you need to get the data from server via ajax call in your getSelectedRowsForMerge which can update the data shown in your ReviewGroupGrids control. In the success handler of this promise, set the popup to be shown and not immediately. This will refresh everything in the div and not require any server side load event
Snippet as follows, please add real code
getSelectedRowsForMerge: function () {
// various cleanups as present
$.ajax(...)
.success( function() {
//show the div
$("#updateClaimConfirmPopUp").dialog({ .... } );
})
I am working on MVC application and on one of my pages I have an image gallery. I want to do the following: when I click on any given image to open a modal dialog and display the image (the reason for that is because I don't have much space on my page).
Javascript code:
function openDialog(url)
{
$("#dialog-form").dialog("open");
document.getElementById("dialog-form").style ="display: block;"
document.getElementById("modalImg").src = url;
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 800,
width: 850,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
Razer View:
<div style="height: auto; width: 100%;">
#foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
{
<div style="float: left; width: 250px;">
<img alt='Patka' src='#Url.Content(photo.Url)' width='250' onclick="openDialog('#Url.Content(photo.Url)')"/>
</div>
}
<div id="dialog-form" title="Screenshot Preview" style="display: none;">
<img alt='ModalPatka' id="modalImg" src=".."/>
</div>
<div style="clear: both;"></div>
</div>
However when I click on any image nothing happens. Any idea why?
Are you getting any javascript errors in your console (Firebug for Firefox or the Chrome debug console)? I am not sure of the exact problem, but I can say that you should probably clean up your javascript and use the full power of jQuery selectors, this might help solve your issue.
Here are the changes that I would recommend:
Place a class on your preview images so that we can attach a jQuery handler to the click of that element.
I am not sure if .src is a valid jQuery selector on an element. Try using the .attr() designator
Let's remove the GetElementById calls in your JavaScript and use the jQuery selectors
I think the dialog call needs to be in your .Ready jQuery function. See the examples here
Update your DOM elements before calling the .Dialog function to prevent screen flashing.
Remove the spaces in your jQuery selectors, I dont think this is causing an issue, but it would not hurt to clean those up as well (e.g. (this) instead of ( this ))..even though the jQuery UI examples have them, maybe this is just a coding style concern.
JavaScript Code
$(function(){
$(".OpenDialog").on("click", function(){
$("#dialog-form").style ="display: block;";
$("#modalImg").attr("src", $(this).attr("src"));
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 850,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
});
Razor View
<div style="height: auto; width: 100%;">
#foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
{
<div style="float: left; width: 250px;">
<img alt='Patka' src='#Url.Content(photo.Url)' width='250' class="OpenDialog"/>
</div>
}
<div id="dialog-form" title="Screenshot Preview" style="display: none;">
<img alt='ModalPatka' id="modalImg" src=".."/>
</div>
<div style="clear: both;"></div>
</div>
I have a datatable webpage that shows a list of user in a datatable. On the user page there is a button create new user. On clicking this launches a modal jQuery dialog box for the user to enter details off the new user. There is a Cancel button which just closes the dialog box and a Save User button which on clicking calls DoSaveUser method in my controller. I can see from debugging that I get into the DoSaveUser method which should at the end return to a PartialView if the create user was successful saying User was saved. However my dialog were you enter details is not getting replaced with the Success message - even though the user is getting created - i.e - after I hit the save button - if I then cancel the dialog and refresh the original user page I can see the datatable updated with my new user.
Code on UserList page (there are more fields in the dialog than just forename but have removed them to make question have less code). So when CreateUser button is clicked my newUserDialog is launched.
<div id="newUserDialog">
#using (Html.BeginForm("DoSaveUser", "MyController", FormMethod.Post, new { id = "saveForm" }))
{
<div id="resultContainer">
<table class="ui-widget-content" style="width: 565px; margin-top: 10px;">
<tr>
<td style="width: 100px;">
</td>
<td class="label">
Forename :
</td>
<td class="value">
#Html.TextBoxFor(model => model.Forename, new { style = "width:150px" })
</td>
</tr>
</table>
<div class="ui-widget-content Rounded" style="width: 565px; margin-top: 10px; text-align: center;">
<input id="Cancel" type="button" class="dialog-button" value="Cancel" style="margin: 5px" />
<input id="DoSaveUser" type="submit" class="dialog-button" value="Save User" style="margin: 5px" />
</div>
</div>
}
Javascript code for Save User on the dialog being clicked - submit the form.
$(function () {
$('#saveForm').submit(function () {
var formData = $("#saveForm").serializeArray();
$.ajax({
url: this.action,
type: this.method,
data: formData,
dataType: "json",
success: function (result) {
$('#resultContainer').html(result);
}
});
return false;
});
});
Now in My DoSaveUser method in my controller which I can set a breakpoint and hit and see all the values being sent in correctly for the corresponding fields - once I have saved to the DB this is return.
return PartialView("UserSuccess", model);
And this is all that view contains in the cshtml..note what I wanted was the result container Div which contains all my textbox fields and labels to be replaced with User Created successfully. And then I will need an ok on this page which on clicking will close the dialog box and refresh the UserList page and show the datatable updated with the new user. However when I click save the textboxes just stay on the Div and the Div does not get changed - but if I then cancel the dialog and refresh the page I can see the datatable updated with my new user. Is there something I am missing? (note - i have added jquery.unobtrusive-ajax.js to my _Layout page)
#model MyProject.Models.UserModel
#{
ViewBag.Title = "UserSuccess";
}
<div id="resultContainer">
User Created Successfully
</div>
Are you sure that your initial html do have a #resultContainer div? If you don't the
$('#resultContainer').html(result);
line won't match anything. If you do on the other hand, you will get duplicate nested #resultContainer divs which is also an error (id must be unique).
The right way to do it is to add an empty div in your original html:
<div id="resultContainer"></div>
And in your view output just the content to go inside the div.
#model MyProject.Models.UserModel
#{
ViewBag.Title = "UserSuccess";
}
User Created Successfully
I have to say what you are doing is not a good way of using dialog and partial view in ASP.NET MVC applications. I can give you some simple code to show an idea:
If list.cshtml is a list of users page, and edit.cshtml is a partial view that has an edit form in.
On list page:
$(".grid-row .edit").click(function(){
editUser($(this).attr("data-id"));
});
function editUser(id){
var $dialog=$("#dialogEditUser");
if($dialog.length == 0){
$dialog=$("<div id='dialogEditUser'>").appendTo("body");
}
$dialog.dialog({
...
open:function(){
$dialog.load("/user/edit/"+id, function(){
//todo: handle form events
});
}
});
$dialog.dialog("open");
}
You can also make the open dialog function in a static method, like:
MvcSolution.Dialog = function (id, title, options) {
var $dialog = $("#" + id);
if ($dialog.length == 0) {
$dialog = $("<div id='" + id + "' class='dialog' title='" + title + "'></div>").appendTo("body");
}
$dialog.dialog(options);
$dialog.dialog("open");
};
You can find a good c# and js framework for MVC here
I have a issue with Jquery Modal dialog being called from a button inside an update panel..
here are the insights..
Javascript used for opening a Jquery modal dialog in aspx page..
<script type='text/javascript'>
function openModalDiv(divname) {
$('#' + divname).dialog({
autoOpen: false,
bgiframe: true,
closeOnEscape: true,
modal: true,
resizable: false,
height: 'auto',
buttons: { Ok: function () { closeModalDiv(divname) } },
open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
});
$('#' + divname).dialog('open');
('#' + divname).parent().appendTo($('form:FrmSearch'));
$('#' + divname).css('overflow', 'hidden')
}
function closeModalDiv(divname) {
$('#' + divname).dialog('close');
}
</script>
the button in aspx page..
<asp:UpdatePanel ID="upDialogs" runat="server">
<ContentTemplate>
<asp:Button ID="btnOpenDialog" runat="server" Text="Open Dialog" onclick="btnOpenDialog_Click" />
</ContentTemplate>
</asp:UpdatePanel>
The Div which needs to be called from code behind via javascript..
<div id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
Finally the code behind ..
protected void btnOpenDialog_Click(object sender, EventArgs e)
{
if (ProfileID == null)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
}
}
Now the Issue in detail..
Without the update panel the modal dialog pops very fine but makes full post back..
I want to have only a partial post back and hence am using a update panel..
The following are the solutions I have tried..
Added update panel to the existing div, dint work.
added an update panel along with runat="Server" for the div, still dint work..
Can any one help me with possible solutions?
Thanks for your quick reply but I found another solution.
I added both update panel and runat parameters to the Div.
<asp:UpdatePanel ID="upErrorDiv" runat="server"><ContentTemplate>
<div runat="server" id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
</ContentTemplate></asp:UpdatePanel>
Changed the code behind as.
if (ProfileID == null)
{
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
return;
}
Could you try injecting the javascript into a Literal control inside UpdatePanel, istead registering it with ClientScriptManager ?
Kris
I'm using Jquery dialogs in my Asp.net web application for all my messages.
Now I've tried to fill a listview with customers inside a dialog and its working, but I want to allow the user to use paging in the listview for choosing his customer out of the list.
When I press the button to move up 1 page, it ain't working...
Maybe it's just not possible? Or does someone have an example of paging a datacontrol in a Jquery dialog?
Greetz,
Ben
I suspect that the dialog is not being displayed after the paging postback?
You have two options:
One: Change to using a popup window with the listview so that the paging is handled in the normal way in its own page
Two: On the serverside, when rendering pages, also render a startup jQuery script that re-displays the dialog.
<div id="dialog" style="display:none;" >
<asp:listview ID="lv" runat="server" />
...etc
</div>
In code behind:
var script = new StringBuilder();
script.AppendLine("jQuery(function($) {");
script.AppendLine(string.Format(" $('#dialog').attr('Title','{0}');", dialogTitle));
script.AppendLine(" $('#dialog').dialog({ closeOnEscape: true, modal: true });");
script.AppendLine("});");
ClientScript.RegisterStartupScript(GetType(), "dialog", script.ToString(), true);
The 2nd option works!
I only added this code in codebehind:
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "openDialogScript", "$(function() { openCustomerDialog(); });", true);
And in the .aspx file I added this:
openCustomerDialog = function openDialog(){
$("#reportCustomerDialog").dialog({
modal: true,
height: 420,
width: 500,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
$("#dialog").show();
};