Question

Bit of a jQuery/JavaScript beginner here so thanks in advance for any help you can provide.

I have an page index.erb, which contains:

 <div class="box">
   change me out
 </div>

 <div class="box">
   <p>change me out</p>
 </div>

and a partial _more_info.erb

<div class="update">
  <p>You've been changed</p>
</div>

What’s the best way to render the partial when a user does a “mouseenter” event on any of the class=box?

Answer 1

var boxHtml = $(".box").html();

$(".box")
    .mouseover(function() {
            $(".box").html("<%= escape_javascript(render(:partial => 'more_info')) %>");      
    })
    .mouseout(function() {
           $(".box").html(boxHtml);
    });