I want to refresh page when close the dialog? Is this possible? How can I do this?
There are links that opens the their own dialog. But When I clicked first time any link, dialog cache it's id, And then I clicked others, link id always same (first clicked id).
Should I refresh the page when close the dialog or Is there another way to fix this problem.
I use codes in below for opening dialog:
#foreach (var item in Model)
{
<tr>
<td>#Html.ActionLink(linkText: item.musteri_adi,
actionName: "MusteriDuzenle",
controllerName: "Musteri",
routeValues: new { sno = item.sno },
htmlAttributes: new { #class = "open_dialog", data_dialog_title = item.musteri_adi })
</td>
<td>#Html.DisplayFor(x => item.fatura_adresi)
</td>
</tr>
}
Thanks. And sorry my poor english :)
You can use beforeClose event to call a function to refresh your page.
$( "#myDialog" ).dialog({
beforeClose: function(event, ui) {
window.location.reload();
// or you can use window.location = 'mypage.html';
}
});
Related
I have been struggling with this one for a few days now and I thought I would put it out there and see if anyone can help. I have an MVC4 Application and I'm using the JQuery Tabs as a Menu. I have implemented this by returning partial views into the tabs. The problem is that I have no browser history and I have not maintained the MVC RESTful pages "{controller}/{action}/{id}" can anyone help me in figuring out if there is a way to change the URL based upon what the tab is clicked?
<div id="tabs">
<ul>
<li>#Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new { title = "HouseholdInfo" })</li>
<li>#Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new { title = "HouseholdManagement" })</li>
<li>#Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new { title = "HouseholdApproval" })</li>
<li>#Html.ActionLink("Household Administration", "Index", "HouseholdFeesAdministration", null, new { title = "HouseholdAdministration" })</li>
</ul>
</div>
and
$("#tabs").tabs({
cache: false,
spinner: 'Loading task...',
beforeLoad: function(event, ui) {
ui.jqXHR.error(function() {
ui.panel.html(
"Loading...");
});
},
collapsible: false
});
You can do this with JavaScript as an anchor/hashing solution like so. Firstly, change the hash of the URL when a tab is selected.
$("#tabs").bind("tabsselect", function (event, ui) {
window.location.hash = ui.tab.hash;
});
Create a function to react to the current hash:
function setCurrentTabFromHash() {
$("#tabs").tabs("select", window.location.hash);
}
Call that function from:
$(document).ready(function () {
setCurrentTabFromHash();
});
And:
$(window).hashchange(function(){
setCurrentTabFromHash();
});
Alternatively, you could integrate Ben Alman's fabulous BBQ plugin for asynchronous browser history, as seen here:
http://benalman.com/projects/jquery-hashchange-plugin/
I hope this helps, and good luck with your app!
This is not really an answer Its more of an mis-understanding of the use of JS Tabs. I did't end up using the JS Tabs component at all because I think I was misusing them to try and create a menu but I did like their look and feel, so I created a new JS class that dynamically added the styling of the JS TABS component to my own menu. I lost all the ajax bit and caching ect... but I think this was a better solution for my needs.
JS Extension:
(function ($) {
$.fn.tabmenu = function() {
// Plugin code
return this.each(function() {
$(this).addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
$(this).find("ul").addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
$(this).find("li").addClass("ui-state-default ui-corner-top")
.bind('mouseenter', function () {
$(this).addClass("ui-state-hover");
})
.bind('mouseout', function() {
$(this).removeClass("ui-state-hover");
});
$(this).find("#main").addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$(this).find("a").addClass("ui-tabs-anchor");
var parts = window.location.pathname.split("/");
for (i = 0; i < parts.length; i++) {
$("a[title*='" + parts[i] + "']").parent().addClass("ui-tabs-active ui-state-active");
}
});
};
})(jQuery);
In my MVC LAYOUT page I added the following code.
<script>
$(function() {
$("#tabsmenu").tabmenu();
});
</script>
<div id="tabsmenu">
<ul>
<li>#Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new {title = "HouseholdInfo"})</li>
<li>#Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new {title = "HouseholdManagement"})</li>
<li>#Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new {title = "HouseholdApproval"})</li>
<li>#Html.ActionLink("Household Administration", "Index", "Administration", null, new {title = "HouseholdAdministration"})</li>
</ul>
<div id ="main">
#RenderBody()
</div>
</div>
I am having a kendo UI Splitter with left pane and right pane. In the left pane I have kendoui Panel bar which consists of links to different reports. Now onclick of any link I am trying to open the report page in right pane by making use of iframe. But for some reason report page is opening in a new window.
Sample Anchor tag from one of the links in Panel bar
<a class="right" target="reportDisplayPane" title="MyTitle" href="reports/params.aspx?rt=Basic Reports&rn=My Report">My Report</a>
MVC View code with Kendo Ui Splitter, Kendo Ui Panel bar and I frame.
#(Html.Kendo().Splitter()
.Name("splitter")
.Orientation(Kendo.Mvc.UI.SplitterOrientation.Horizontal)
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.Size("20%")
.HtmlAttributes(new { id = "left-pane", style = "height:100%;" })
.Collapsible(true)
.Content(#<div class="pane-content">
<div id="navigation">
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(Kendo.Mvc.UI.PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "width:100%;height:100%;" })
.Items(panelbar =>
{
foreach (var category in Model.MyModel.Categories)
{
panelbar.Add().Text(category)
.Items(reports =>
{
foreach (var report in Model.MyModel.Reports)
{
if (report.Category.Equals(category))
{
reports.Add().Text(report.NavigateURL).Encoded(false);
}
}
});
}
})
)
</div>
</div>
);
horizontalPanes.Add()
.Size("80%")
.HtmlAttributes(new { id = "right-pane",style = "height:100%;"})
.Collapsible(false)
.Content(#<div class="pane-content">
<iframe id="reportDisplayPane" ></iframe>
</div>);
})
Please suggest on what might be wrong here.
Achieved it using below.
var onSelect = function (e) {
var iframeUrl = 'reports/maypage.aspx?rt=Myreports&rn=' + e.item.innerText;
$('#reportDisplayPane').attr('src', iframeUrl);
};
var panelBar = $("#panelbar").kendoPanelBar({
select: onSelect
});
Given the following script:
$(function () {
$(".editLink").button();
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$(".editLink").click(function () {
var dialogDiv = $('#editPersonDialog');
var linkObj = $(this);
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updatePersonForm");
// unbind existing validation
$form.unbind();
$form.data("validator", null);
// check document for changes
$.validator.unobtrusive.parse(document);
// re-add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
// open dialog
dialogDiv.dialog('open');
});
return false;
});
});
function updateSuccess() {
if ($("#update-message").html() == "True") {
$('#editPersonDialog').dialog('close');
$("#commonMessage").html("Update Complete");
$("#commonMessage").delay(400).slideDown(400).delay(3000).slideUp(400);
}
else {
$("#update-message").show();
}
}
If I click the "X" button on the dialog the form closes fine. If I click the "Close" button then it does not close. I have verified that the code for the "Close" button is being called.
Both the "X" button and the "Close" button are both running the same statement: '$(this).dialog('close');'. Why would one work and the other not work?
As an aside the dialog will not open a second time unless I refresh the page. I imagine that these 2 problems may be related.
I have found many people with similar problems and a number of different solutions that worked for them. Unfortunately none of them worked for me.
Further Info:
The dialog displays a partial view in an Ajax form:
#using (Ajax.BeginForm("Edit", "Person", null,
new AjaxOptions
{
UpdateTargetId = "update-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "updateSuccess"
},
new { #id = "updatePersonForm" }))
{
#Html.ValidationSummary(true)
<div id="update-message" class="hiddenDiv"></div>
<div class="blockGraygradient">
#Html.Partial("_CreateEditCommon")
#Html.HiddenFor(model => model.SelectedPerson.Id)
#Html.HiddenFor(model => model.SelectedPerson.RowVersion)
#Html.HiddenFor(model => model.SelectedPerson.CreateTime)
</div><p/>
}
Try using this instead.
$(this).dialog('destroy');
We had exactly the same problem. In the end, every time you re-opened the dialog it was actually re-injecting the dialog markup into the DOM. Then, when you click close (for the second time) it only closes the first occurrence of the dialog, but not necessarily the one that's open. You can check this using a run-time DOM inspector like FireBug or Chrome's built-in developer tools.
I found out that the cause of both problems (the close button not working and being unable to show the dialog more than once without refreshing the page) was that I had included references to my script files in both my main page and the partial view being displayed by the dialog. Once I removed the script references from the partial view the problems disappeared.
(As an aside this has now raised another problem to do with an Ajax update back onto the main page when the dialog is closed. I think this is the reason that I put the scripts into the partial view in the first place).
You have too much recursion. You don't need to subscribe to the close event of your jQuery dialog and invoke $(this).dialog('close'); inside it. Simply comment this line or remove completely the close event subscription:
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
}
});
I have a primary form defined and nicely laid out, it does what it needs to do...
#{ Html.BeginForm(); }
#Html.ValidationSummary(false)
#Html.AntiForgeryToken()
#Html.EditorFor(model => model)
<h2>Properties</h2>
<hr />
#* I want to put some stuff here... *#
<br class="space" />
<div class="clearfix">>
<button type="submit" data-bind="click: save">
Save
</button>
</div>
#{ Html.EndForm(); }
Now, then. This model (or ViewModel, rather) has an IList<PropertyViewModel> attached to it.
A PropertyViewModel has its own set of validations. They are pretty simple for now, but there is a chance that later there will be more complicated uses for this setup.
I am using KnockoutJS for my viewModel consistency. Though I suppose it is fairly irrelevent. I want to display a second form in a jQuery UI Dialog and return the result, essentially..
<script type="text/javascript">
var viewModel = {
name: ko.observable(),
description: ko.observable(),
properties: ko.observableArray(),
save: function () {
alert(ko.toJSON(viewModel));
},
includeProperty: function () {
$("#dialog").dialog({
width: 500,
closeText: '',
resizable: true,
buttons: {
'Submit': function () {
$(this).dialog('close');
callback( #* I want the new data to get sent back *# );
},
'Cancel': function () {
$(this).dialog('close');
return false;
}
}
});
}
};
function callback(value) {
alert(ko.toJSON(value)); // (I will push the new property to the viewmodel here)
}
ko.applyBindings(viewModel);
</script>
However, I am not really sure how to actually put the EditorTemplate into the dialog, moreover I am not sure how to get the data back out of it.
I don't completely understand your question, but from what I understood what you are trying to do is pass data to the dialog and retrieve data from the dialog. If that is the case then this may be useful:
http://api.jquery.com/jQuery.data/
Here is detailed example on how to use:
Passing data to a jQuery UI Dialog
I was experimenting with jQuery UI and MVC3 and I stumbled upon the following issue:
I have very basic page that uses AJAX
<%: Ajax.ActionLink("Edit", "Edit", new { id = 1 }, new AjaxOptions() { UpdateTargetId = "dialog", OnSuccess = "DisplayPopup" }, null)%>
<div id="dialog" title="Location">
</div>
This is the controller code:
public ActionResult Edit(int id)
{
return PartialView();
}
[HttpPost]
public ActionResult Edit()
{
return Content("Saved!");
}
and partial view edit:
<b>whatever</b>
<% using (Ajax.BeginForm("Edit", "Home",
new AjaxOptions()
{
UpdateTargetId = "editForm",
HttpMethod = "POST"
}))
{%>
<div id="editForm">
<input type="submit" value="Save" />
</div>
<% } %>
the code above works fine.
now I add the jquery UI popup code:
<script type="text/javascript">
function DisplayPopup() {
$('#dialog').dialog('open');
}
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
</script>
after that in Firefox and Chrome it works fine, whereas in IE8 I see the following issue:
click edit - makes AJAX call to Edit(int id) action and shows the edit view inside a popup
click save - makes AJAX call to Edit() and shows the text "Saved!"
close the popup
click edit - AJAX call to Edit(int id) - again
click save - this time it makes FULL postback (only in IE)
any ideas?
Thanks!
Try this seeing it works the first time but not the second. Create the dialog new every time and destroy it when you are done.
<script type="text/javascript">
function DisplayPopup() {
$('#dialog').dialog({
autoOpen: true,
width: 600,
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}, close: function() {
$(this).dialog("destroy");
}
});
}
</script>
I had the same trouble: worked in FF, but not in IE8.
Try adding something to the partial view response.
I was having this same trouble in IE and ended up adding #ViewBag.Message to the partial view response, where ViewBag.Message = "Submitted " + DateTime.Now.ToLongTimeString(); was assigned in the controller on Post.
This suddenly and surprisingly caused the partial view to render in the correct target element instead of loading the view as a new page in IE8.