Problem while using AJAX to render a partial code on the same page

Question

I am new to rails. My project requirement is to load a portion of element on the same page with all elemnts as it is before. For this I have used a new route in routts.rb like

get "/sell_used_car/edit", to:"sell_used_car#edit", as: :sell_used_car_edit

The view of my pain page i.e. of "views/sell_used_car/new.html.erb" is like:

  <%= link_to "Change Email",sell_used_car_edit_path, remote: true %>
  <div id = "content"></div>

In the sell_used_car_controller.rb I have included the codes like:

def edit
    respond_to do |format|
        # format.html{}
        format.js
    end
end

In the above code if I using the line format.html{}, I got error like : "SellUsedCarController#edit is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []"

If I commented out that line I got the error like : "ActionController::UnknownFormat"

I have placed the file edit.js.erb and _edit.html.erb in right location and that looks like

edit.js.erb

$('#content').html("<%= escape_javascript(render :partial => 'edit')%>");

_edit.html.erb

<%= form_with do |form| %>
<div class="d-flex align-items-center justify-content-center flex-column">
<div class="mb-3">
    <%= form.label :Enter_Your_New_Email%>
    <%= form.text_field :email,  placeholder: "[email protected]", class: "form-control"%>
</div>
</div>
<%end%>

I know if I include the line format.html{}, the error comes because it can't find the .html.erb file. But I have alredy defined in the edit.js.erb that it sholud render to a partail file. But unfortunately it can't. Also I have used only this line in the controller like

def edit
    respond_to do |format|
        # format.html{}
        format.js {render :edit}
    end
end

But the same error comes as "ActionController::UnknownFormat". I am really stuck here.

Thanks in advance.

Can you check the logs for the request and see which format is requested? — Vishal Jain
– Vishal Jain, Commented Jun 6, 2022 at 16:04
Can you tell me how to check that? In my terminal I found something like "Processing by SellUsedCarController#edit as HTML Completed 406 Not Acceptable in 2ms (Allocations: 630)" — Rev99
– Rev99, Commented Jun 6, 2022 at 18:13

Pedro Augusto Ramalho Duarte · Accepted Answer · 2022-06-07 23:32:45Z

1

With normal link_to you send a html request, probably in console you are getting Processing by SellUsedCarController#edit as HTML.

You need to have rails-ujs and add format: :js in link_to to rails make a ajax request for you installed, for more information: Rails link_to with remote: true processing html instead of js after page refresh.

if you are using more recent version of rails, you can transform you link to into a button make a fetch call via javascript or use turbo to change the content for you.

Example with javascript ajax call:

<button onclick="renderChangeEmail()">
Change Email
</button>

<div id = "content"></div>

<script>
  const renderChangeEmail = () => {
    $.ajax({
      beforeSend: function (xhr) {
        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
      },
      url: '<%= sell_used_car_edit_path %>',
      remote: true,
      dataType: 'script',
      type: 'get',
    })
  }
</script>

edited Jun 7, 2022 at 23:32

answered Jun 6, 2022 at 20:49

Pedro Augusto Ramalho Duarte

4564 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rev99 Over a year ago

I have installed Jquery in my rails 6.1 application following the link . No change in results, but when I included format: :js in the link_to. The page triggered as "/sell_used_car/edit.js" and only js comes as the output like "$('#content').html("<form action=\"/sell_used_car/edit\" accept-charset=\"UTF-8\" method=\"post\"><input type=\"hidden\" name=\"authenticity_token\" value=\"-2mRO6hKFPAcd2SzzHoiE9vDh__VXQmkA-sbL-gp5B9o0C9W7aRwPwpX1Zb0YSSxw\" . Bascially Inner HTML comes as output.

Pedro Augusto Ramalho Duarte Over a year ago

@Rev99 can you send me the response from terminal logs?

Pedro Augusto Ramalho Duarte Over a year ago

In my project i choose to do this with ajax request, i will update my answer to be more complete

Rev99 Over a year ago

After your updated answer I copied and pasted the same code. But in the console it is shown that "dashboard:99 Uncaught ReferenceError: $ is not defined at renderChangeEmail at HTMLButtonElement.onclick ". But I have installed the Jquery correctly. I think the problem with the manifest.json file. Whenever I go to any route I got the warining in the terminal like "Started GET "/packs/js/application-e421b4aa3f716bebdab1.js" for 127.0.0.1 ActionController::RoutingError (No route matches [GET] "/packs/js/application-e421b4aa3f716bebdab1.js"):

Rev99 Over a year ago

At the time of starting this project there is no public/packs/manifest.json file. I created the file manually and put the code

{     "application.js": "/packs/js/application-e421b4aa3f716bebdab1.js",     "application.js.map": "/packs/js/application-e421b4aa3f716bebdab1.js.map",     "entrypoints": {       "application": {         "js": [           "/packs/js/application-e421b4aa3f716bebdab1.js"         ],         "js.map": [           "/packs/js/application-e421b4aa3f716bebdab1.js.map"         ]       }     }   }

This might be the problem

Rev99 · Accepted Answer · 2022-06-24 14:58:44Z

0

I checked many times to ensure Jquery is properly installed or not. Everytime I found that it is installed properly. As per my last comment, the problem lies in the manifest.json file which I had created manually. So my "public/packs/js" folder is never formed. So I created it manually and put "application-e421b4aa3f716bebdab1.js" and "application-e421b4aa3f716bebdab1.js.map" file in the "public/packs/js folder". And now it is running absolutely fine.

answered Jun 24, 2022 at 14:58

Rev99

358 bronze badges

Collectives™ on Stack Overflow

Problem while using AJAX to render a partial code on the same page

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related