CODEWITHSUNDEEP
javascriptjqueryhtml
sam
sam

Reputation: 430

.replaceWith jquery

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?

Upvotes: 0

Views: 536

Answers (3)

Aaron Pollock
Aaron Pollock

Reputation: 439

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/

Upvotes: 4

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70139

$(function() {
    $("form[name=rating]").submit(function(e) {
        e.preventDefault();
        $('#rating_services').replaceWith("<div id='thanks'> Thanks! </div>");
    });
});

Fiddle

Instead of binding a click handler to the submit button, bind a submit handler to the forms and preventDefault() the event so the page doesn't submit to itself.

Also, if your template generates duplicate IDs, that's invalid HTML and the JS won't work properly.

You should use classes instead:

<div class="rating_services">

And JS:

$(function() {
    $("form[name=rating]").submit(function(e) {
        e.preventDefault();
        $(this).closest('.rating_services').replaceWith("<div id='thanks'> Thanks! </div>");
    });
});

Fiddle

Upvotes: 2

Charles Short
Charles Short

Reputation: 164

Since the click is on the button, perhaps put the id on the button

$('input.button#'+forloop.counter).click(function() 
 {
$('#rating_services'+ forloop.counter).replaceWith(...
 }

that might be a lot of event handlers though so you might want to use 

$('div.parent_div').delegate('input.button#'+forloop.counter, ...)..

Upvotes: 0

Related Questions