{"action":"created","issue":{"url":"https://api.github.com/repos/wenzhixin/bootstrap-table/issues/1610","labels_url":"https://api.github.com/repos/wenzhixin/bootstrap-table/issues/1610/labels{/name}","comments_url":"https://api.github.com/repos/wenzhixin/bootstrap-table/issues/1610/comments","events_url":"https://api.github.com/repos/wenzhixin/bootstrap-table/issues/1610/events","html_url":"https://github.com/wenzhixin/bootstrap-table/issues/1610","id":113918304,"number":1610,"title":"Click button on row to show modal","user":{"login":"ajackso9","id":15364735,"avatar_url":"https://avatars.githubusercontent.com/u/15364735?v=3","gravatar_id":"","url":"https://api.github.com/users/ajackso9","html_url":"https://github.com/ajackso9","followers_url":"https://api.github.com/users/ajackso9/followers","following_url":"https://api.github.com/users/ajackso9/following{/other_user}","gists_url":"https://api.github.com/users/ajackso9/gists{/gist_id}","starred_url":"https://api.github.com/users/ajackso9/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ajackso9/subscriptions","organizations_url":"https://api.github.com/users/ajackso9/orgs","repos_url":"https://api.github.com/users/ajackso9/repos","events_url":"https://api.github.com/users/ajackso9/events{/privacy}","received_events_url":"https://api.github.com/users/ajackso9/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-10-28T20:45:41Z","updated_at":"2015-11-02T04:39:28Z","closed_at":null,"body":"I'd like to have a button at the end of each row that will show a bootstrap modal displaying certain fields that I specify as a list when it is clicked. I'm pulling in a json file as my data-url. My current code is:\r\n\r\n```\r\n<div class=\"container\">\r\n<table id=\"table\"\r\n\tclass=\"table\" \r\n    data-search=\"true\"\r\n    data-pagination=\"true\"\r\n    data-mobile-responsive=\"true\"\r\n    data-toggle=\"table\"\r\n    data-url=\"json/membersData.json\"\r\n    data-id-field=\"id\">\r\n    <thead>\r\n    \t<tr>\r\n        \t<th data-field=\"id\">Member ID</th>\r\n        \t<th data-field=\"m_fname\">First Name</th>\r\n            <th data-field=\"m_lname\">Last Name</th>\r\n            <th data-field=\"operate\" data-events=\"operateEvents\" data-formatter=\"operateFormatter\">Actions</th>\r\n        </tr>\r\n    </thead>\r\n</table>\r\n\r\n        <div class=\"modal fade\" id=\"modalTable\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n            <div class=\"modal-dialog\">\r\n                <div class=\"modal-content\">\r\n                    <div class=\"modal-header\">\r\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n                            <span aria-hidden=\"true\">&times;</span></button>\r\n                        <h4 class=\"modal-title\">Modal table</h4>\r\n                    </div>\r\n                    <div class=\"modal-body\">\r\n                        <!-- output data here-->\r\n                    </div>\r\n                    <div class=\"modal-footer\">\r\n                        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n                    </div>\r\n                </div><!-- /.modal-content -->\r\n            </div><!-- /.modal-dialog -->\r\n        </div><!-- /.modal -->\r\n\r\n</div>\r\n```\r\n\r\nand then my javascript:\r\n\r\n```\r\nfunction operateFormatter(value, row, index) {\r\n\treturn [\r\n\t\t'<a class=\"info btn btn-info btn-sm\" data-toggle=\"modalTable\" data-target=\"#modalTable\">',\r\n        '<span class=\"glyphicon glyphicon-eye-open\"></span>',\r\n        '</a>'\r\n    ].join('');\r\n}\r\n\r\nvar $tablemodal = $('#tablemodal');    \r\nwindow.operateEvents = {\r\n\t'click .info': function () {\r\n\t\t$('#modalTable').modal('show');\r\n\t}\r\n};\r\n```\r\n\r\nHow can I do this? Can anyone help me figure this out? Any help is greatly appreciated."},"comment":{"url":"https://api.github.com/repos/wenzhixin/bootstrap-table/issues/comments/152910957","html_url":"https://github.com/wenzhixin/bootstrap-table/issues/1610#issuecomment-152910957","issue_url":"https://api.github.com/repos/wenzhixin/bootstrap-table/issues/1610","id":152910957,"user":{"login":"dabros","id":780783,"avatar_url":"https://avatars.githubusercontent.com/u/780783?v=3","gravatar_id":"","url":"https://api.github.com/users/dabros","html_url":"https://github.com/dabros","followers_url":"https://api.github.com/users/dabros/followers","following_url":"https://api.github.com/users/dabros/following{/other_user}","gists_url":"https://api.github.com/users/dabros/gists{/gist_id}","starred_url":"https://api.github.com/users/dabros/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dabros/subscriptions","organizations_url":"https://api.github.com/users/dabros/orgs","repos_url":"https://api.github.com/users/dabros/repos","events_url":"https://api.github.com/users/dabros/events{/privacy}","received_events_url":"https://api.github.com/users/dabros/received_events","type":"User","site_admin":false},"created_at":"2015-11-02T04:39:28Z","updated_at":"2015-11-02T04:39:28Z","body":"@ajackso9 - dont have much time atm to fix this, but 3rd time ive looked at this question and no idea what wrong.\r\n\r\nWe need a jsfiddle and more detail on current output vs expected output before anyone can even try to help you here.\r\n\r\nAll i can say at a glance is that data-toggle i believe only runs on document.ready once, anything beyond that you need to add explicit event handlers, which you appear to have done via the operate events approach.\r\n\r\n...\r\n\r\nif it just issnt working, try removing that data-toggle and data-target attributes from the button, which you should have already tried, give variable/s and console.log in click event hander and maybe look at the 'click .info' parameter and see if that matches your use case exactly.\r\n\r\n```javascript\r\nwindow.operateEvents = {\r\n    'click .info': function (e,f,g) {\r\n        console.log('click .info ',this,[e,f,g],$('#modalTable'));\r\n        $('#modalTable').modal('show');\r\n    }\r\n};\r\n```"}}