CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Nehil Mistry
Nehil Mistry

Reputation: 1109

jquery star rating not working in bootstrap popover

I am facing some issues in bootstrap popover. Does jquery loads inside bootstrap popover?

This ain't working.

Fiddle - http://jsfiddle.net/mVSPR/5/

// make popovers work
$("a[data-toggle=popover]")
.popover()
.click(function (e) {
  e.preventDefault()
});
$('.add-action>.trigger').popover({ 
      html: true,
      placement: 'bottom',
      content: function() {
        return $(this).parent().find('.add-review-form').html();
      }
  });
$('.add-action>.trigger').popover(function (e) {
    $('.rate').rateit();
  });

problem I am facing is jquery star rating is not working in bootstrap popover, while its working good outside the popover.

Help me .

Upvotes: 2

Views: 1596

Answers (2)

wander
wander

Reputation: 957

The reason is, your code:

  content: function() {
    return $(this).parent().find('.add-review-form').html();
  }

gives a copy of $('.add-review-form') and bootstrap fill your popover with this copy , but the event listener is not copied, so you need to bind the copied $('.add-review-form') with rateit again. Here is the jsfiddlemodified:

$('.add-action>.trigger').popover({
    html: true,
    placement: 'bottom',
    content: function () {
        return $(this).parent().find('.add-review-form').html();
    }
}).click(function () {
    $('.rateit-popover').rateit();
});

Upvotes: 1

Bora
Bora

Reputation: 10717

$('.add-action>.trigger').popover({ 
          html: true,
          placement: 'bottom',
          content: function() {
            return $(this).parent().find('.add-review-form').html();
          }
}).click(function() {
    $('.rateit-popover').rateit();
});

Fixed it: http://www.jsfiddle.net/mVSPR/6/

The thing is that when the popover is initialized, it clones the source element (the add-review-form) and puts it into the popover markup. At this moment you have actually two 'add-review-forms' on your page.

The rateit bindings however are not cloned, so you end up with a half working rateit plugin.

The trick is , not to have rateit auto init the itself (I changed the div's class to rateit-popover), and then when the review button is clicked, and the popover is shown, only then we initialize it. Next time when the review button is clicked, it will happen again, but rateit is smart enough not to reinit itself once it is initialized.

source: http://rateit.codeplex.com/discussions/449496

Upvotes: 1

Related Questions