Rails JQuery and Ajax not working properly for me?

So what I have essentially is a show page for a business model that shows the respective info for the business. What I have done is create an edit button that basically shows the form for the respective fields and hides the actual info. However, the problem I am running into now is that when I make edits and submit the form, the information is not getting "refreshed" I have to manually refresh the page to see the changes. I am still very new to this and infact have only recently started on rails and would love to know what I am not doing right. I am following a youtube video that explains Jquery and Ajax but im making some changes to try and get it to work according to what I need.

Show View Page

<%= form_for(@business, remote: true) do |f| %>
    //.... omited for clarity

                        <div id="business-info-section">
                            <h4><%= @business.name %></h4>
                            <p><%= @business.description %></p>
                        </div>

                        <!-- This will display only when the edit button is clicked (SHOW THE BUIZ FORM FIELD) -->
                        <div id="business-info-section-edit">

                              <div class="field">
                                <%= f.text_field :name, class:"form-control" %>
                              </div>
                              <div class="field">
                                <%= f.label :description %><br>
                                <%= f.text_area :description , class:"form-control" %>
                              </div>

                        </div>
                    </div>
                </div>

            <div class="col-md-9">
                <!-- show option only if curr user == show profile user -->
                <%= image_tag @business.header_img.url(:large), class:"center-block", id:"header_img" %>

              <div class="row edit-btns">
                <div class="col-md-12">
                    <!-- this is the edit profile button that toggles jQuery methods -->
                    <%= link_to 'Edit Profile', "#", class: "btn btn-primary pull-right", id: "edit-profile-btn" %>
                    <%= f.submit 'Save Profile', class: "btn btn-primary pull-right", id: "save-profile-btn" %>
                </div>
                </div>

Business Controller

  def update
    if @business.update(business_params)
      respond_to do |format|
        format.html { redirect_to @business, notice: 'Business was successfully updated.' }
        format.js #render businesses/update.js.erb
      end
    else
      render :edit
    end
  end

businesses/update.js.erb file

$('#business-info-section').append('<%= j render user_profile_path(@business.user_id, @business.user.email) %>');

Answers 1

  • Change this section of your form -

    <div id="business-info-section">
      <h4><%= @business.name %></h4>
      <p><%= @business.description %></p>
    </div>
    

    to this -

    1. Create a partial: _business_detail.html.erb

      <h4><%= @business.name %></h4>
      <p><%= @business.description %></p>
      
    2. Now render the above partial in the form -

      <div id="business-info-section">
           <%= render 'business_detail'%>
      </div>
      

    update your businesses/update.js.erb file to this -

    $('#business-info-section').html('<%= j render 'business_detail' %>');
    

Related Articles