I have a weird problem with a modal. It should be a absolutely normal modal that I can open and close many times, but I can open just one and also just close one time! http://plnkr.co/ksTy0HdifAJDhDf4jcNr
My index.html file looks this:
<body ng-controller="MainCtrl">
<div ng-include src="'widget.html'" ng-controller="WidgetCtrl"></div>
<!-- other widgets and content -->
</body>
As you can see I have devided my application in different parts (called widgets), that I am including per ng-include in my index html file. Every widget has it's own controller.
The widget.html looks like this:
<div modal="theModal">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
<!-- more modals and other stuff -->
<button ng-click="OpenModal()">open modal</button>
And now the widget controller (which is a child controller of the main controller)
app.controller('WidgetCtrl', function ($scope) {
$scope.OpenModal = function() { $scope.theModal = true; }
$scope.CloseModal = function() { $scope.theModal = false;}
});
All stuff for opening and closing the modal is part of the sub controller (WidgetCtrl) and therefore shouldn't conflict with anything from the parent controller.
$scope.theModal is in the beginning undefined, so the modal is not shown. With a click on the button $scope.theModal is defined and set to true; this is triggered by Angular UI and the modal is shown. On a click of ok, the now existing $scope.theModal is set to false and the modal disappears. Everything is perfect but .. it's not working again!
You just have to include close="CloseModal()" in the first div of your widget
<div modal="theModal" close="CloseModal()">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
Here is a working plunker
Related
Currently we have a full page that renders the RuleEditor without issue in the view. I've ran into an issue in getting this to render properly on a dialog.
I'm using the same exact logic to load the objects between the full view and the dialog view.
Here is what the RuleEditor looks like in the full view with an example rule:
RuleEditor Full view
Here is the RuleEditor display (bad rendering) for the same rule
RuleEditor within dialog
The div content within this dialog is:
<div id="ruleModel" name="ruleModel">
<input type="hidden" id="ruleModelData" name="ruleModel">
.
</div>
There are no html/javascript console errors. Any thoughts on why this is happening?
Thanks!
*******UPDATE*****
Here is the .cshtml content for the dialog:
#model RuleViewModel
<link href="#Url.Content("~/Content/Common.css")" rel="stylesheet"
type="text/css" />
#{
ViewBag.Title = "Edit Rule1";
Layout = null;
Html.CodeEffects().Styles()
.SetTheme(ThemeType.Gray)
.Render();
}
#using (Html.BeginSecureForm("Save", "Rule"))
{
#Html.ValidationSummary(true)
<br />
<b>Rule Name:</b> #Html.TextBoxFor(m => m.RuleName, new { id =
"RuleName", #class = "form-control" })
<fieldset>
<div class="main">
<div class="area">
<div style="margin-top:10px;">
#{
Html.CodeEffects().RuleEditor()
.Id("ruleModel")
.ShowToolBar(false)
.Mode(RuleType.Evaluation)
.Rule(ViewBag.Rule)
.DataSources(Model.DataSources)
.ContextMenuRules(Model.Rules)
.Render();
}
#{
Html.CodeEffects().Scripts().Render();
}
</div>
<div class="modal-footer">
<input class="btn btn-default" submit" type="submit"
value="Save" />
<button type="button" class="btn btn-
default">Cancel</button>
</div>
</div>
</div>
</fieldset>
}
UPDATE #2
I took from the AJAX example and did all the RuleEditor settings via the AJAX post/controller methods. That seems to work better, but now the context menu seems disconnected. (See area in Red Circle)RuleEditor In Dialog, Context Menu behind
Most likely your dialog is "disconnected" from the main editor's script and all json settings it receives from the server on load. Another possibility is that your dialog tries to render the editor before those json setting values gets to the client.
I have set up dropzone with a clickable element. Clicking the button causes dropzone to open the file chooser twice, instead of just once, the second coming immediately after the first file has been chosen.
The init code is:
Dropzone.autoDiscover = false;
$(document).ready(function(){
// Remove the template from the document.
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
$("div#photo").dropzone({
url: "/blackhole/",
thumbnailWidth: 240,
thumbnailHeight: 240,
parallelUploads: 1,
maxFiles:1,
maxFilesize: 5,
uploadMultiple: false,
previewTemplate: previewTemplate,
autoProcessQueue: true,
previewsContainer: "#photoPreview",
clickable: ".fileinput-button",
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
}
});
And the page elements are:
<div class="table table-striped" class="files">
<div id="photo">
<div id="actions" class="row">
<div class="col-lg-7">
<button type="button" class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Choose file...</span>
</button>
</div>
</div>
</div>
<div class="files dropzone-previews" id="photoPreview">
<div id="template" class="file-row">
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button data-dz-remove type="button" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
</div>
</div>
</div>
</div>
</div>
Strangely, even though I have added code to replace the any existing file with a later one (so only one file can be uploaded), the second file chooser dialog lets me add a second file.
Its like dropzone has been initialized twice, but I checked that it is only initialized once, and also added the autoDiscover = false option for good measure.
Can anyone spot my mistake?
The problem seems to be in how we initialized dropzone:
$("div#photo").dropzone({
...
}
Doing it the non-jquery way solved the problem:
var myDropZone = new Dropzone("#photo",{
...
}
This was on dropzone 3.11.1.
An issue has been created on github/dropzone:
https://github.com/enyo/dropzone/issues/771
This happens for me when more than one dropzone exists on the page with the same class for a browse trigger, it seems that dropzone attaches the event to any element on the page and not just within its own container
In the issue opened for this, maliayas said:
This bug happens when your clickable element is already an
input[type=file]. Dropzone injects another one and now you have two.
Either dropzone should handle this case or documentation should
mention not to use an input[type=file] for the clickable element.
Changing my dropzone element to something other than an input[type=file] fixed the issue for me.
Attach dropzone to the parent, not the input.
In Chrome if you inspect and look at the eventListeners. You will see that once you attach dropzone to your input, you have an additional click eventListener.
Say you have a list of uploads for documents with a child input element.
<li class="upload drag-and-drop">
<input type="file"/>
</li>
Code:
$('input').dropzone();
Will attach an event listener to an already clickable element. So you have 2 event listeners. One from the browser. One from dropzone. Hence 2 dialogs...
If you attach it to the parent:
$('li.upload').dropzone();
You'll now had the listener at the parent. This allows the bubble up behavior to hit the correct element when you drag and drop and not inadvertently effect the input.
Open a page in dialog style, the close button is added by default. Is there a way to catch the click event of the close button of the dialog page. I like to invoke a callback before the dialog page is closed.
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
This is Page1.
Show Dialog
</div>
<script>
function showDialog() {
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { role: "dialog" } );
}
</script>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
This is Dialog
</div>
</div>
The pagecontainerhide event can be used. but it did not work for ajax. If the dialog page is dynamically created in DOM, the ui.prevPage is not defined for the hide event.
Thanks for any help.
The close button is an anchor tag (<a></a>) in side a header element with class .ui-header inside a dialog container with class ui-dialog-contain. So you can use the jQuery selector:
".ui-dialog-contain .ui-header a"
When you handle the click event, you can get the parent page by finding the closest() DOM element with the ui-dialog class:
$(document).on("pagecreate", "#page1", function(){
$(document).on("click", ".ui-dialog-contain .ui-header a", function(e){
alert("close dialog: " + $(this).closest(".ui-dialog").prop("id"));
});
});
DEMO
I'm trying to add bootstrap modals in my ember app. I'd like to be able to add modals, with a specified template and be able to handle actions. I can't get it works. The modal appears, my controller's properties are bound, but i can't handle actions. I don't understand why. I'd really like to be able to trigger modal from anywhere in my controllers and bind actions on them.
My view looks like this:
App.ModalView = Ember.View.extend({
classNames: ['modal fade'],
attributeBindings: ['role'],
role: 'dialog',
didInsertElement: function() {
this._super();
this.$().modal();
this.$().on('hidden.bs.modal', this.close.bind(this));
},
close: function(event) {
return this.destroy();
}
});
And i instanciate it like this in a random controller:
var modal = controller.container.lookup('view:modal');
modal.reopen({
controller: this,
targetObject: this,
templateName: 'mymodal'
});
return modal.appendTo('body');
My template looks like this:
<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">My Modal Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
My modal content
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn default">Close</button>
<button type="button" class="btn green" {{ action "myaction"}}>My Button with an action</button>
</div>
</div>
</div>
If i try to display some controller properties, it works. But when i click on the button with the "myaction" action nothing happends. Maybe i'm completely wrong about the way to handle modals in my app (i'm pretty new in the Ember's World).
I'm using the last release of ember (1.1.1) and bootstrap 3.
Thanks,
Vinc
I figured it out. In fact, my app was running into a specific dom element (#app). As i was adding the view to the body, my modale was added "outside" my app ! So, the events bubbling chain was broken. Instead of adding my view to the body, i add it to my application root element and now everything works as expected !
There's a good chance that the modal method is disconnecting it from the body, which would break your actions.
See also: Ember.js and Foundation 4 modal window
You shouldn't access view like this
var modal = controller.container.lookup('view:modal');
See Wycats comment here.
Alternatively, This answer may help you in instantiating modals
I found this voting script online and was wondering instead of a onclick alert(You already voted) can i change it to a popup message that i can style with css... i have only submitted a part of the code if you need to see more let me know. thanks in advance
function addVotData(elm_id, vote, nvotes, renot) {
// exists elm_id stored in ivotings
if(ivotings[elm_id]) {
// sets to add "onclick" for vote up (plus), if renot is 0
var clik_up = (renot == 0) ? ' onclick="addVote(this, 1)"' : ' onclick="<a type="button" class="btn" style="width:100%;" href="#test_modal" data-toggle="modal">alert</a>"';
// if vot_plus, add code with <img> 'votplus', else, if vot_updown1/2, add code with <img> 'votup', 'votdown'
if(ivotings[elm_id].className == 'vot_plus') { // simple vote
ivotings[elm_id].innerHTML = '<h6>'+ vote+ '</h6><span><img src="'+votingfiles+'arrow.png" alt="1" title="vote"'+ clik_up+ '/></span>';
};
}
}
You can use Bootstrap modal pop up instead of alert.
This is well explained example
If you need more help let me know
Update
html for model pop up:
<div class="modal fade" id="test_modal"> <div class="modal-header">
<a class="close" data-dismiss="modal">×</a> <h3>Modal Header</h3> </div>
<div class="modal-body"> <p>Test Alert</p> </div> <div class="modal-footer">
Close </div> </div>
Html for Button
<input type="Button" Text="ShowModal" Id="MyButton"/>
javaScript:
$( "#MyButton" ).click(function() {
$('#modalName').modal('show');
});