Which is correct?
The following code runs clickedButton when clicking on .my-button within
a) the whole document
b) only #my-element
In case the answer is a). How to do b)?
var MyView = Marionette.ItemView.extend({
el: '#my-element',
ui: {
button: '.my-button'
},
events: {
'click #ui.button': 'clickedButton'
},
The answer is exactly B.
In BackboneJS's delegateEvents, there is scope of DOM when bind events to elements, the code like this:
this.$el.on(eventName, selector, method);
You could run this:
HTML is
<button class="my-button">Click Me - 1</button>
<div id="my-element">
<p>Hello World</p>
<button class="my-button">Click Me - 2</button>
</div>
Scripts is
var MyView = Marionette.ItemView.extend({
el: '#my-element',
template: false,
ui: {
paragraph: 'p',
button: '.my-button'
},
events: {
'click #ui.button': 'clickedButton'
},
clickedButton: function(evt) {
console.log('I clicked the button ['+$(evt.target).html()+']!');
}
});
Related
I have this dropdown menu that if I click value on it, I would like to trigger a function but is not working.
<data-list
ref="UiGroupName"
name="groupName"
id="groupName"
keyProperty="groupName"
label='Group Name: '
:options="shift_groups"
:change="gotoGroups()"
></data-list>
I have also tried #click on :change="gotoGroups()" but still doesn't work. Am I missing something?
To trigger event from child to parent you need to use $event
Vue.component('child', {
template: '<button #click="trigger">Trigger for Parent</button>',
methods: {
trigger: function () {
this.$emit('triggerparent')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
msg: ''
},
methods: {
actionParent: function () {
console.log('Parent triggerd at : '+(new Date()).getTime());
this.msg = 'Parent triggerd at : '+(new Date()).getTime();
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="counter-event-example">
<p>{{ msg }}</p>
<child #triggerparent="actionParent"></child>
</div>
I have a Kendo treeview that is built as below codes (see below). Each tree node has a unique data id field (that is employee Id).
I would like to have a text box ( <input type="text" ... /> ) and a button ( <input type="button" ... /> ) so user can input some id and when she hit the button, the button click event handler will let the treeview expand the node whose id matches the input id. How can I do that? Thank you very much.
Details of click event handler or the button:
function buttonExpand_onClick()
{
var id = $("textboxEmployeeId").val();
// ???
// how can I do the following code lines to expand the node with id of "id" to see all its children?
}
Details of the existing Kendo treeview building codes:
<div id="treeviewEmployee">
</div>
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text #
</script>
$(function(
{
var defaultRootSelectedId = 1; // 1 is employee id of the root employee on first loading
$.ajax({
url: '/Employee/AjaxGetEmployeeNodes/?id=' + defaultRootSelectedId,
type: 'GET',
dataType: 'json',
async: false,
success: function (data, textStatus, xhr) {
$("#reeviewEmployee").kendoTreeView({
template: kendo.template($("#treeview-template").html()),
dataSource: data,
select: treeview_onSelect
});
_treeview = $("#treeviewEmployee").data("kendoTreeView");
},
error:
function (xhr, textStatus, errorThrown) {
alert(textStatus);
}
});
});
You can access the datasource on the treeview and find the node by id. I would also like to add that the treeView has a 'findByText()' method as well, in case that is what you want.
HTML
<script id="treeTemplate" type="text/x-kendo-template">
#: item.text #
</script>
<div id="content">
<div id="form">
<label>Node ID:
<input id="nodeId" type="text"/>
</label>
<button id="expandNodeBtn">Expand Node</button>
</div>
<h2>TreeView</h2>
<div id="treeView"/>
</div>
JAVASCRIPT
(function ($) {
$(document).ready(function () {
$("#treeView").kendoTreeView({
dataSource: [
{
text: 'one with id 1',
id: 1,
items: [
{
text: 'one-child-1',
id: 2
},
{
text: 'one-child-2',
id: 3
}
]
},
{
text: 'two with id 4',
id: 4,
items: [
{
text: 'two-child-1',
id: 5
},
{
text: 'two-child-2',
id: 6
}
]
}
]
});
$("#expandNodeBtn").on("click", function(e) {
var val = $("#nodeId").val();
console.log('val: ' + val);
var treeView = $("#treeView").data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(val); // find item with id = 5
var node = treeView.findByUid(dataItem.uid);
treeView.expand(node);
});
});
})(jQuery);
JSFiddle
I also put together a JSFiddle sample for you to play with: http://jsfiddle.net/jsonsee/D35Q6/
Slightly related, but I came here looking for an answer to this question: How to expand the whole branch when clicking to a parent node in angular treeview? Since I didnt find any answers, I post my solution here. Hope it helps someone.
html
<div id="treeview" kendo-tree-view="tree" k-options="options" k-on-change="selectItem(dataItem)">
</div>
controller
$scope.options = {
dataSource: dummyData,
template: $scope.treeItemTemplate
}
$scope.treeItemTemplate = "<button ng-click='expandRoot(dataItem)'>Blow up</button>";
$scope.expandRoot = function expandRoot(dataItem) {
dataItem.expanded = true;
if (dataItem.hasChildren) {
dataItem.load()
var children = dataItem.children.data();
children.forEach(function (c) {
c.expanded = true;
$scope.expandRoot(c)
});
}
}
How does one get the caller (sender) of the kendoui datepicker widget? Or any widget for that matter.
<input id="datepicker1" class="datepicker" value="10/10/2011" />
$(document).ready(function () {
// ready
$(".datepicker").kendoDatePicker({
change: onchange
});
});
function onchange(e) {
$(this).hide();
}
Here is a fiddle: http://jsfiddle.net/bryanb/zz48F/
The sender is available as this.element. It will be a jQuery object:
$(function () {
function onchange(e) {
alert(this.element.prop("id"));
}
$(".datepicker").kendoDatePicker({
change: onchange
});
});
http://jsfiddle.net/zz48F/3/
If you are using kendo button:
You can get the sender in the onclick event of the button using the following :
clickSelector(e) {
alert("button " + e.sender.element.prop("id"));
}
and you call clickSelector from the on click event of the button(s)
for example if you have the buttons:
<button id="btnStudentAccounts" type="button" class="k-button">Student Accounts</button>
<button id="btnFaculty" type="button" class="k-button">Faculty</button>
And the code:
that = this;
$("#btnStudentAccounts").kendoButton({
enable: true,
click: function (e) {
that.clickSelector(e);
}
});
$("#btnFaculty").kendoButton({
enable: true,
click: function (e) {
that.clickSelector(e);
}
});
if you click over btnFaculty you get:
button btnFaculty
I need a modal pop up for a button using jquery. I have worked with modal popups for an action link, nut I need it to work with a button only.
The jquery that I used for the action link:
<%: Html.ActionLink("Create", "Create_By_SupAdmin", null, new { #class = "openDialog",
data_dialog_id = "newPostDialog", data_dialog_title = "Create New Profile" }) %>
Is:
$(document).ready(function () {
$('.openDialog').live('click', function (e) {
e.preventDefault();
$('<div></div>')
.addClass('dialog')
.attr('id', $(this)
.attr('data-dialog-id'))
.appendTo('body')
.dialog({
title: $(this).attr('data-dialog-title'),
close: function () {
$(this).remove()
window.location.reload()
},
modal: true,
width: 500
})
.load(this.href);
});
});
Problem
I need to apply this same behavior for the button.
You could use jQuery UI Dialog. If you made it work with an ActionLink it would be the same with a button. Define a button and a placeholder for the dialog:
<input type="button" id="btn" value="Show modal" />
<div id="dialog"></div>
and then subscribe to the click event of the button and show the dialog:
$('#btn').click(function() {
$('#dialog').dialog().html('some contents');
});
and here's a live demo.
Now that you have shown your code here's how to adapt it to work with a button:
<input type="button" value="Create" class="openDialog" data-dialog-id = "newPostDialog", data-dialog-title="Create New Profile" data-url="<%= Url.Action("Create_By_SupAdmin") %>" />
and then:
$(document).ready(function () {
$('.openDialog').live('click', function (e) {
e.preventDefault();
$('<div></div>')
.addClass('dialog')
.attr('id', $(this).attr('data-dialog-id'))
.appendTo('body')
.dialog({
title: $(this).attr('data-dialog-title'),
close: function () {
$(this).remove();
window.location.reload();
},
modal: true,
width: 500
})
.load($(this).attr('data-url'));
});
});
Iam in parent view while clicking the button in the parent view I want to load content of another view in jquery ui dialog. I tried with the following code. but jquery ui dialog initially show the content of the another view, then it doesn't show the content of the another view.
<button id="btn_newtrade" name="btn_newtrade" class="newtrade">New Trade</button>
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen:false,
width: 1400,
height:600,
resizable: false,
title: 'New Trades',
modal: true,
open: function(event, ui) {
$(this).load('#Url.Action("NewTrade","Trade")');
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
});
$('.newtrade').click(function () {
$('#dialog').dialog('open');
});
</script>
<div id="dialog" style="display:none;"></div>
You could try something like this
$('.newtrade').click(function () {
$('#dialog').load('#Url.Action("NewTrade","Trade")').dialog('open');
});
and remove the open event handler.