CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsbootstrap-modaljquery-bootgrid
KingKerosin
KingKerosin

Reputation: 3841

jQuery-bootgrid modal dialog

I have a jQuery-bootgrid as described in the examples on the homepage. In the last column I have two buttons for Edit/Delete of the row-content.

All I want to do is to show a modal dialog when the user clicks the Delete-button. However, nothing happens on click. No error, no warning, nothing.

Here is the code for the bootgrid commands-part:

"commands": function(column, row) {
                return "<button type=\"button\" class=\"btn btn-sm btn-primary command-edit\" data-row-id=\"" + row.EventId + "\"><span class=\"icon glyphicon glyphicon-pencil\"></span>@Translator.TranslateGlobal(Keys.Global.Edit)</button> " +
                    "<button class=\"btn-default btn\" data-content-close=\"Close\" data-content-id=\"Div\" data-content-save=\"Save\" data-target=\"#6698CB2F-2948-45D9-8902-2C13A7ED6335\" data-title=\"Title\" data-toggle=\"modal\" type=\"button\">Show modal</button>";
            },

I have the exact same button outside the bootgrid and on click it shows the dialog as expected. Any ideas where to look at or what is causing this behavior?

Upvotes: 3

Views: 1937

Answers (2)

ZaibTabs
ZaibTabs

Reputation: 1

its an excellent idea, Could you please show in a script format please. Which part of the script we can replace.

That way you don't have to reapply the handler if the grid pages, and there are many fewer event handlers (more efficient): $('table').on("click",".command-delete", function(e){ console.log('your stuff happens here'); }); – philw Jun 26 

 formatters: {
        "commands": function (column, row) {
            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\"  data-toggle=\"modal\" data-target=\"#confirmation\"><span class=\"fa fa-pencil\"></span></button> " +
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" ><span class=\"fa fa-trash-o\"></span></button>";
        }
    }
}).on("loaded.rs.jquery.bootgrid", function () {
    /* Executes after data is loaded and rendered */
    $(this).find(".command-delete").click(function (e) {
        $($(this).attr("data-target")).modal("show");
    });
});

Upvotes: -1

Maria Jeysingh Anbu
Maria Jeysingh Anbu

Reputation: 3312

Opening Modal on click Event Reference

  formatters: {
            "commands": function (column, row) {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\"  data-toggle=\"modal\" data-target=\"#confirmation\"><span class=\"fa fa-pencil\"></span></button> " +
                    "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" ><span class=\"fa fa-trash-o\"></span></button>";
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        $(this).find(".command-delete").click(function (e) {
            $($(this).attr("data-target")).modal("show");
        });
    });

Hope it works :)

Upvotes: 3

Related Questions