Knockout JS - Modal forms not playing nice with Bootstrap

Question

Been working for about 2 weeks to get a CRUD system working with knockout and it's slowly coming along. I keep hitting issues everytime I try to add buttons.

Currently my biggest issue at the moment is that my add button which is suppose to clear all values from my news and give me a blank form to fill in. Currently I have it loaded in a modal form using bootstrap. On my site the screen fades as if it's about to show you the modal DIV but nothing happens.

http://jsfiddle.net/rqwku4kb/3/

self.AddNewIncident = function() {
var id = this.ID;
$('#myModal').modal('show')
     self.currentIncident(null);
 ;
    };

Would anyone have any ideas?

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Use Knockout to control your modal, just like everything else. If you're reaching around the viewmodel to fiddle with the DOM, things will go wrong.

Twitter bootstrap 3 Modal with knockout

edited May 23 '17 at 11:59

Community

1
1

answered Dec 13 '15 at 18:09

Roy J

42,522
10
78
102

Thanks for the info, I did notice that remvoing the Data-bind="with: currentIncident" the modal starts working but but longer synced with Knockout. So as per your comment it's really something with knockout. I checked out the link you gave me but I just dont understand how to implement this to my jsfiddle http://jsfiddle.net/rqwku4kb/6/ just dosent make any sense to me. – Daniel Ellison Dec 13 '15 at 20:19
It isn't clear what you're binding the modal elements to. To use the modal binding handler, basically replace all your calls to hide and show by setting showDialog to false or true. I've done that here: http://jsfiddle.net/rqwku4kb/7/ but the binding problems are keeping things from running properly. – Roy J Dec 13 '15 at 21:09
Thanks Roy, Im still a bit confused about one thing tough. In your example modal seems to be working. Made a few adjustements to my code but now my edit code wont open the modal. What im trying to accomplish is that when I click on the New Incident button it will load me a blank form. When I click on the row's edit button it would open the modal and show the data of the selected incident. http://jsfiddle.net/rqwku4kb/10/ – Daniel Ellison Dec 13 '15 at 21:53
@DanielEllison You need to use `$parent.showDialog(true)`, for one. That brings up the modal overlay, but not the modal itself. That may be a css issue. I'd suggest you start from scratch with the simplest modal-using example you can, and start adding things back to it. – Roy J Dec 13 '15 at 23:34
I was able to make some progress http://jsfiddle.net/rqwku4kb/11/. After re-reading your comments several times it's finally sinking in. I got the modals working for my edit buttons using your example. However when I click on the New Incident my modal fades as if it`s trying to open my form but never show my form. After analysing a bit further, I figured out that the issue does not seem to be with my modal but instead with this line self.currentIncident(null); I need to figure out another method that modal would prefer. – Daniel Ellison Dec 13 '15 at 23:54
For those curios, this is the working jsfiddle. http://jsfiddle.net/ermakovnikolay/rqwku4kb/13/ finally this is what fixed it. http://stackoverflow.com/questions/34258074/knockout-js-how-to-return-empty-strings-for-observable-fields/34258147#34258147 – Daniel Ellison Dec 14 '15 at 01:45

score 0 · Answer 2 · answered Dec 13 '15 at 11:13

Modals will close when the background is clicked so you need to suppress that using one of two ways. Either prevent the closing of the modal due to a background click using bootstrap attributes as below:

Via javascript :

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

HTML:

<div id="myModal" class="modal fade" role="dialog" data-bind="with: currentIncident" data-backdrop="static" data-keyboard="false">

Or alternatively suppress the background click event. When you click on the new button the click event fires for the button and then bubbles / propagates up through the DOM thus triggering a background click which in turn closes the dialog again.

So either suppress propagation in the handler:

self.AddNewIncident = function(data, ev) {
    var id = this.ID;
    $('#myModal').modal('show');
    self.currentIncident(null);
    ev.stopPropagation();
};

or in the click binding such that knockout will do this for you:

<button type="button" class="btn btn-success" value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: AddNewIncident, clickBubble: false">New</button>

Unfortunately this didnt fix it. I put this in the jsfiddle and instead of closing automatically it just stays on the faded screen as if it's trying to open my dialog but does nothing. — Daniel Ellison, Dec 13 '15 at 17:42

Knockout JS - Modal forms not playing nice with Bootstrap

2 Answers2