I´m trying to create an event that when pussing a button in the .ejs file the color of some datetable column changes. The thing is that I´m not able to get into that function... I guess the code is not correct. Any clue?
Result.ejs
<div class="btn-group pull-right">
<button id="cancelButton" class="btn btn-sm btn-round btn-danger" style="margin-right:5px"><i class="ace-icon fa fa-stop"></i>Cancelar</button>
</div>
list_view.js
List.Layout = Marionette.LayoutView.extend({
template: "#resultadomonitorizacion-list-layout",
events: {
"submit #btn-group pull-right #cancelButton": "cancelarMonitorizacion"
},
ui: {
datatable: "#datatable",
inputSearch: ".dataTables_filter input"
},
cancelarMonitorizacion: function (e) {
console.log("hello")
},
DONE!!! It was a marionette and jquery selectors problem
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
events: {
"click #cancelButton": "cancelarMonitorizacion"
},
Related
I am using the #jsplumb/browser-ui to create some Nodes within my Nuxtjs/Vuejs application like as mentioned in their documentation. But I would like to create the Nodes at run-time. I am unable to do it.
I would like to create the nodes/rectangle shapes whenever the user clicks on the Add Event button. So rather than creating the Nodes static way I would like to create it dynamically/run time based on the button click. I am not understanding how to do it using jsPlumb documentation how to do it as they don't have a specific code sample to achieve the same.
Following is the code I have:
<template>
<div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary btn-sm" #click="addConnector()">
Add Connector
</button>
<button class="btn btn-primary btn-sm" #click="addNode()">
Add Event
</button>
<button class="btn btn-success btn-sm" #click="submitEvents()">
Submit
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="diagram" ref="diagram" style="position: relative; width:100%; height:100%;" />
</div>
</div>
</div>
</div>
</template>
<script>
let jsPlumb = null
export default {
data () {
return {
nodeCounter: 0,
nodeArray: [],
connectorCounter: 0,
connectorArray: [],
allEventsInfoArray: []
}
},
async mounted () {
if (process.browser) {
const jsPlumbBrowserUI = await import('#jsplumb/browser-ui')
jsPlumb = jsPlumbBrowserUI.newInstance({
dragOptions: {
cursor: 'pointer',
zIndex: 2000
},
container: this.$refs.diagram
})
console.log(jsPlumb)
}
},
methods: {
// On click of Add Node button create the draggable node into the jsPlumb canvas
addNode () {
// const container = "<button class='btn btn-info' id='container_" + this.nodeCounter + "'></button>"
this.nodeCounter++
},
// On click of Add Connector button create the draggable node into the jsPlumb canvas
addConnector () {
console.log('Add Connector : ')
jsPlumb.connect({
anchor: 'AutoDefault',
endpoints: ['Dot', 'Blank'],
overlays: [
{ type: 'Arrow', options: { location: 1 } },
{
type: 'Label',
options: { label: 'foo', location: 0.25, id: 'myLabel' }
}
]
})
}
}
}
</script>
<style scoped>
</style>
Hoping this answer would be helpful to someone in the future:
As per the response from contributors GitHub, we cannot create the Nodes/Shapes within the Jsplumb community edition.
Instead of Jsplumb, I started using the DrawFlow library which is just awesome and has all the requirements that I needed for my application.
I want to add playlist to jplayer using checkbox and when i click the checkbox the url has to get added to jplayer playlist,i am having url when i click the checkbox i am getting particular url but i am unable to add to myplaylist please any one help me, when i add it show me undefined
//This array object
var playList = new Array();
//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
self.Selected= function (item) {
var url = Voiceurl();
playList.push(url);
console.log(playList);
//this function i am calling to add to playlist
JplayerWithPlaylist(playList)
}
function JplayerWithPlaylist(playList) {
console.log(playList);
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
var options = {
swfPath: "./js",
supplied: "oga"
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playList, options);
for (i = 0; i < playList.length; i++) {
myPlaylist.add(playList[i])
};
};
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<div class="my-row btn-group jp-controls">
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-backward jp-previous" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-play jp-play" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-pause jp-pause" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-forward jp-next" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-stop jp-stop" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-off jp-mute" tabindex="1" title="mute"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-down jp-unmute" tabindex="1" title="unmute"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-up jp-volume-max" tabindex="1" title="max volume"></button>
</div>
</div>
<div class="jp-playlist">
<ul class="list-unstyled">
<li></li>
</ul>
</div>
</div>
Please read http://jplayer.org/latest/demo-02-jPlayerPlaylist/.
Why are you creating a new Playlist on each add? This is very expensive and will just overwrite your other one.
Create the playlist on page load and add to the playlist on checkbox ticked.
It seems like you push a url onto playlist and then add each url to the playlist which is incorrect.
The add() method for jPlayerPlaylist takes an object and not a string as it's parameter:
E.g.
myPlaylist.add({
title:"Your Face",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
});
Also item is unused in your function.
Try this:
$(function() {
var jPlayerPlaylistConfig = {
cssSelector: {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},
options: {
swfPath: "./js",
supplied: "oga"
},
playlist: []
};
var myPlaylist = new jPlayerPlaylist(jPlayerPlaylistConfig.cssSelector, jPlayerPlaylistConfig.playList, jPlayerPlaylistConfig.options);
//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
self.Selected = function () {
var url = Voiceurl();
console.log(url); //Make sure URL actually exists
myPlaylist.add({
mp3: url,
});
}
});
Ask me if you need more help.
Given the following html:
<div class="list-group-item" ng-repeat="sd in dc.sourceDocuments.items">
<div class="btn-group pull-right" role="group">
<button type="button" data-toggle="tooltip" title="open" class="btn btn-default"><span class="fa fa-envelope-o"></span></button>
<button ng-click="dc.markComplete(sd)" type="button" data-toggle="tooltip" title="mark complete" class="btn btn-default"><span class="fa fa-check"></span></button>
</div>
The typescript method markComplete removes an item from the list after a successful post.
public markComplete(document: SourceDocument): void {
this.$service
.markComplete(document.id)
.then(() => this.remove(document));
}
public remove(document: SourceDocument): void {
var index = this.sourceDocuments.items.indexOf(document);
this.sourceDocuments.items.splice(index, 1);
this.$log.log(`removed document id: ${document.id}`);
}
Angular quite correctly and instantly removes the item from the list.
how do I animate the removal to make the item fade out using angular animate
Note: Whole code can be found here:
https://github.com/Julian-Th/crowducate-platform/tree/feature/courseEditRights
The issue: I can't retrieve the {{this}} value with an event. Console.log() is printing 0.
My HTML:
<!-- Modal to control who can collaborate on a course-->
<template name="modalAddCollaborators">
<div id="modalAddCollaborators" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Manage Your Collaborators</h4>
</div>
<div class="modal-body">
<form class="form" role="form">
<ul class="list-group">
{{#each addedCollaborators}}
{{#each canEditCourse}}
<li class="list-group-item js-listed-collaborator">{{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a></li>
{{/each}}
{{/each}}
</ul>
<div class="form-group">
<input class="form-control typeahead" type="text" id="collaboratorName" placeholder="add a collaborator ..." data-source="courses" autocomplete="off" spellcheck="off">
<button type="button" id="js-addCollaborator" class="btn btn-success">Add</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
My JS:
Template.modalAddCollaborators.rendered = function() {
// initializes all typeahead instances
Meteor.typeahead.inject();
};
Template.modalAddCollaborators.courses = function(){
return Courses.find().fetch().map(function(it){ return it.author; });
//return users.find().fetch().map(function(it){ return it.username; });
};
Template.modalAddCollaborators.helpers({
'addedCollaborators': function () {
return Courses.find().fetch();
}
});
Template.modalAddCollaborators.events({
'click #js-addCollaborator' : function (event) {
var collaboratorName = $('#collaboratorName').val(); //
Courses.update(
{_id: this._id},
{$addToSet: {canEditCourse: collaboratorName}}
);
$('#collaboratorName').val("");
},
'click #remove-collaborator': function (event) {
var listedCollaborator = $('.js-listed-collaborator').val();
console.log(listedCollaborator);
Courses.update(
{_id: this._id },
{$pull: {canEditCourse: listedCollaborator}}
);
}
});
My MongoDB JSON:
{
"_id" : "j7A3tFdFBn5ECQGwe",
"title" : "Beatles",
"coverImageId" : "RERiadyMx8j8C9QQi",
"author" : "John",
"keywords" : [
"Paul"
],
"published" : "true",
"about" : "Testing the Course",
"canEditCourse" : [
"uo8SMdNroPGnxMoRg",
"FLhFJEczF4ak7CxqN",
"lkahdakjshdal",
"asödjaöslkdjalsöSA"
],
"createdById" : "uo8SMdNroPGnxMoRg",
"dateCreated" : ISODate("2015-12-28T16:30:34.714Z")
}
As seen in the JS-File, my final goal is to delete the clicked user from an array.
To get the text of the li item in the child link click event, combine the use of .parent() and .text() (since you can't use .val() on list items):
'click #remove-collaborator': function (event) {
console.log(event.target);
var listedCollaborator = $(event.currentTarget).parent().text();
console.log(listedCollaborator);
console.log(JSON.stringify(Template.parentData(0)));
Courses.update(
{
_id: Template.parentData(0)._id, /* or _id: Template.currentData()._id, */
canEditCourse: listedCollaborator
},
{ $pull: { canEditCourse: listedCollaborator } }
);
}
Notice you can use the current DOM element within the event bubbling phase through event.currentTarget to reference the element that kicked off the event. Since the element is the anchor tag, you get the li item as
its .parent(), and subsequently get its value with .text().
As for the update, use Template.parentData() to get the parent _id. Specify a parameter of 0 in the method which denotes the current data context level to look.
For example, Template.parentData(0) is equivalent to Template.currentData(). Template.parentData(2) is equivalent to {{../..}} in a template.
Since you've attached your event handler to the modalAddCollaborators template this will be the data context of that template which is nothing.
Just setup a nested template at the level you want to catch the event.
Furthermore with this pattern you can identify the _id of the collaborator directly, it will be this. The course _id however comes from the context of the parent template. (I'm not sure whether the course level data context is 1 or 2 levels higher however).
html:
{{#each canEditCourse}}
{{> nestedTemplate }}
{{/each}}
<template name="nestedTemplate">
<li class="list-group-item js-listed-collaborator">
{{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a>
</li>
</template>
js:
Template.nestedTemplate.events({
'click #remove-collaborator': function (event) {
Courses.update({_id: Template.parentData()._id },{$pull: {canEditCourse: this}});
}
});
I am trying to create a dynamic Bootstrap dropdown button when the page load using this function
function loadPage(){
var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li>Action</li><li>Action 2</li></ul>');
$("#col1").append(fType);
}
But when I try to add onclick event on one of the options it doesn't work! This is my javascript
$('#act1').click(function(e) {
e.preventDefault();
alert('alerted');
});
Thanks.
Since content is new to DOM, you must init the click listener AFTER you load the button.
function loadPage() {
var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li>Action</li><li>Action 2</li></ul>');
$("#col1").append(fType).promise().done(function () {
$('#act1').click(function (e) {
e.preventDefault();
alert('alerted');
});
});
}