Hi; i have a problem. i want to open a popup(Jqueryui popup) on webpage. But i can not. How to make it correctly?
View:
grid.Column("", format: (item) => Html.ActionLink("Click", "", "", new { #customerId = ConvertUtil.ToInt(item.Id) }, new { #class = "popupLink" })),
OR
grid.Column("", format: (item) => Html.ActionLink("Click", "Edit", "Customer", new { #customerId = ConvertUtil.ToInt(item.Id) }, new { #class = "popupLink" })),
Jquery Code:
$(".popupLink").click(function () {
jQuery('#dialog').dialog('open');
});
Controller
public ActionResult Edit()
{
return View();
}
i need also id value. Not only popup. i wan to open Edit Pop up. How to open edit popup any row?
First of all, you need to stop default action of the click event
$(".popupLink").click(function (e) {
$('#dialog').dialog('open');
e.preventDefault();
});
That will show empty dialog (of course if you have #dialog container in your view).
Before showing the dialog you must load proper view. I would do this like that:
var url = $(this).attr('href');
$('#dialog').load(url);
Finally, the whole solution:
$(".popupLink").click(function (e) {
$('#dialog').load($(this).attr('href'));
$('#dialog').dialog('open');
e.preventDefault();
});
The following solution can be reused on an ActionLink without modifying the source document. It also won't show the dialog until the loading is complete:
$("a.popuplink").live("click", function (evt) {
evt.preventDefault();
$("<div></div>").insertAfter(this);
$.ajax({
url: this.href,
context: this
}).done(function (data) {
$(this).next('div').html(data);
$(this).next('div').dialog();
});
});
Related
How would I implement something like automatic postback for DropDownListFor in MVC. Currently, after selecting a value in dropdown I have to refresh the page to see the changes applied to the page.
In View,
The dropdownlistfor is like
#Html.DropDownListFor(m => m.SelectedItem, Model.MyItemList, new { #id = "DropDownListForId"})
and the onchange event is handled as such
<script type = "text/javascript">
$(function () {
$('#DropDownListForId').change(function () {
var item = $(this).val();
$.ajax({
url: '#Url.Action("SomeAction", "SomeController")',
type: 'GET',
data: { value: item },
success: function(result) {
}
});
});
});
</script>
Thanks!
I think you can simply achieve this by submitting form on change event of DropDownList
Assuming myForm as you form id
<script type = "text/javascript">
$(function () {
$('#DropDownListForId').change(function () {
$('form#myForm').submit();
});
});
</script>
I have a list of div's.
When I click on a button in a div I switch div content with partial view which contain form.
This is code that happens when I click on that button:
#Html.ActionLink("edit", "EditUserLanguage", "UserLanguage", new { userLanguageId = Model.UserLanguageId }, new { #class = "editButton" })
...
$(document).on('click', '.editButton', function (e) {
$.ajax({
url: this.href,
cache: false,
success: function (html) {
var id = $(e.target).closest("div").attr("id");
$("#" + id).empty();
$("#" + id).append(html);
}
});
return false;
});
Html (partial view) that I add has:
#using (Html.BeginForm("UpdateUserLanguage", "UserLanguage", FormMethod.Post, new { id = "updateUserLanagegeForm" }))
{
...
This main view where is the list of div's and where I add this new partial view I have this code:
$(function () {
$('#updateUserLanagegeForm').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
alert("work");
}
});
return false;
});
}); //update
When I click on submit action method is invoked and I get new partial view returned but not via ajax.
I only get that partial view returned. alert("work"); is never called.
What could be the reason that this ajax call doesn't work?
submit handler is not being attached to form as form gets loaded after dom ready. So change your code to -
$('body').on('submit','#updateUserLanagegeForm',(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
alert("work");
}
});
return false;
});
This will attach handler to form even if it is added dynamically.
The first parts of the jquery call inside the document.ready is pseudo code. How can I do the $('.mainLink').each().click() correctly so that all links with class name mainLinks inside the NavigationPanel are bound to the click event. Is it bad to not use an id for a link?
$(document).ready(function () {
$('.mainLink').each().click(function (e) {
e.preventDefault();
$.ajax({
url: this.href,
beforeSend: OnBegin,
complete: OnComplete,
success: function (html) {
$('#ContentPanel').html(html);
}
});
});
});
<div id="NavigationPanel">
#Html.ActionLink("1", "Index", "First", null, new { #class = "mainLink" })
#Html.ActionLink("2", "Index", "Two", null, new { #class = "mainLink" })
#Html.ActionLink("3", "Index", "Three", null, new { #class = "mainLink" })
</div>
Just do $('.mainLink').click(function (e) { which should bind all links with class .mainLink
If you want all links inside div ID NavigationPanel then try below,
$('.mainLink', $('#NavigationPanel')).click(function (e) {
If you just want to bind to all .mainLink within #NavigationPanel, the following works:
$("#NavigationPanel").on("click", ".mainLink", function(e){
e.preventDefault();
$.ajax({
url: this.href,
beforeSend: OnBegin,
complete: OnComplete,
success: function (html) {
$('#ContentPanel').html(html);
}
});
});
With asp.net mvc we can do an ajax call like this:
#{
var ajaxOpts = new AjaxOptions { UpdateTargetId = "main-content", OnBegin = "fctTabLoading", OnComplete = "fctTabLoaded", InsertionMode = InsertionMode.Replace };
}
#Ajax.ActionLink("my link text", "MyAction", "MyController", new { id = Model.RequestID }, ajaxOpts)
Which produce the following html:
<a data-ajax="true" data-ajax-begin="fctTabLoading" data-ajax-complete="fctTabLoaded" data-ajax-mode="replace" data-ajax-update="#main-content" href="/MyController/MyAction/19">my link text</a>
Now I would like to execute the same ajax call but from jQuery and I don't know how to proceed!
I would like something like:
$.ajax({
type: "Post",
url: myURL,
begin: fctTabLoading,
complete: fctTabLoaded,
mode: "replace",
update: "#main-content",
cache: false,
success: function () { alert('success'); }
});
I know the above ajax script won't work because 'mode' and 'update' are not recognized. So I am blocked.
It drives me crazy :(
Why I cannot use the MVC ActionLink? Because I first need to show a jquery dialog to let the user confirm then only do the ajax call in order to refresh a specific div on my page.
Any help is greatly appreciated.
Thanks.
You could start by replacing your Ajax link with a normal link:
#Html.ActionLink(
"my link text", // linkText
"MyAction", // actionName
"MyController", // controllerName
new { id = Model.RequestID }, // routeValues
new { id = "mylink" } // htmlAttributes
)
which will produce the following markup:
my link text
and then in a separate js file unobtrusively AJAXify it:
$(function() {
$('#mylink').click(function() {
$.ajax({
url: this.href,
type: 'POST',
beforeSend: fctTabLoading, // corresponds to your OnBegin callback
complete: fctTabLoaded, // corresponds to your OnComplete callback
success: function(result) {
$('#main-content').html(result);
}
});
return false;
});
});
As you know, the Ajax.ActionLink uses jquery.unobtrusive-ajax.js to execute the ajax links.
If you look at that file, you will see that the event handlers use jquery's live event binder. This binds the event listener to the document object. So, if you wanted to confirm before this event was triggered, you could bind directly to the element like the following:
$('#YOUR_ELEMENT').click(function () {
var confirmed = confirm("CONFIRM_MESSAGE");
if (!confirmed ) {
return false;
}
return true;
});
To use jquery dialog you could do the following:
function confirmDialog () {
$('#YOUR_DIALOG').dialog(
{ buttons: { "Ok": function() { return true; },
{ "Cancel": function() {return false;}
}
});
}
and then you would set confirmed in the previous function to confirmDialog().
***The dialog options may not be exactly what you want, but this should get you going.
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');
}
}
});