I have a page with several forms on one page. I have a button (outside all forms) that I want to submit only ONE form, but all form data is getting submitted from all forms.
$("#indiv_save").click( function() {
alert($("#indiv_form").serialize()); // Shows only correct form
$.post("/admin/update", $("#indiv_form").serialize(), function(data) {
notify(data); // quick and easy feedback
});
});
The alert() call shows exactly what I want to submit, but then Firebug shows fields being submitted from all forms after the .post(), even though the serialize() function is identical.
All forms have different names and element ids.
What am I doing wrong?
You are making an ajax POST and returning. Depending on your button, it's going to attempt to submit the page's forms. What you need to do is prevent the default action:
$('#indiv_save').click(function(e)
{
e.preventDefault();
// Your Code Here
});
The default action for your button is probably "submit the form", and you are not preventing it.
Return false from your click function should do it.
The forms can't be inside a single all encompassing <form> tag, they have to be separated out in individual <form>'s instead.
Related
Often I need to edit a single record in a database without the need to display the grid at all. I can hide the grid using CSS or jQuery. What I couldn't figure out is to directly go to the edit form from another webpage while hiding the grid.
I know it's kind of defeating the purpose of having a grid, but it's one of those cases where only a single record should be view and modified by the users similar to the Access single record mode. Is it even possible?
In general you can just hide so named "gbox" created over the grid and then call editGridRow method with the options which you like to have. As the result you will have the form which close to what you want. I am sure that you have to make some other small problems, but the first look can be like you want. Moreover you can scroll over the rows during editing.
The demo demonstrate what I mean. It displays the following form
The demo uses the following code
$("#list").jqGrid({
...
loadComplete: function (data) {
$(this).jqGrid("editGridRow", data.rows[0].id, {
modal: true,
overlay: 0, // create no overlay
onClose: function () {
return false; // don't allow to close the form
}
});
}
}).closest(".ui-jqgrid").hide();
This is one of the reasons I like to use my own custom edit forms, instead of the one built into jqGrid. Then you can just open it like you would from the jqGrid handler (with appropriate parameters of course), no grid required.
I have a hyperlink column in the grid. On clicking the link i have to hide the partialview(grid section) and have to show/load another partialview which is the detail section. Please provide solution
You could use javascript. With jQuery that will correspond to the .toggle() function or the .show()/.hide() functions. So basically you will subscribe to the click event of the link and inside this handler show and hide the respective sections. For this to work you should obviously place those partials inside placeholder divs so that you could show/hide the entire placeholder.
If in addition to showing the partial you need to fetch some fresh information from the server then you could use AJAX to request a controller action that will return the fresh data of the partial view that you will inject into the DOM at the correct placeholder location. In order to send an AJAX request in jQuery you could use the $.ajax() function or directly the .load() function.
I want to preserver state in MVC with js when browse page back. I tried all of the tricks below. None of the alerts appears?
all the alerts will appear if the code is placed in a page of a webform site, but none of them will appear if you place it in a page of a MVC site. In a MVC 3 page, I want to find a place to preserve checkboxes state with javascript WHEN users press the browser's "previous" button.
I can't use server side code such as
How to handle checkboxes in ASP.NET MVC forms? or Maintain state of a dynamic list of checkboxes in ASP.NET MVC because we need embed existing js code
Appreciate any helps with other ideals.
<body onunload="">
<script type="text/javascript">
alert('press previous button, reload1');
alert('press previous button, reload2');
history.navigationMode = 'compatible';
$(document).ready(function () {
//wire up checkboxes. //$("input[name='element12']") //($"input[name="addedFav"]")
// $("input[name='addedFav']").live('change', function (e) {
alert('press previous button, reload3');
});
window.onload = function () { alert('press previous button, reload4'); };
</script>
click me, then press the back button
</body>
It seems like you might have another javascript code block on your page that is throwing an unhandled error. Try checking your browser console for the exact line
..edit..
If all you want to do is store checkbox state, you should try using store.js. You can attach jquery click handlers to the checkboxes that serialize the selected checkboxes and store them. Then on page load you check to see if the store is populated, if so deserialize and select the appropriate checboxes
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery, and that is when my problems start... don't know how to do it yet.
This is how I populate my ddl:
#Html.DropDownListFor(x => x.CurrentCountry,
new SelectList(Model.Countries.ToList(), "Code", "Name"))
and my URL have this format:
localhost/Products/?country=US¤cy=USD&category=17&page=2
How do I add postback functionality to take the selected country?
Thanks.
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery
Not necessary. You could put the dropdown in an HTML <form> and when the user submits this form the selected value will be sent to the server.
If on the other hand you want to transmit the selected value when the user changes selection then you need to use javascript and subscribe to the onchange event. For example if you use jQuery:
$(function() {
// subscribe to the change event of the dropdown
$('#CurrentCountry').change(function() {
// find the containing form and submit it
$(this).closest('form').submit();
});
});
I'm building an MVC3 application and would like to have a form with a dropdown list, and if the option the user requires is not there, then they can click on a link to open a modal popup box, fill a different form out, submit it and close the form, and repopulate the dropdown list which will contain the option they have just added.
I've looked at options of using either jQuery Ajax or MVC Ajax (e.g. Ajax.BeginForm, Ajax.ActionLink). Can anyone recommend the best one to use, and also point me in the direction of a good tutorial? Been having a good look today but can't find anything that really does what I'm looking for.
Thanks
I typically use jQuery in these situations. In this case I would use .ajax() post to perform the form's action. I would then add a handler in the .ajax()'s success event to add my new item to the dropdown using append, example minus all properties except for success handler:
$.ajax({
success: function() {$(myDropDown).append(theNewListItem);}
});
You can generate theNewListItem by having it created and returned from the server in the ajax call, or simly build it using the current form values, assuming the values have been validated.