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?
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
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>
Related
I have a HTML & javascript custom made attribute that will show a popup containing message when a button is clicked.
Button to click :
<a data-deploy-menu="menu-sheet-tutorial-1" href="#">Tap Here to open</a>
The sheet/popup that opens :
<div id="menu-sheet-tutorial-1" class="menu-wrapper">
<div class="content">
<h4>Hello, I'm action sheet!</h4>
Close
</div>
</div>
The data-deploy-menu="menu-sheet-tutorial-1" is what firing the event to open the sheet.
And, this is what happens when the button is clicked in javascript.
$('a[data-deploy-menu]').on( "click", function(){
var menu_ident = $(this).data('deploy-menu');
$('#'+menu_ident).addClass('active-menu');
$('.fade-bg').addClass('active-fade'));
});
And, this is what happens when the close button is clicked
$('.close-menu').on('click', function(){
$('.menu-wrapper').removeClass('active-menu'));
$('.fade-bg').removeClass('active-fade'));
});
The problem i'm facing is that I'm not able to fire this event without a button click.
So, using angularJS, I want to fire this sheet automatically when the form is submitted or when a particular condition is true.
AngularJS has a directive calls ngSubmit who could be provided with an expression like a function. Here is te documentation:
https://docs.angularjs.org/api/ng/directive/ngSubmit
Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
JSFiddle
I have tried the following but it has no effect:
jQuery(window).load(function(){
jQuery('#myModal').modal('show');
});
How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.
Everything you asked is perfectly described in the docs.
Displayed on screen
Shows the modal when initialized.
$("#my-modal").modal({ show : true });
I don't want them to be able to close it either
Closes the modal when escape key is pressed
And
Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click.
$("#my-modal").modal({
backdrop : "static",
keyboard: false
});
Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P
jQuery(window).load(function(){
jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/95Vf7/2/
I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>
Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});
I'm using this simple popup correctly initialized along with corresponding popupafterclose handler, wrapped appropriate in content div. It just works. -
<div id="start-activity-popup" data-role="popup">
here is popup.
<button id="start">Start</button>
<button id="cancel">Cancel</button>
</div>
But if I had to retrieve values from popup or know which button
was pressed - do I need to write another handler for each - start and cancel buttons ?
Is there a better way ?
You can just write one handler:
$("#start-activity-popup button").click(function() {
var clicked = this.id; //this is the id of the clicked button
//do stuff
});
I am using Lean Modal for a Modal on my web app.
Lean Modal Website: http://leanmodal.finelysliced.com.au/
Its all working fine. I just want to add the event "Esc Button Click" which closes the modal. How can I do it? Please advise.
Based on the demos on their homepage, you can close the modal by clicking outside it. You just need to trigger the same click event when ESC key is pressed. This ensures that the closing is actually done by the plugin itself and not by you.
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#lean_overlay").trigger("click");
});
Do something like
$(window).bind('keyup',function(e){
if(e.keyCode == 27)
$('#signup,#lean_overlay').fadeOut();
})
For the example on demo page
<a href id="modal" tabindex="-1" >Click to open </a>
add tabindex="-1" if you are using jquery .