Added resetPosition() to reposition clickover

[matthew-muscat]

Needed this in one of my projects when retrieving clickover content via an ajax request.

While the clickover div grows, the positioning does not get updated. This function allows a simple call to resetPosition() to update the position of a clickover based on the content within it. It is based on the original positioning code found in bootstrap.

This is particularly more suitable to bootstrapx-clickover since we can use onShown events to easily fire ajax events on open (unlike the current bootstrap popover)

[lecar-red]

Thanks for the code, a quick question before i merge it in.

Can you give an example of usage? (code snippet)

Boy I wish we could ask bootstrap lib to do this instead of moving blocks of that code over but i don't see any that would allow us to reuse code from tooltip :(

[matthew-muscat]

sure... heres a snippet/example of use

<a href="#" class="btn" rel="note_view" data-original-title="Notes" data-content="&lt;div class=&quot;progress progress-striped active&quot;&gt;&lt;div class=&quot;bar&quot; style=&quot;width: 100%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;" data-contact-id="7727">12</a>

$('a[rel=note_view]').clickover({
    placement: 'left',
    onShown: function(){
        //save the clickover to call later...
        var clickover = this;

        //make an ajax request to load notes
        $.ajax({
            url: '/contact/note',
            data: {contact_id: clickover.options.contact_id},
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                //fill in the notes in the clickover....
                $("div.clickover").find("div.popover-content").html(response);
                // reset clickover positioning
                clickover.resetPosition();
            }
        });
    }
});

certainly wish it would be possible to include repositioning directly within bootstrap, however without onShown events ajax loading isn't really possible

[kjakub]

used this code snippet and just realized that i have to reference {contact_id: clickover.options.contactId} instead of {contact_id: clickover.options.contact_id}

[surrealroad]

I'm having trouble following this example. How does data-contact-id get passed to the ajax function?

[kjakub]

by reading element's data attribute and i think following applies in last code snippet: clickover.options.contactId == $('a[rel=note_view]').data("contact_id")

[matthew-muscat]

hi @surrealroad - i've broken down the main three parts of this - hope this explains it for you...

in the clickover element, add the data attribute... eg:

<a href="#" rel="clickover" data-contact-id="123">James</a>

then while inside the clickover onshown event, reference 'this' clickover instance to a variable.

var clickover = this;

you can then use the variable to call on the data attribute, which clickover conveiniently makes available in it's options properties (dashes are represented as underscores at this point, however i think a version handles this in camelcase?)

clickover.options.contact_id

for the full example, you can look over my earlier post

[surrealroad]

Thanks for your help! There were a couple of things that were tripping me up, but it works now.
I also created a JSFiddle of this for future Googlers.

http://jsfiddle.net/surrealroad/8g3Qh/

[anujism]

Can we use any other data than contact_id? I want to pass multiple data values in onShown function. How can that be done?