Question

I am using jquery’s .replaceWith() function for a webapp I am designing. My HTML is this:

{% for service in services %}                   
<div id="service" name="name" value="{{service.name}}">
{{service.name}} <a href='main/name/{{service.name}}'> Click if you want to see more </a>
<div id="rating_services">
<form name="rating">
{% csrf_token %}
    <input name="star1" id="star_1" type="radio" class="star" value="1"/>
<input name="star1" id="star_2" type="radio" class="star" value="2"/>
<input name="star1" id="star_3" type="radio" class="star" value="3"/>
<input name="star1" id="star_4" type="radio" class="star" value="4"/>
<input name="star1" id="star_5" type="radio" class="star" value="5"/> 
<input type="submit" class="button" id="submit_btn" value="Rate this agency!">
</form>
{% endfor %}
</div>

And my javascript is this:

$(function() 
{  
$(".button").click(function()
  {  
  $('#rating_services').replaceWith("<div id='thanks'> Thanks! </div>");    
  }
});  

What I want to do is if the user rates. A thanks is displayed instead of the ratings. However, the information is displayed within a for loop (for displaying multiple “agencies”). So, I can only rate one by one, and one at a time at that. How can I change it so that I can rate out of order? I tried to change the div id to {{forloop.counter}}, but then javascript can handle the # and the {{forloop.counter}}. Any suggestions?

Answer 1

I think you have multiple divs with the ID of “rating_services” as a result of your loop?

If so, instead of hard-coding the ID of the div you’d like to replace, you should give each of the divs a class (i.e. class="rating_services" instead of id="rating_services"), then retrieve the div dynamically using the jQuery closest() function, as below:

$(function()
{
  $(".button").click(function()
    {
      $(this).closest('.rating_services').replaceWith("<div id='thanks'> Thanks! </div>");
    }
  );
});

More on the closest() function here:
http://api.jquery.com/closest/