CODEWITHSUNDEEP
javascriptruby-on-railspjax
hugo how choong
hugo how choong

Reputation: 144

Pjax and reloading JavaScript on a specific page

I want to implement Pjax and Google Map in my Rails app and I have a problem with the reloading of my JavaScript codes.

My layout/application.html.erb is like this : 

<body>
  <%= render 'shared/navbar' %>
  <%= render 'shared/flashes' %>
  <div id="pjax-container">
    <%= yield %>
  </div>
  <%= render 'shared/footer' %>

  <%= javascript_include_tag "https://maps.google.com/maps/api/js?key=******************************" %>
  <%= javascript_include_tag "https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" %>

  <%= javascript_include_tag "application" %>

  <%= yield(:after_js) %>
</body>

and the file where is my map listings/index.html.erb is like this :

<div id="map" style="width: 100%; height: 300px;"></div>

<% content_for(:after_js) do %>
  <%= javascript_tag do %>

    $(document).on('ready', function() {
      handler = Gmaps.build('Google');
      handler.buildMap({ internal: { id: 'map' } }, function(){
        markers = handler.addMarkers(<%= raw @markers.to_json %>);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
      });
    })
  <% end %>
<% end %>

@markers is an array of the marker linked to a listing. It is defined in the Listings Controller, so it's difficult to move this javascript code.

The JavaScript code of this file works just when I reload this specific page, and it does not disappear when I change of page.

So my question is : Is it possible to call a JavaScript code, containing some ruby information, on a specific page with the Pjax system ?

Upvotes: 2

Views: 556

Answers (2)

Kannan
Kannan

Reputation: 56

okay i will explain more about the solution. :)

in PJAX, most of the time it doesn't load the Jquery or js which is included to the outside of the pjax funciton but in same. so we have to load that js file in the success funciton of the pjax function using

$getScript('Your js fle');

so that when pjax fetch new page content then the plugin also loaded and included.

Upvotes: 0

Kannan
Kannan

Reputation: 56

Simply load your javascript in the success function of pjax.

Upvotes: 1

Related Questions