1

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: "xyz@abc.com", 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.

Rev99
  • 35
  • 7
  • 1
    Can you check the logs for the request and see which format is requested? – Vishal Jain Jun 06 '22 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 Jun 06 '22 at 18:13

2 Answers2

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>
Pedro Augusto Ramalho Duarte
  • 376
  • 2
  • 10
  • I have installed Jquery in my rails 6.1 application following the [link](https://stackoverflow.com/questions/54905026/how-to-add-jquery-third-party-plugin-in-rails-6-webpacker) . 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("
     – Rev99 Jun 07 '22 at 09:59
  • @Rev99 can you send me the response from terminal logs? – Pedro Augusto Ramalho Duarte Jun 07 '22 at 23:22
  • In my project i choose to do this with ajax request, i will update my answer to be more complete – Pedro Augusto Ramalho Duarte Jun 07 '22 at 23:26
  • 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 Jun 09 '22 at 10:57
  • 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 Jun 09 '22 at 11:01
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.

Rev99
  • 35
  • 7