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');
});
Related
I have given a rough code to understand what I need to perform,
/app/route1/controller.js
export default Controller.extend({
test: function(id) {
$.ajax({
.....
.....
.....
}).then(() => {
set('message','successfully added');
});
}
});
/app/route1/template.hbs
<div class="ui container">
<div class="ui segment"
<button class="ui button" {{action "test" model.id}}>Submit</button>
</div>
</div>
<div class="ui container">
<div class="ui modal">
<div class="header"
Message
</div>
<div class="content"
{{message}}
</div>
<div class="actions">
<div class="ui ok button">OK</button>
</div>
</div>
</div>
<script type="text/javascript">
$.ajax({
if(message) {
$('.ui.modal').modal('show');
}
})
</script>
If I set a message in controller then, I have to show this message in the MODAL. The Ajax command that I've written is not correct., Please help to solve this issue.
Thanks in advance
First, you must not use <script> tags with ember. This won't work as expected and is in no way supported.
If you have to manually access DOM you should use the didInsertElement of a component.
Are you absolutly sure you want to build your modal yourself? There are many addons providing a nice API for modals. If you can use one of them. If you cant you basically have to write your own modal component.
I will not instruct your in detail how to do this, because this seems not to be your primary question.
Now about your test function. first you seem to try to use it as an action:
{{action "test" model.id}}
however for this you must place the function under the actions hash.
Next this line is wrong:
set('message','successfully added');
you either must use this.set('message','successfully added'); or set(this, 'message','successfully added');
Then you can display your message like this:
{{#if message}}
{{#modal-dialog
onClose=(action (mut isShowingBasic) false)
}}
{{message}}
{{/modal-dialog}}
{{/if}}
And it will work as expected.
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.
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 have an Ajax Modal and have a number of links within the modal, however when I click on the links it will reload the page not the content within the Modal. How can I keep the Modal open? The code I am using:
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header 2</h3>
</div>
<div class="modal-body">
//content
<div class="modal-footer">
<a class="btn btn-primary" onclick="$('.modal-body > form').submit();">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>
$(document).ready(function() {
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});
Chose to use an iFrame plugin https://github.com/Nikku/jquery-bootstrap-scripting/pull/69
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