I am developing my first Ruby on Rails real application, and I want to achieve a very simple task:
I have an input in my view, whose value represents a field of one of my models. I want to, via ajax, update this field in my model when the user changes the value of the input.
How can I do that?
Thanks a lot
html code:
Product#View
...
Stock: <input type="text" name="p[stock]" placeholder="Stock" value="<%= #product.stock %>" /><br>
...
controller:
def view
#product = Product.find(params[:id])
end
Related
To be more specific, I am creating a character sheet for Pf2e for a project. I have a 'Character Schema' which includes all of my various inputs (normal text/number, checkboxes, and textarea inputs). I can get it to work with 1 input, but I'm sure there is an easier way than writing the following:
<% if(characterData.length === 1){ %>
<input class="larger-input" id="id1" type="text" placeholder="" name="ancestry" value="
<%= characterData[0].ancestry %>">
<% } else { %>
<input class="larger-input" id="id1" type="text" placeholder="" name="ancestry" value="">
<% } %>
Basically, if the user has never "saved" data before I was getting an ejs error. So the previous code says 'if there is data, show it, else show an empty field'. Im really new at all this and I know some other frameworks help, but I am doing this with strictly vanilla JS, Node(Express + mongoose) and EJS.
The code can be found here https://github.com/TartCodes/main-character-manager
First post on here, sorry for the length! Any help is appreciated!
In my jsp file I generate dynamically multiple input tags, trough a database. I'd like to know the values of each. I've tried doing it in Javascript, but according to some answers in this website this is not possible.
Example:
<input type="number" id="age" class="v">
<input type="text" id="name class="v">
...
And on the jsp side I'd like to get:
"age" => 18
"name" => "Joe"
Any ideas on how to achieve this?
Edit
In case you are wondering, my Javascript is fairly simple, I can get all the values I need simply by doing:
var chars = document.getElementsByClassName("v");
EDIT 2
My (simplified) JSP looks something like this:
<%= session.getAttribute("chars")%>
<form action="hello" method="POST">
<c:forEach items="${chars}" var="ch">
<input type="number" id="${ch}" class="v">
</c:forEach>
<input type="submit">
</form>
"chars" is an array that was created through calls to the database, this array is displayed and created dynamically.
So what I want to do is pass all those values, like ("age" => 18) to another my hello servlet, so I can work on that info. For example if the value of the inputs is something like this:
//ID value
"age" => 18
"name" => "Joe"
On hello I should have access to that.
Using pure JavaScript you can get the field values using querySelector which allows you to retrieve properties from multiple elements with the same class identifier
document.querySelector('.v').value;
You will then have access to both field values via js. To read those values using jsp you the JavaScript will need to be included within the same file. You can do something like:
JSP:
You will need to add the HTML Name="myFieldName" to the input fields.
<%= request.getParameter("myFieldName") %>
If you are in a form, you could use a POST method to submit the datas of the different inputs inside your form.
Here is a previous post on StackOverlow that might help you get the datas you want :
How can I get form data with JavaScript/jQuery?
I am building a search form that has a text input and a submit button (doh!). My routes.rb file contains:
get ':dependency', to: 'pages#dependency'
This means that whatever I put after / will route to PagesController#dependency, having params[:dependency] set to whatever string is set in the URL.
I would like to build a form that, upon submission, will go to /<value-from-text-input>, dynamically using the value supplied in the text input. How can I do this? It would be great if I don't have to use JavaScript.
Yeah this is a simple form action.
<form action="/" method="get">
<input type="text" name="dependency"/>
</form>
Because Rails is configured on the root '/' this will submit the form at a get action, appending the values to the end as a query string, which rails then converts to the cleaner route.
below is my html
<div class="container page" ng-controller="Homectrl" style="margin-top:8px;">
<form id ="form" novalidate class="simple-form" >
<input type="text" ng-model = user.name name="id"/>
<button ng-click="init(user)">update</button>
</form>
</div>
and js
$scope.init = function(user) {
alert(user); }
I am trying to take the user input to the query dynamically through the controller.
So I tried to get the value in angular js page but I am getting object object in alert. Please suggest me how to take the user input to the angular js and from the controller dynamically, My sql query is Select * from customer where id =? , so I need to replace the question value with user input, using angular js and spring controllers.
Thanks
Your input value is already in sync with your model, since you use ng-model. Therefore you don't need to pass it to the init function. You can try something like this to alert user name:
HTML
<div class="container page" ng-controller="Homectrl" style="margin-top:8px;">
<form id="form" novalidate class="simple-form" >
<input type="text" ng-model="user.name" name="id"/>
<input type="button" ng-click="init()" value="Update"/>
</form>
</div>
JavaScript
angular.module('app',[]).
controller('Homectrl', function($scope) {
$scope.init = function() {
alert($scope.user.name);
}
});
Plunker: http://plnkr.co/edit/JiWFnL6EFthfRjeeJocu?p=preview
If you want to make a REST call to some server-side API consider look into $http or $resource
Your code is working fine. You are already able to pass the user object in the init function in the controller. Since you are showing the object as alert, you are able to see it only as [object, object].
You can instead use console.log(user) to see the changes in the function. There you will see the user object.
Or alert(user.name) or alert(JSON.stringify(user)). The last one will show all properties and values in quotes.
I am populating a form dynamically with objects, allowing a new field to be edited, and then trying to submit the form to another list of a different object type.
I am currently using an Ajax form to do this, but the <label for=> attributes are not being sent to the partial view result along with the other attributes.
My controller partial view result is as follows:
[HttpPost]
public PartialViewResult AddToOrder(IList<OrderItemModel> form_list)
{
// do something
}
The Ajax form in my view is as follows:
#using (Ajax.BeginForm("AddToOrder", "Order", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "result" }))
{
for (int i = 0; i < Model.Count; i++)
{
<tr>
<input type="hidden" name="form_list[#i].item_id" value="#Model[i].id" />
<td><label for="form_list[#i].description">#Model[i].description</label></td>
<td><label for="form_list[#i].price">#Model[i].price</label></td>
<td><input type="text" name="form_list[#i].quantity" value="0" /></td>
</tr>
}
<td><input type="submit" value="Add to order"/></td>
}
If I duplicate my labels as <input type="hidden"> attributes, all the fields I need are sent to the partial view result, but is there a better way to do this maybe using jQuery instead of an Ajax form?
Labels are never submitted with an HTTP POST. Only <input>, <select> and <textarea> elements are.
If you want to pass those values back, you can use hidden input fields as you are now doing.