Javascript not working in the render partial

Question

I'm trying to include some JS files and execute JS script on DOM is ready in partial page

But it doesn't work.

If I move the JS code block into layout page, it works.

But I don't want to execute the JS code in every page.

Any idea?

index page

= render 'data_range'

partial page : _data_range.html.haml (Not working)

    %script{:src => asset_path("kode/js/date-range-picker/daterangepicker.js"), :type => "text/javascript"}
    = javascript_include_tag 'common'
    / = javascript_include_tag params[:controller]
    :javascript
      $(document).ready(function() {
        $('#date-range-picker').daterangepicker(null, function(start, end, label) {
          console.log(start.toISOString(), end.toISOString(), label);
        });
      });

layout page : layouts/application.html.haml (works!!)

!!!
%html
  %head
    %title= t("site_name")
    = render 'layouts/mobile/common_header'
    = stylesheet_link_tag    "application" 
    = javascript_include_tag params[:controller]
  %body
    = yield
    %script{:src => asset_path("kode/js/date-range-picker/daterangepicker.js"), :type => "text/javascript"}
    = javascript_include_tag 'common'
    / = javascript_include_tag params[:controller]
    :javascript
      $(document).ready(function() {
        $('#date-range-picker').daterangepicker(null, function(start, end, label) {
          console.log(start.toISOString(), end.toISOString(), label);
        });
      });

Hiasinho · Accepted Answer · 2015-08-05 06:23:01Z

1

I think, the easiest way to do that, is a separate JavaScript partial on your layout page. This is what I do (simplified):

create the partial `views/application/_javascript.html.haml`

= javascript_include_tag 'common'
= javascript_include_tag params[:controller] 
= yield :additional_js

add this partial at the end of the body to you layout

!!!
%html
  %head
    %title= t("site_name")
    = render 'layouts/mobile/common_header'
    = stylesheet_link_tag    "application" 
  %body
    = yield
    = render 'javascript'

now in your partial `_data_range.html.haml` do a content_for

- content_for :additional_js do
  %script{:src => asset_path("kode/js/date-range-picker/daterangepicker.js"), :type => "text/javascript"}

  :javascript
    $(document).ready(function() {
      $('#date-range-picker').daterangepicker(null, function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      });
    });

In this way, you can write page specific JavaScript and have it rendered in the layout. Hope this helps.

answered Aug 5, 2015 at 6:23

Hiasinho

6566 silver badges14 bronze badges

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

2 Comments

newBike Over a year ago

Hi your answer is helpful, and may you please simply explain about what my code didn't work ? I supposed it could be working, if i put the JS code after the DOM element

Hiasinho Over a year ago

Hard to tell with the given code. Do you define the element #date-range-picker before, or after the js code? I need more information. Can you update _data_range.html.haml in your post, or wherever you define #date-range-picker?

Collectives™ on Stack Overflow

Javascript not working in the render partial

index page

partial page : _data_range.html.haml (Not working)

layout page : layouts/application.html.haml (works!!)

1 Answer 1

create the partial `views/application/_javascript.html.haml`

add this partial at the end of the body to you layout

now in your partial `_data_range.html.haml` do a content_for

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index page

partial page : _data_range.html.haml (Not working)

layout page : layouts/application.html.haml (works!!)

1 Answer 1

create the partial views/application/_javascript.html.haml

add this partial at the end of the body to you layout

now in your partial _data_range.html.haml do a content_for

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

create the partial `views/application/_javascript.html.haml`

now in your partial `_data_range.html.haml` do a content_for