I am trying to develop custom modal plugin for durandal 2.1 to have my own logic and abstract it from the rest of my app here is what I have so far but something does not work and modal gets inserted in DOM twice
define(['jquery', 'knockout', 'plugins/dialog'], function ($, ko, dialog) {
var modal = {
install: function (config) {
dialog.addContext("Modal", {
addHost: function (theDialog) {
var body = $("body");
$('<div id="Dialog" class="AlignC"><div class="ModalHost"></div></div>').appendTo(body);
theDialog.host = $('#Dialog').get(0);
},
removeHost: function (theDialog) {
alert("demoving host");
$("#Dialog").remove();
},
compositionComplete: function (child, parent, context) {
var theDialog = dialog.getDialog(context.model);
}
});
}
};
return modal;
});
and here is how i call it from my viewmodel
dialog.show(this, null, 'Modal');
can anyone tell me what is wrang with this code why my model ELEMENT is inserted twice and ovelay each other. how can i fix that.
second element does not have content inside.
by the way here is view I am trying to show inside modal
<span class="Loader"></span>
<div class="Modal">
<h2 class="Caps">SomeName</h2>
<div class="Row">
<input type="text" />
</div>
<div class="Desc">
description
<br />
XXY YYX XXY
</div>
<div class="Buttons">
<span class="Green">Check</span>
<span>Add</span>
</div>
</div>
Ok I managed to fix this behavior. the problem with click binding was firing twice and this was the problem associated with inserting tow HTML elements in DOM after fixing click handler, everything works just fine.
Related
I'm using iron router to pass data to a bootstrap modal template. The modal contains a html form including many text inputs. The modal is re-used for 3 different features. I use a Session variable to keep track of which modal type is in use. Type 0 = blank form, type 1 = partial edit, type 2 = full edit. The form itself remains the same visually for all types. The only thing that changes is which input boxes contain a value.
For a type 1 edit only 2 boxes would contain values. For a type 2 edit all boxes would contain values. And the type 0 would be empty boxes.
// routes.js
Router.route('/mypage', function () {
var mtype = Session.get("mtype");
this.layout('myLayout');
this.render('my_popup', {to:'my_popup', data: function() {
switch (mtype) {
case 1:
return {box1:'box 1 text', box2:'box 2 text', box3:''};
case 2:
return {box1:'box 1 text', box2:'box 2 text', box3:'box 3 value'};
default:
return {box1:'', box2:'', box3:''};
}
}});
});
// main.html
<template name="myLayout">
{{> yield "my_popup"}}
</template>
<template name="my_popup">
<div class="modal fade" id="my_popup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title label label-primary">Title</div>
</div>
<div class="modal-body">
<form class="js-form-submit" id="my_form" name="my_form">
<div class="form-group">
<input class="form-control" type="text" name="box1" maxlength="64" placeholder="something" value="{{box1}}"/>
</div>
<div class="form-group">
<input class="form-control" type="text" name="box2" maxlength="64" placeholder="something" value="{{box2}}"/>
</div>
<div class="form-group">
<input class="form-control" type="text" name="box3" maxlength="64" placeholder="something" value="{{box3}}"/>
</div>
</form>
</div>
<div class="modal-footer">
<button class="js-form-ok btn btn-success btn-sm">submit</button>
<button class="btn btn-warning btn-sm" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
</template>
Initially I tried passing an object to the modal template that only contained the properties that would be displayed. That didn't overwrite existing input values so I had to use the same object for each modal type and use empty strings for unused properties. I tried calling the reset() method on the form prior to showing the modal. In that case it caused the entire template to stop re-rendering.
Prior to showing the modal I set the session variable to the type of modal that will be displayed.
Session.set('mtype', 1);
That triggers iron router into sending the proper data to the template, unused properties are cleared and the template successfully re-renders.
Unfortunately if I type in one of the html inputs the template does not reset its value when it's re-rendered. This seems to be related to the same problem I encountered with the reset() method. If the input contains custom text (value is typed) then the modal doesn't display the new data sent to the template when the Session variable is changed. It preserves the user entered text.
What's the best way to re-use a bootstrap modal form in meteor? Should I use a helper instead of iron router to get the data object? Something like...
{{#with getData}}
Why is the user entered text being preserved?
I've also tried using the defaultValue attribute instead of value. The same issue occurs with both attributes.
To test the bug:
open the web console
Session.set('mtype',1);
$('#my_popup').modal('show');
type something in the 3rd text box
click off the modal to hide it
Session.set('mtype',0);
$('#my_popup').modal('show');
You'll see that the value you typed is still visible despite having sent empty strings to each box.
Another way:
Session.set('mtype',2);
$('#my_form')[0].reset();
Session.set('mtype',1);
$('#my_popup').modal('show');
You'll see that none of the boxes contain values despite having sent new strings of text to each box.
The only solution I've found is to use defaultValue in the template and then loop through the form fields before modal is shown and set value = defaultValue.
<input class="form-control" type="text" name="box1" maxlength="64" placeholder="something" defaultValue="{{box1}}"/>
Template.my_popup.rendered = function() {
$("#my_popup").on('show.bs.modal', function() {
var elems = $('#my_form')[0].elements;
for (var i=0; i<elems.length; i++) {
if (elems[i].hasAttribute('defaultValue')) {
elems[i].value = elems[i].getAttribute('defaultValue');
}
}
});
};
I use Materializecss 0.100.2 and i need to open a modal on page load or document ready. But not work, it will be work only if i click on button, i don't know why.
The modal has class "open" but the modal have "display: none" and the div modal-overlay is hidden. It work but not completely.
jQuery(document).ready(function () {
jQuery('#modalInfo').modal();
jQuery('#modalInfo').modal('open');
});
This thing works with vanillaJS. You need to get the modal class using querySelector() and then pass it in M.Modal.init(), and with the help of this instance you can call open() method.
HTML -
<div class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS -
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instanceModal = M.Modal.init(Modalelem);
instanceModal.open();
});
I have a main view that has a button "AddSkillBtn" which on clicked shows a modal popup witha partial view inside. Works fine so far. I have a link inside the partial view "addAnotherSkill" which on clicked has to show an alert. However, the click event doesn't get fired at all. Please find below the code snippet - Any help much appreciated!!
**jQuery:**
$('#AddSkillBtn').click(function (e) {
$.ajax({
url: '#Url.Action("MyAction", "MyController")',
type: "POST"
success: function (result) {
$("#AddContainer").html(result);
$('#AddModal').modal('show');
}
});
});
$("#addAnotherSkill").on('click', function () {
alert("Hi!!");
});
**Main View**
<p><a id="AddSkillBtn" href="javascript:void(0)" class="btn btn-rounded btn-primary">Add new Skill</a></p>
<div class="modal modal-wide fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="AddLabel">Add New Skills</h4>
</div>
<div class="modal-body">
<div id="AddContainer">
</div>
</div>
</div>
</div>
</div>
**Partial View rendered in the modal popup has**
<a id="addAnotherSkill" href="javascript:void(0)"><i class="fa fa-plus"></i> Add Another</a> //clicking on this link does nothing
Your element with id="addAnotherSkill" is being added to DOM dynamically. In order to use event delegation using the .on() function, it needs to be
$(document).on('click', '#addAnotherSkill', function (e) {
e.preventDefault();
...
}
Note you should change document to the closest ancestor of the element which exists when the page is first loaded.
Note also the use of e.preventDefault() which means that you can just use <a id="addAnotherSkill" href="#"> (my preference but I have seen arguments for and against - for example the answers here)
I have searched, and found old answers to this, and hacks about manually clearing bidnigns, and then calling applybindings... as well as creating a custom viewmodel that isnt directly related to anythign else and applying bindings with that AFTER the new dom nodes appear.
My specific scenario is that a bootstrap3 modal basically re-attaches itself after show is called, and likewise none of the items in the modal actually still bound.
I already have a model that represents state/properties of the dialog, but I'd like the dialogviewmodel to be a child of my pageViewModel.
My question is, at this point in time, whats the most appropriate way to do this? Is there no way to say take this node, attach it to the viewmodel at this property?
I am using the same tools as you (knockout and bootstrap3). This is how I accomplish Modals as an example:
This div exists as the first element of the body in my index.html:
<div class="modal fade" id="BaseModal" tabindex="-1" role="dialog" aria-labelledby="BaseModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div id="modalLoading" class="ajax-loader">
<img src="images/working_blue.gif" />
</div>
<div class="modal-dialog modal-lg">
<div id="ModalAnchor" class="modal-content col-lg-4 col-lg-offset-4" data-bind="html: $data.ModalContent"></div>
</div>
</div>
// This is typescript but the javascript should be pretty close to this.
private LoadModalView(viewName: string, viewModel: any): void {
$.get(viewName)
.then((view: any, status: string, jxhr: JQueryXHR) => {
this.ModalContent(''); // ensure there is no content in the modal.
this.ModalContent(view); // Load new HTML
ko.applyBindingsToDescendants(viewModel, this.ModalAnchor[0]); // bind new modal viewmodel
this.BaseModal.modal('show'); // Open the modal
}, (view: any, status: string, jxhr: JQueryXHR) => { /*Do error handling*/ });
}
EDIT: Here is an example of the HTML I load into the modal:
<div class="modal-header">
<h3 data-bind="text: $data.Header"></h3>
</div>
<div class="modal-body">
<h5 data-bind="text: $data.Message"></h5>
</div>
<div class="modal-footer">
<button id="OK" class="btn btn-primary center-block" data-bind="click: OK, text: ButtonText" />
</div>
In the LoadModalView function, the ViewModel parameter is a viewmodel to represent the new data/content/etc of the new modal.
In the Modal Viewmodel, I call 'hide' on the modal when it's purpose is served.
I hope this helps! I don't know if it's the 'correct' or 'proper' way to do this, but this is my pattern.
I have some mobile navigation that uses a scrollTo function, that once clicked, makes my toggle function only work on the second click. It may have to do the the binding of the scrollTo click, but I can't figure out how to fix it.
HTML:
<div class="nav-bar">
<ul class="nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
<a class="nav-toggle">Menu</a>
</div>
<div class="section-wrap">
<div id="section1" class="section">Section 1</div>
<div id="section2" class="section">Section 2</div>
<div id="section3" class="section">Section 3</div>
</div>
JS:
$('ul.nav a').bind('click',function(event){
$('ul.nav a').removeClass('on');
$(this).addClass('on');
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 30
}, 200, function() {
$('.nav-bar').removeClass('open');
});
event.preventDefault();
});
$('a.nav-toggle').toggle(function() {
$('.nav-bar').addClass('open');
}, function () {
$('.nav-bar').removeClass('open');
});
See this for a working example of the issue: http://jsfiddle.net/MhSKC/9/
At the end of your animate, you remove the open class. Then on the next click of the menu bar, the toggle function tries to remove the open class again, because that's the one of the two toggle functions that needs to execute next. Here's a slightly reworked solution:
http://jsfiddle.net/P4mtC/
$('a.nav-toggle').click(function() {
$('.nav-bar').toggleClass('open');
});
instead of using
$('a.nav-toggle').toggle(function() {
$('.nav-bar').addClass('open');
}, function () {
$('.nav-bar').removeClass('open');
});
use
$('a.nav-toggle').click(function() {
$('.nav-bar').toggleClass('open');
});