CODEWITHSUNDEEP
javascriptjquerypopover
d0berm4n
d0berm4n

Reputation: 71

Bootstrap popover doesn't work in object

I am trying to make my own js class for table grid adjustments(hide columns) and my popover button doesn't work.

When i use all of that functions on page it works, but when I put in prototype it fails.

here is my grid.js:

function Grid(element, tableId, module){
    return this.init(element, tableId, module);
};

Grid.prototype = {

    grid: [],

    element: "",

    popover: null,

    tableId: "",

    module: "",

    backEndURL: location.href,

    formId: "#grid_form",

    wrapper: "#grid_entities",

    init: function(element, tableId, module){

            this.element = element;
            this.tableId = tableId;
            this.module = module;

            this.initButton();
            this.addOnClickListner();


    },

    initButton: function(){

        this.popover = $(this.element).popover({
            placement: "bottom",
            html: true,
            content: this.getPopoverContent()
        });

    },
...

Index.php:

<div id="filterButtons">
    <i class="left iconfilter" id="filterButton" data-toggle="popover"></i>
    <i class="left iconlayout" id="gridButton" data-toggle="popover"></i>
</div>
...
<script>
$(document).ready(function () {
    var grid = new Grid(...);
});
</script>

Also Grid.js is included in the bottom of the page.

Upvotes: 0

Views: 119

Answers (2)

d0berm4n
d0berm4n

Reputation: 71

Thanks to all. I solve it. The reason was that I generate popover content via ajax:

initButton: function(){

    this.popover = $(this.element).popover({
        placement: "bottom",
        html: true,
        trigger: 'click',
        content: this.popoverContent
    });

},

popoverContent() was a ajax request to server side.

Upvotes: 0

HMR
HMR

Reputation: 39270

I don't see your addOnClickListener but I suspect it's a problem with this. Your constructor function should not return anything. So you can do something like this:

function Grid(element, tableId, module){
    this.init(element, tableId, module);
};

Grid.prototype = {
    //...
    constructor:Grid,
    addOnClickListner:function(){
        var me = this;
        return function(e){
            //e is the event, e.target is the clicked element
            //me is the Grid instance
            console.log("button clicked, e is:",e," and this is:"
              ,this," and me is:",me);
            me.whateverYouHaveInOnClickListener();
        }
    }

Errors would be helpful, in Chrome or Firefox (with Firebug plugin installed) press F12 and see if there are any errors in the console. Do a console.log to see what the values of your variables are.

More on prototype, constructor functions and the value of this can be found here.

Upvotes: 1

Related Questions