Rails file_field not showing dialog to select file

Question

I am developing a rails application in which I have a form_for which has a file_field inside. At first, I didn't use the form_for and when I click on it, it show a dialog to select the file. However, when I started to use the form_for, when I click on it, nothing happens. This is the code:

= form_for n, url: news_path( n ), html: { method: :put } do |f|
  %table
    %tr
      %td
        = f.text_field :title, name: 'news[title]'
      %td.centered{ rowspan: '2' }
        = image_tag news.picture.url(:small), align: 'middle', width: '90', height: '100%'
        = f.file_field :picture, id: 'selectedFile', size: '24', onchange: "readURLprofile(this);", style: 'display:none'
        %input#browseButton.upload_picture{ type: "button", value: "Upload picture", onclick: "selectedFile.click()" }
    %tr
      %td
        = f.text_area :description, name: 'news[description]'
    %tr
      %td{ colspan: '2' }
        = f.submit "Upload", id: 'submit_news', style: 'display:none', rel: news.id
        = link_to '#', id: "save_news#{ index }", title: 'Save', rel: news.id do
          %i.fa.fa-2x.fa-floppy-o
        = link_to '#', id: "close_news#{ index }", title: 'Close', rel: news.id do
          %i.fa.fa-2x.fa-times

Thanks in advance.

EDIT:

This is the resulting HTML code:

<form method="post" id="edit_news_532d6ee6b4f2d7bc06000002" enctype="multipart/form-data" class="edit_news" action="/news/532d6ee6b4f2d7bc06000002" accept-charset="UTF-8">
  <div style="margin:0;padding:0;display:inline">
  <input type="hidden" value="✓" name="utf8">
  <input type="hidden" value="put" name="_method">
  <input type="hidden" value="/hDJduBBvn7VX4DCwhDKnXHV/dLcXjXkEfQ3JeAJiZg=" name="authenticity_token"></div>
  <table style="" rel="532d6ee6b4f2d7bc06000002" id="news_editable532d6ee6b4f2d7bc06000002" class="infoindex news_editable">
    <tbody>
      <tr>
        <td>
          <input type="text" value="" size="30" name="news[title]" id="news_title" class="infoindexeditabletext">
        </td>
        <td rowspan="2" class="td_centered">
          <img width="90" align="middle" height="100%" src="/pictures/532d6ee6b4f2d7bc06000002/small.jpg?1395486436" id="original_picture" class="news_picture" alt="Small">
          <img style="display: none; width: 90px;" src="/assets/" id="picture_preview" alt="Assets">
          <input type="file" style="display:none" rel="532d6ee6b4f2d7bc06000002" onchange="readURLprofile(this);" name="news[picture]" id="news_picture" class="selected_file">
          <input type="button" value="Subir imagen" onclick="$('.selected_file[rel=532d6ee6b4f2d7bc06000002]').click()" id="browseButton" class="upload_picture">
        </td>
      </tr>
      <tr>
        <td>
          <textarea rows="20" name="news[description]" id="news_description" cols="40" class="infoindexeditabletextarea">asdf</textarea>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="submit" value="Upload" style="display:none" rel="532d6ee6b4f2d7bc06000002" name="commit" id="submit_news">
          <a title="Upload" rel="532d6ee6b4f2d7bc06000002" id="save_news1" class="save_news tooltip" href="#"><i class="fa fa-2x fa-floppy-o"></i></a>
          <a title="Close" rel="532d6ee6b4f2d7bc06000002" id="close_news1" class="close_news tooltip" href="#"><i class="fa fa-2x fa-times"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Answer 1

I think this is your JavaScript. You need to do document.getElementById("selectedFile").click(). I would also use jquery