javascript in html file

Hi,

I have 2 views on which I am running some javascript for a rating:

from first view:

<script>
  $(document).on('turbolinks:load', function() {
    $('.star-rating').raty({
      path: '/assets/',
      readOnly: true,
      score: function() {
        return $(this).attr('data-score');
      }
    });
  });
</script>

and second:

<script>
$(document).on('turbolinks:load', function() {
  $('#star-rating').raty({
    path: '/assets/',
    scoreName: 'review[rating]'
  });
});
</script>

now here they work fine as is but, I don't want them in the html so I
have moved them into reviews.coffee

however, now on using browser forward and back buttons more stars are
added every time I move back and forward with the browser(this doesn't
happen if I leave them in the views)

I can't work out how to fix this (I also have the feeling I shouldn't be
using turbolinks:load like this)

If anyone with decent javascript knowledge could point me in the right
direction I'd be grateful..

thanks,

J.

Hi,

I have 2 views on which I am running some javascript for a rating:

from first view:

<script>
$(document).on('turbolinks:load', function() {
   $('.star-rating').raty({
     path: '/assets/',
     readOnly: true,
     score: function() {
       return $(this).attr('data-score');
     }
   });
});
</script>

and second:

<script>
$(document).on('turbolinks:load', function() {
$('#star-rating').raty({
   path: '/assets/',
   scoreName: 'review[rating]'
});
});
</script>

now here they work fine as is but, I don't want them in the html so I
have moved them into reviews.coffee

however, now on using browser forward and back buttons more stars are
added every time I move back and forward with the browser(this doesn't
happen if I leave them in the views)

You may want to modify the raty() method so that it will only initialize the object it is called on once. Set a semaphore on that object, and if it is present, fall through.

Walter