Situation is : when i select a value from a html.dropdown then i need corresponding values stored in another table at database with in the same view in any manner (keep dropdown visible).My consideration:: Firstly i need to pass selected value of dropdown to some controller action(using jquery handler). then that controller action must return a partial view which i can display on dropdownlist view with the help of Ajax........need some code
You could use javascript to subscribe to the .change event of the dropdown list and trigger an AJAX request sending the selected value to the server. For example assuming you have the following dropdown (with an unique id so that it can be referenced more easily from your javascript files and an HTML5 data-* attribute pointing to the server controller action that will be invoked when the value changes):
#Html.DropDownListFor(
x => x.SomeProperty,
Model.Items,
new {
data_url = Url.Action("Foo", "SomeController"),
id = "myddl"
}
)
in a separate javascript file you could subscribe to the change event:
$(function() {
// When the DOM is loaded subscribe to the .change event of the dropdown list
// with id="myddl"
$('#myddl').click(function() {
// when the value of the dropdown changes fetch the new value
var selectedValue = $(this).val();
// fetch the url
var url = $(this).data('url');
// send the selected value to the server using a AJAX POST request
$.post(url, { value: selectedValue }, function(result) {
// will be called when the AJAX succeeds. Here you could process
// any eventual results sent by the server. For example the server could
// return some JSON object indicating whether the operation succeeded or not
});
});
});
which would invoke the corresponding action:
[HttpPost]
public ActionResult Foo(string value)
{
// at this stage value will equal the selected dropdown value
// so that you can update your database and do whatever you want with it
...
}
Related
I am looping an array of objects. each object has name and address for example. On click event, i want to send the clicked name to the function.
Example: on-click="myFunc('[[item.name]]')"
My current code:
static get template() {
...
<template is="dom-repeat" items="[[users]]">
<a name="[[item.name]]" on-click="myFunc">[[item.name]]</a>
</template>
}
myFunc(name) {
console.log('Clicked name is ', name);
}
How to get the clicked name in the function myFunc ??
The easiest way is to use the API:
When you add a declarative event handler inside the dom-repeat
template, the repeater adds a model property to each event sent to the
listener. The model object contains the scope data used to generate
the template instance, so the item data is model.item
Using that information, you can access your item using
myFunc(event) {
const name = event.model.item.name;
console.log('Clicked name is', name);
}
I am using MVC hmtl helper syntax for textbox i.e.#Html.TextBoxFor(m => m.Id). I have quite lengthy form with multiple textboxes, radio buttons and drop downs.
Problem is that when I am refreshing the page, the values filled in the controls i.e. textbox,dropdown,radio-buttons filled get lost.
How can I avoid this and restore the filled values of the form even if user refreshes the page? Any other method than localstorage/cookies etc.?
you can create your jquery custom method with sessionStorage and you can add it to jquery.fn object to keep your form data even after page refresh
(function($){
// To Load your form values from sessionStorage, and set sessionStorage when value is changed.
$.fn.keepValue = function(name) {
if(!name) {
name= "";
}
return this.each(function() {
var $this = $(this);
var id = $this.attr('id');
var storage_name = namespace + id;
var value;
// Store form changes in a cookie
$this.change(function() {
sessionStorage.setItem(storage_name, $this.val());
});
value = sessionStorage.getItem(id);
// Don't overwrite value if it's already exist
if(!$this.val()) {
$this.val(name + value);
}
});
};
})(jQuery);
$(document).ready(function(){
$('#YourElementId').keepValue();
});
I am using Spring MVC. In my jsp page i have table which inline editable and with every table i have attached one button during edit (when you want to edit then just click on edit button in the dropdown, immediately that row will become editable and edit button will be visible beside that row) so when i will click it, immediately it should save the data of that row to database.
I can do that by providing a link (using tag) with button so when i will click this link, it will match with #RequestMapping in the Controller and from there i will save the data of whole table into database. Now again i have to come back to my previous page so again it will load whole page from database which is very costly.
Can some help me so that only that row id should go to controller and from there it should save into database and i don't have to reload the page again.
You should send your request via Ajax. The page will never reload, and you can choose to reload only a page segment. The easiest way is to use jQuery, bind a method to your links, something like
$("a.saveToDB").click(function(){
var link = $(this);
$.ajax({
url: link.attr("href"),
dataType: "text",
success: function(text) {
// show success message to the user
},
error: function(xhr) {
// show error message to the user
}});
// prevent links default action
return false;
});
The controller method can return a String, e.g.
#RequestMapping(value="/save", method=RequestMethod.GET)
public #ResponseBody String saveToDB() {
// save to DB
return "success";
}
I'm trying to create a single page form to create a 'work item'. One of the properties is a drop down for 'work item type'.
Depending on the work item type, the user may need to provide additional information in a name-value-pair style attributes grid (property sheet).
I would like to dynamically render the property sheet as soon as a work item type is selected or changed. Once the user provides all information, he would click submit to create the 'work item'.
This is what I have so far:
#using (Ajax.BeginForm("AttributeData", new AjaxOptions() { UpdateTargetId="AttributeDataCell" }))
{
<div style="float:left">
#{
Html.RenderPartial("CreateWorkItemPartialView");
}
</div>
<div id="AttributeDataCell" style="float:right">
#Html.Action("AttributeData", new {id = 1})
</div>
}
The AttributeData action in the controller simply renders the partial view:
public ActionResult AttributeData(int id = 0)
{
var attributes = _workItemDataService.ListWorkItemTypeAttributes(id);
return PartialView("EditWorkItemAttributesPartialView", attributes);
}
Now I would like to hook this up to the drop-down-list's selection event so that the partial view re-renders in the above table cell at every selection change. I would like to pass in the selected value as id.
One way is to force the form to submit itself (and thus re-render).
If that is the right approach, how do we go about it? Esp., how do we make only the property sheet to re-render?
If there is a better way to achieve the above, please indicate.
Thanks
You could subscribe to the .change() event of the dropdown and trigger an AJAX request:
$(function() {
$('#Id_Of_Your_Drop_Down').change(function() {
// This event will be triggered when the dropdown list selection changes
// We start by fetching the form element. Note that if you have
// multiple forms on the page it would be better to provide it
// an unique id in the Ajax.BeginForm helper and then use id selector:
var form = $('form');
// finally we send the AJAX request:
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(result) {
// The AJAX request succeeded and the result variable
// will contain the partial HTML returned by the action
// we inject it into the div:
$('#AttributeDataCell').html(result);
}
});
});
});
I'm using the jQuery NotifyBar quite nicely in an Index view to display business rule errors when a user e.g. clicks a delete link for an item than cannot be deleted. However, if the user adds a new item, they are redirected to the Create view. If the new item is successfully created, the Create action redirects back to the Index view.
My quandary is that I need (have been told) to show a success notification in the above scenario. Previously, to request a notification while remaining on the same view, I was using return JavaScript() for an action result, but when I use return RedirectAction() for the action result, I'm left with nowhere to put the return JavaScript().
The way I see this is that I need to:
a) include information in the return RedirectAction() that tells the 'destination' view to show the notification, or
b) invoke the notification in the 'source' view, instead of the return RedirectAction(), and tell it that when it closes/is closed, to perform the redirect to the 'destination' view.
I have no idea where to begin deciding between these two opetions, nor how to even begin researching how to implement either. All advicem and pointers to advice will be most appreciated.
I like option A the best. You could easily include a querystring value with the return url and have a javascript function waiting on the return page that looks for the querystring value... if present, show notification bar.
Submit action on controller:
public ActionResult Submit(ValueModel valueModel) {
//TODO: Save model to repository
//include something in the route values to act as a querystring flag.
//here, I use "success".
return RedirectToAction("Action", "Controller", new { success = 1 });
}
View action on controller:
public ViewResult Index() {
//TODO: do stuff
return View();
}
Index.aspx:
...
<div class='notificationBar'></div>
<script type="text/javascript">
$(document).ready(function() {
if(window.location.search.substring(1).indexOf("success")) {
//set notification bar here
}
});
</script>
...