Re-render partial after x-editable save

Question

I use x-editable to allow the user to associate itself to another model. The styling changes based on what type of model the user is associated to.

Right now, it works, but the css class only changes after I refresh the page.

How would I go about resetting the css class, after x-editable saves the new value?

This is how my input looks like ->

== editable user, :heat_id, url: admin_user_path(user), type: "select", value: (user.heat.level if user.heat), source: Heat.all.map{ | heat | {value: heat.id, text: heat.level} }, class: "#{user.heat.badge if user.heat}"

I'd essentially need to reapply

class: "#{user.heat.badge if user.heat}"

Update

I figured out that x-editable-rails actually had this built in. The solution was to write ->

== editable user, :heat_id, url: admin_user_path(user), type: "select", value: (user.heat.level if user.heat), source: Heat.all.map{ | heat | {value: heat.id, text: heat.level} }, classes: Hash[Heat.all.map{ | heat | [heat.id, heat.badge]}], class: "#{user.heat.badge if user.heat}"

BUT, I still don't know how to change elements after a save using ajax.

For example, what I would like to do is, after a save event, to re-render the partial 'progress'.

How would I go about doing that?

Answer 1

$('.profile_editable').on('save', function(e, params) {
    var progress_value = params.response.progress_value
    $('.progress_title').text("Your profile is " + progress_value + "% completed" )
    $('.bar').css('width', progress_value + '%');
});

Then, pass info in json response -->

  def update
    @common_app = CommonApp.find(params[:id])
    if @common_app.update_attributes(common_app_params)
      respond_to do |format|
        format.html { render :action => "show" }
        format.json { render json: {success: true, progress_value: @common_app.user.progress, user_name: @common_app.user.name } }
      end
    else
       render json: {errors: @common_app.errors}, status: 400
    end
  end