button with click data-bind event (Knockout.js) is not working because of bootstrap-ui.js

[mcastillo86]

Hi,

I've been strugling with the following issue. I've created an application in ASP .NET MVC and included in my project knockout.js and bootstrap-ui. The problem I found is that my button with a data-bind="click: ..." is not working. There are no javascript errors on the page but when I click on the button nothing happens. I don't know why but when I removed "bootstrap-ui.js" reference the click event started to work. Is it possible that somehow bootstrap-ui is overwritting or disabling that event? How can I prevent that from happening?

View:

<tbody data-bind="foreach: categories" id="tablebody">
                    <tr>
                        <td class="table-cell-id">
                            <span data-bind="text: $index"></span>
                        </td>
                        <td>
                            <a class="small" data-bind="text: Name, attr: { href: $parent.onViewDetails($data) }"></a>
                        </td>
                        <td>
                            <a class="small text-nowrap" data-bind="text: Code, attr: { href: $parent.onViewDetails($data) }"></a>
                        </td>
                        <td class="text-center" data-bind="text: CreationDateInFormat"></td>
                        <td class="text-center text-nowrap" data-bind="text: CreatedByName"></td>
                        <td class="text-center" data-bind="text: ModificationDateInFormat"></td>
                        <td class="text-center text-nowrap" data-bind="text: ModifiedByName"></td>
                        <td>
                            <span class="label label-default" data-bind="text: StatusName"></span>
                        </td>
                        <td class="table-cell-actions">
                            <div class="btn-group">
                                <button class="item-action" type="button" id="itemOptions1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="itemOptions1">
                                    <li>
                                        <a class="btn btn-dropdown" data-bind="attr: { href: $parent.onViewDetails($data) }">
                                            <span class="glyphicon glyphicon-eye-open offset-right" aria-hidden="true"></span>
                                            Details
                                        </a>
                                    </li>
                                    <li>
                                        <a class="btn btn-dropdown" data-bind="attr: { href: $parent.onEditItem($data) }">
                                            <span class="glyphicon glyphicon-pencil offset-right" aria-hidden="true"></span>
                                            Edit
                                        </a>
                                    </li>
                                    <li>
                                        <button class="btn btn-dropdown">
                                            <span class="glyphicon glyphicon-remove-sign offset-right" aria-hidden="true"></span>
                                            Delete
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>

JS:

<script>
        function MyViewModel() {
            var self = this;

            var categories = [];
            var arrayOfCategories = @Html.HtmlConvertToJson(Model);

            var Item = function (name, code, categoryId, creationDateInFormat, createdByName, modificationDateInFormat, modifiedByName, status) {
                this.Name = name;
                this.Code = code;
                this.CategoryId = categoryId;
                this.CreationDateInFormat = creationDateInFormat;
                this.CreatedByName = createdByName;
                this.ModificationDateInFormat = modificationDateInFormat;
                this.ModifiedByName = modifiedByName;
                this.StatusName = status;
                this.removeItem = function () {
                    alert(this.Name);
                }
            };

            arrayOfCategories.forEach(function(element) {
                categories.push(
                    new Item(element.Name,
                        element.Code,
                        element.CategoryId,
                        element.CreationDateInFormat,
                        element.CreatedByName,
                        element.ModificationDateInFormat,
                        element.ModifiedByName,
                        element.Status.Name
                    )
                );
            });

            var pageUrls = {};
            pageUrls.editUrl = '@Url.Action("Edit", new { id = 0 })';
            pageUrls.detailsUrl = '@Url.Action("Details", new { id = 0 })';

            self.categories = ko.observableArray(categories);

            self.onEditItem = function(data) {
                return pageUrls.editUrl.replace('0', data.CategoryId);
            };

            self.onViewDetails = function(data) {
                return pageUrls.detailsUrl.replace('0', data.CategoryId);
            };
        }

        var viewModel = new MyViewModel();
        ko.applyBindings(viewModel);
    </script>

[mbohal]

Hi,

We do not use knockout.js and have no experience with it. Presently we do not have the resources to try to reproduce and debug this issue. If there is any way we can support you in resolving the issue we will be willing to help, but we can not afford to spend too much time on it.

I can't really think of any reason why it should not work. Are there any errors in the console?

[mcastillo86]

Hi @mbohal, thanks for your reply. There are no errors in the console, it is very odd. Anyway, my workaround was to remove that js from the my layout and only add it in the views I need it :)