Difficulties in reproducing the behavior of the input field of the "Spent time" screen.

Added by Rafael Vacari 3 months ago

Hello gentlemen, I am developing a plugin and I would like to add the same behavior as the issuer_id input field in the t, but I am having difficulties.

In my plugin I will also have the issuer_id field, so when I type in an issuer_id I would like the screen to search for the subject of the issuer. This is done with Jquery and ajax, I believe.

I copied part of the javascript code from spend time view, but removed the part of the project_id, as I don't need it in my plugin.

The screen works when loaded, but if I type a different issuer_id I see a loading, but nothing happens. If I save and reload the view the javascript works.

This is my views code

edit.html.erb:

<div class="box tabular">
  <p>
    <%= f.text_field :issue_id, :size => 6 %>
    <span id="physical_issue">
      <%=  link_to_issue(@physical.issue) if @physical.issue.try(:visible?) %>
    </span>
  </p>
</div>

<%= javascript_tag do %>
  $(document).ready(function(){
    $('#physical_issue_id').change(function(){
      $.ajax({
        url: '<%= escape_javascript(@physical.new_record? ? new_physical_path(:format => 'js') : edit_physical_path(:format => 'js')) %>',
        type: 'post',
        data: $(this).closest('form').serialize()
      });
    });
  });
  <% end %>

_form.html.erb:

<%= labelled_form_for @physical, :url => physical_path(@physical), :html => {:multipart => true} do |f|  %>
  <%= render :partial => 'form', :locals => {:f => f}  %>
  <%= submit_tag l(:button_save), class: "btn btn-primary" %>
<% end -%>

edit.js.erb (It is in my route with patch method):

$('#physical_issue_id').html('<%= escape_javascript link_to_issue(@physical.issue) if @physical.issue.try(:visible?) %>');

I looked at the redmine logs and the browser console and found no errors whatsoever.

I appreciate any suggestions or development tips.

Redmine was installed in my Windows 10 PC using bitnami:

Environment:
Redmine version 4.1.0.stable
Ruby version 2.5.7-p206 (2019-10-01) [x64-mingw32]
Rails version 5.2.4.1
Environment production
Database adapter Mysql2

Thank you.

Replies (5)

RE: Difficulties in reproducing the behavior of the input field of the "Spent time" screen. - Added by Liane Hampe 3 months ago

Hi Rafael,

If I get it right, you like to have the autocomplete functionality for the issue_id text field in your view.

Three things catched my eyes:

  1. Either you mixed up file names and content only in this post or you mixed it in your plugin too. The _form.html.erb should contain that what you declared to be the content of the edit.html.erb file.
  2. As far as I can see from your pasted code above you didn't copy this part: source:tags/4.1.0/app/views/timelog/_form.html.erb#L46. But that is where the autocomplete happens.
  3. You are developing in production environment. You should really change this to development because error tracking and debugging is much, much more easier for rails coding. You can debug your javascript best in your browser.

Regards,
Liane

RE: Difficulties in reproducing the behavior of the input field of the "Spent time" screen. - Added by Rafael Vacari 3 months ago

Hi Liane.

Initially, thank you for your time helping me.

Yes, you were right, I mixed up the file names before posting, its is ok in my code.

I followed your tip and added the autocomplete, it is working in the edit and add, new, views. Thank you.

I would still like the same behavior as the "Spent time" view, that is, when I type the code, id, of the issue I would like the span field to be changed to the issue subject. This only works when I save and refresh the screen/view.

That is my updated code:

_form.html.erb:

<div class="box tabular">
  <p>
    <%= f.text_field :issue_id, :size => 6, :required => true %>
    <span id="physical_issue">
      <%=  link_to_issue(@physical.issue) if @physical.issue.try(:visible?) %>
    </span>
  </p>
</div>

<%= javascript_tag do %>
  $(document).ready(function(){
    $('#physical_project_id').change(function(){
      $('#physical_issue_id').val('');
    });
    $('#physical_project_id, #physical_issue_id').change(function(){
      $.ajax({
        url: '<%= escape_javascript(@physical.new_record? ? new_physical_path(:format => 'js') : edit_physical_path(:format => 'js')) %>',
        type: 'post',
        data: $(this).closest('form').serialize()
      });
    });
});

 observeAutocompleteField('physical_issue_id',
   function(request, callback) {
     var url = '<%= j auto_complete_issues_path %>';
     var data = {
       term: request.term
     };

     var project_id;
     <% if @physical.new_record? && @project %>
     project_id = '<%= @project.id %>';
     <% else %>
     project_id = $('#physical_project_id').val();
     <% end %>
     if(project_id){
       data['project_id'] = project_id;
     } else {
       data['scope'] = 'all';
     }
     $.get(url, data, null, 'json')
       .done(function(data){
         callback(data);
       })
       .fail(function(jqXHR, status, error){
         callback([]);
       });
   },
   {
     select: function(event, ui) {
       $('#physical_issue').text('');
       $('#physical_issue_id').val(ui.item.value).change();
     }
   }
 );

routes.rb:

resources :physicals, :controller => 'physicals' do
  member do
    patch 'edit', :to => 'physicals#edit'
  end
end

post '/physicals/new', :to => 'physicals#new'

Maybe my route.erb file is not set up correctly, because on the creation screen, new, the span also does not appear and the file, new.js.erb, was not created.

Again, I appreciate any suggestions or development tips.

Thank you.

RE: Difficulties in reproducing the behavior of the input field of the "Spent time" screen. - Added by Liane Hampe 3 months ago

Hi Rafael,

Now, I fully understand your problem, I hope. :)

I recommend to check the following issues:

1. Shows your browser the ids (#pyhsical_project_id, #physical_issue_id) you refer to?
=> Seems o.k. for me since autocomplete works which uses the same ids.

2. Did you defined all the necessary routes (new_physical_path, edit_physical_path; both with post method)?
=> You are right, you miss some routes, see source:tags/4.1.0/config/routes.rb lines 187 - 201. They refer to new and create actions. To check your existing routes you can type

$ bundle exec rake routes 
in a commandline after you navigated to your root directory of Redmine.

3. Did you prepered the necessary views (new.html.erb, new.js.erb, edit.html.erb, new.js.erb)?
=> I only see edit.html.erb and edit.js.erb in your posts.

4. Is your controller able to process the data properly?
=> I haven't a clue. You can debug the incomming data with gems like byebug or pry to see whether you get something at all. Again, running Redmine with development environment will support you by doing so.

5. Is your model defined properly or lacks it some requirements, e.g., Redmine::SafeAttributes, attributes, associations, scopes, ... ?
=> Again, I haven't a clue.

As you see, there are a lot of pitfalls. Go through all the points carefully, similarly in the order I put them. Sooner or later you will find your error when you systematically debug your code.

Regards,
Liane

RE: Difficulties in reproducing the behavior of the input field of the "Spent time" screen. - Added by Rafael Vacari 2 months ago

Hello, Liane.

I appreciate your help. I managed to program what I needed and I am finalizing the development with the addition of permissions and improving the display screens.

I preferred to redo all the javascript for something I understood better and it ended up working.

I also activated the development module and facilitated debugging the application.

Best regards.

RE: Difficulties in reproducing the behavior of the input field of the "Spent time" screen. - Added by Liane Hampe 2 months ago

Hi Rafael,

I am happy to hear that you are progessing with your plugin.

Keep it up!

Best Regards,
Liane

(1-5/5)