Render js file in js.erb

Question

Is it possible to render a javascript file inside a js.erb file? I have a modal that's being render in my new.js.haml file. However I have some javascript code that needs to run only when that modal gets called.

new.js.haml

$('.modal-content').html("#{ j(render partial: 'new') }");

I want to be able to call this file or render this file when new.js.haml is called upload.js

$ ->
    files = [];

    $("#upload_button").click ->
        $("#file_input").trigger "click";

    $("#file_input").change (event) -> 
        file = event.target.files[0];
        files.push(file);
        uploadfile files.length - 1, file;

    uploadfile = (index, file) ->
        formData = new FormData();
        formData.append "file", file;
        fileitem = "
            <li class='file-item success'>
                <div class='active'>
                    <span class='remove'>×</span>
                    <span>#{file.name}</span>
                </div>
                <div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>
            </li>
        ";
        $('#filelist').append fileitem;
        setRemove();

    setRemove = ->
        $(".remove").unbind();
        $(".remove").click ->
           index = $(@).parent().parent().index();
           files.splice index, 1;
           $('.file-item').eq(index).remove();

Here is my form file that gets rendered but the upload.js file doesn't get called because it's already loaded on the main page. When the the new form button gets clicked it renders this form in a modal.

- @ticket.errors.full_messages.each do |message|
  .error= message
= render 'layouts/standard_flash'
%ZenTicketForm{ title: 'Submit Help Request', :multipart => true, data: { remote: true } }
  .col-xs-12.col-sm-12.col-md-12.col-lg-12{style: 'padding:0;'}
    .col-xs-12.col-sm-12.col-md-12.col-lg-6
      %dl.dl-horizontal
        %dt Type
        %dd.show-more-container
          %ZenSelect#ticket_type{options: ['Questions', 'Incidents', 'Problems', 'Tasks'],
            class: 'select2',
            placeholder: t('activerecord.placeholders.zen_support/ticket.ticket_type') }
    .col-xs-12.col-sm-12.col-md-12.col-lg-12
      %dl.dl-horizontal
        %dt Subject
        %dd.show-more-container
          %input.form-control{ type: 'text',
            name: 'zen_support_ticket[subject]',
            placeholder: t('activerecord.placeholders.zen_support/ticket.subject') }
    .col-xs-12.col-sm-12.col-md-12.col-lg-6
      %dl.dl-horizontal
        %dt Priority
        %dd.show-more-container
          %ZenSelect#priority{ options: ['Low', 'Normal', 'High', 'Urgent'],
            data: { placeholder: "activerecord.placeholders.zen_support/ticket.priority" },
            class: 'select2' }
    .col-xs-12.col-sm-12.col-md-12.col-lg-12
      %dl.dl-horizontal
        %dt Comment
        %dd.show-more-container
          %ZenTextArea#comment{ placeholder: t('activerecord.placeholders.zen_support/ticket.comment'),
            error: @zendesk_ticket.errors&.dig(:comment) }
      %dl.dl-horizontal
        .new-show-less
          %button.fileUpload.btn.btn-default#upload_button{type: "button"}
            Attach File
            %input.upload#file_input{:name => "attachments[]",  multiple: true, :type => "file"}
          %ul#filelist

Answer 1

You can put the JS code directly inside the js.erb file and it'll only be executed when that partial is rendered.

See more: https://guides.rubyonrails.org/working_with_javascript_in_rails.html