Asynchronously saves data through jquery. Ajax functions
Practical Examples:
In _form.html.erb:
<input type= "Text" size= "1" class= "edit_position" value= "<%= f.position%>" data-id= ' <%= f.id%> ' > </input>
The data that is accepted by input is saved, and the Data-id custom property means that the value of the f.id is saved so that jquery's. ajax function's URL attribute is used
In App.js:
$ (". Edit_position"). focus (function () {
$ (this). CSS ("Background-color", "#FFFFCC");
});
$ (". Edit_position"). blur (function () {
$ (this). CSS ("Background-color", "#D6D6FF" );
var rooms_subject_id = $ (this). attr ("Data-id");
$.ajax ({
&N Bsp Type: ' Put ',
URL: '/manage/rooms_subjects/' + rooms_subject_id,
CACHE:FA LSE,
data:{
Position: $ (this). Val ()
}, success:function (data) {
alert ("fix Success. "); &NBSP
window.location.reloa D ();
}
});
});
Focus Monitor Mouse Focus input event, Blur monitor mouse input loses focus event,. Ajax is triggered by the mouse loses focus, rooms_subject_id the value of the custom Data-id property is taken by the attr function to the URL: ID, That is, the selected room_id, the event type is put, the URL is the URL of the action that handles the database store information, and note that if the URL is/dsfa/fdsa/:id, the custom attribute in HTML is passed: The value of the ID is spliced with the + number, Data is passed in position corresponding to the params[of data obtained in the action:p Osition], $ (this). Val () to get the input content of the. Edit_position of class. Success for successful functions window.locaton.reload (); Refresh page
In ROOM_SUBJECTS_CONTROLLER.RB:
def update
@rooms_subject = Roomssubject.find (Params[:id])
@rooms_subject. Update (position:params[:p osition])
Render Nothing:true
End
Data params[:p Osition] to persist data in Ajax
Render Nothing:ture is returned nothing otherwise the action must be redirected to a page or the presentation data has its own name. Html.erb corresponding to the page, Ajax is not returned by the page just to save the data, so you want to render anything: True