jquery Ajax asynchronously saves data

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.