I'm working on an ajax star rating system. For the stars I've used the label's of radio buttons. When the page loads if the item has a rating (i.e. 3) it will check radio button 3 and all labels before it will be colored (Mouseover also changes the image). This code is run when $(document).ready and lives in /public/javascript/rating_ballot_index.js
My problem is that because the rating is on the index page (so multiple forms) after the form is submitted (by clicking the label) I need to reload the form. I do this from the 'create.js.erb' file (After an item is clicked a class 'clicky' is added to know which form to remove).
('.clicky').closest("tr").replaceWith("<%= escape_javascript(render :partial => @product, :locals => {:product_class => "clear_rating"}) %>");
After the new partial is inserted the code from rating_ballot_index.js does not respond to this newly added partial (since the document has already been loaded). If i try running the function again, the next time I submit a rating, it submits it twice. Is there a way I can stop the function from running the first time, then rerun it or make the original function recognize the newly added partial?
I Hope what I wrote makes sense! Thanks in advance
Solved: The problem was that when calling the .replaceWith it was replacing it with an identical partial, so jQuery didn't realise it was a new element. I ended up replacing it with .empty() and then .append()