Please consider the following code (also in this fiddle):
var viewModel = {
count:ko.observable(0),
add:function (){
this.count(this.count()+1);
},
popup:function (){
$.modal($("#divPopup"));
}
}
ko.applyBindings(viewModel);
And this corresponding View:
<button id="btnAdd" data-bind="click:add">Add</button>
<button id="btnPopup" data-bind="click:popup">Popup</button>
<div id="divPopup">
<span data-bind="text:count"></span>
</div>
Now:
click Add button
click Popup button
click top right corner of modal window (sorry I can't have "x" image)
Add button don't work
I can't use:
$.modal($("#divPopup").html());
Because in my app html does not render when $.modal().
Or to put it as another question: how I can know when html render was completed when my viewModel changed?
Try passing persist: true in for the options to modal() like:
$("#divPopup").modal({ persist: true });
http://jsfiddle.net/rniemeyer/BxVF9/
Related
I have a modal and everytime when I have to navigate to other pages I have to close the modal and then go to that page. But I want to navigate to a particular page without dismissing the modal. Means opening page inside modal without really dismissing it and passing back data from that page to modal.
Is it possible to do it?
Thank you in advance
My code :
.ts to create modal
async address_modal(){
// console.log("clicked")
console.log(this.user_id)
const modal = await this.modalController.create({
component: AddressModalPage,
cssClass : 'address-modal',
componentProps : {
user_id : this.user_id
}
});
return await modal.present();
}
html to open modal from button
<ion-button(click)="address_modal()"> </ion-button>
modal.html // open another page
<ion-button routerLink="menu/items/address/add-address" style="text-transform:none" color= "primary" fill ="clear" (click) = "add_address()" >
<ion-icon name="add" ></ion-icon> Add new address
</ion-button>
I think the problem here is the routerLink, but i'm not really sure about this.
When i want to navigate from a modal to another page i use this.
export class test implements OnInit{
constructor(private router: Router) { }
moveNext(){
this.router.navigate([page]);
}
}
You just need to import this: import { Router } from '#angular/router';. And then put it on a button like this:
<ion-button expand="block" (click)="moveNext()">Go to next page </ion-button>
I'm building a Vue.js web application. I'm using CKEditor in a form that is placed inside a modal window. By design, the user's focus is "trapped" in the modal. In CKEditor, when user clicks the "Link" icon in toolbar, the editor opens a dialog box and attaches the new DOM element to 'document.body'. With respect to the DOM, the "Link" dialog is now outside of trapped focus. The user cannot click or tab his way to the "Link" dialog input.
I dug into the ckeditor5-ui source and found relevant code in balloonpanelview.js. I've unsuccessfully tried to configure CKEditor based on https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_dom_position-Options.html
In my Vue.js component, I have:
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
data: () => ({
editor: ClassicEditor,
editorConfig: {
toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'link'],
},
...
})
...
I want the CKEditor "Link" dialog DOM element to be attached to a DOM element id that I specify.
In Vuetify dialog component is required to disable retain-focus
<v-dialog :retain-focus="false" />
There may be much time since you opened the issue. However... This issue was happening to me too. This is happening because Bootstrap modal trap the focus in the active modal. If you're using bootstrap-vue, do this.
In your <b-modal> add the prop no-enforce-focus.
no-enforce-focus is reactive. To properly apply this workaround you can use this prop with a variable, that detects when your CKeditor have focus. If have focus, disable the enforce focus. If doesn't have, restore it. You can apply it by the following way:
<template>
<b-modal
...
:no-enforce-focus="editorFocus">
<ckeditor
...
#focus="toggleEditorFocus(true)"
#blur="toggleEditorFocus(false)"
/>
</b-modal>
</template>
<script>
export default {
...
data () {
return {
editorFocus: false
}
},
methods: {
toggleEditorFocus (val = !this.editorFocus) {
setTimeout(() => {
this.editorFocus = val
}, 10)
}
}
}
</script>
I know the setTimeout is a tricky method, but at least is working now for me.
I have an issue with Bootstrap Modal. I am using Bootstrap3.x for Modal and BootstrapWizard for custom navigation wizard. So both the libraries are necessary. When I click on Modal it disappears automatically. Can anyone help me on this?
I found the solution to this problem. My initial HTML code looks like this
<button class="btn-default" data-toggle="modal" data-target="#addPostModal" data-backdrop="static" data-keyboard="false">Add Posts</button>
But I modified this to
<button class="btn-default" id="myButton">Add Posts</button>
and wrote a jQuery function to handle onclick action
$(document).ready(function()
{
$("#myButton").click(function()
{
$("#addPostModal").modal("toggle");
});
});
In brief, I removed the toggle functionality from HTML and added toggle method. We can also remove "toggle" from onclick() function, it doesn't make any difference.
$(document).ready(function()
{
$("#myButton").click(function()
{
$("#addPostModal").modal();
});
});
In Titanium JS, I'm using the newer NavigationWindow component, and you can traverse several windows down into a navigation tree, creating a series of back buttons as you go.
However, I also have a side revealing menu with a "home" option. I'd like this button to take you back to the root window in the NavigationWindow.
Here is a simple example. Imagine that the new window being created could happen several times and you could be several windows into the navigation tree.
In my view
<Alloy>
<NavigationWindow id="navWin" class="container">
<Window title="Window 1">
<Button onClick="newWindow" title="Go to new window" />
</Window>
</NavigationWindow>
</Alloy>
And in my controller:
function newWindow() {
var newWin = Ti.UI.createWindow({ title: "Window 2" });
var goBackBtn = Ti.UI.createButton({ title: "Go to root" });
newWin.add(goBackBtn);
goBackBtn.addEventListener("click", function () {
// goes back to the root window no matter how deep into the navigation tree you are
});
$.navWin.openWindow(newWin); }
$.navWin.open();
Use navAlloy controller for coming to home window
https://github.com/vuinguyen/NavControlTi32
Thanks
Dojo 1.7
say I have many divs and each div trigger an event when clicked. So when I cilck a div, dojo adds a class, say "clicked" to the div. But how can I set it so when I click another div, it removes the previous div class "clicked" and gives it to the div that I just clicked?
This is because if I clicked on one div it supposed to change its background and remove the background from the previously clicked div
Thanks!!!
You can put all these div in one container, for example
<div class='RadioDivContainer'>
<div> </div>
....
<div> </div>
<div>
Then do this in onclick event handler of divs:
dojo.query(".RadioDivContainer .clicked").forEach(function(node){
dojo.removeClass(node, "clicked");
});
dojo.addClass(evt.target, "clicked");
This is just show the idea how to implement it. You can change it to suit your case.
You can remove the clicked class from all the elements in the group before applying the clicked class to the newly-clicked element.
Using Dojo 1.7:
require([
'dojo/query',
'dojo/dom-class',
'dojo/on',
'dojo/dom',
'dojo/domReady!'
], function(query, dom_class, on, dom) {
var boxes = query('.box', dom.byId('#container')); // get elements inside #container
boxes.forEach(function(box) {
on(box, 'click', function() {
boxes.forEach(function(b) {
dom_class.remove(b, 'clicked');
});
dom_class.add(box, 'clicked');
});
});
});
Here's a fiddle.
You could also keep track of the last clicked element and remove the clicked class from that. You can see both examples in the fiddle.
You should enable hooks to your desired DOM elements with dojo.query, handle click events using dojo.on and assign/unassign classes with dojo/dom-class. Give the div elements a shared class to denote that they are part of this clickable unit, then listen for click events on all of them and assign classes as necessary. See this JSfiddle, using Dojo 1.7.4:
HTML
<div class="mutable"></div>
<div class="mutable"></div>
<div class="mutable"></div>
Javascript/Dojo
require(["dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function(query, domClass, on) {
on(query(".mutable"), "click", function(e) {
query(".mutable").forEach(function(node) {
domClass.remove(node, "clicked");
});
domClass.add(this, "clicked")
});
});
CSS
.mutable {
background-color:red;
}
.clicked {
background-color:green;
}
div {
border:2px solid black;
margin:5px;
}
This will also work with Dojo 1.8.x and 1.9.x.