Question

I am using Ruby on Rails, jQuery v1.8.3 and jQuery UI v1.9.2. In a view file I am rendering a partial template this way:

<%= render :partial => 'template_name', :locals => { :div_id => 'div_id1' } %>

The related template_name file contains the following:

<script type="text/javascript">
  var item = $('#<%= div_id %>')

  alert(item.selector) // Display #div_id1
</script>

On the same page, through an AJAX request, I retrieve and add to the DOM the same partial template but with :locals => { :div_id => 'div_id2' }:

<script type="text/javascript">
  var item = $('#<%= div_id %>')

  alert(item.selector) // Display #div_id2
</script>

Making the above, after the AJAX request, I “lose” the reference to the #div_id1 since item becomes related to #div_id2.

How should I handle that situation in order to avoid “overwriting” variables? How can I “isolate” (maybe, namespacing or using some jQuery features) those variable?

Answer 1

If the code snippets are self-contained, you should be able to just move the code into a private scope.

<script type="text/javascript">
    (function(){
        var item = $('#<%= div_id %>');
        alert(item.selector); // Display #div_id2
    })();
</script>

Though i disagree with having server-side code generating javascript-based ui widgets.