$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
How do I call this as a Backbone event?
The plugin you're using is for jquery-ui which is based on jquery. Since backbone uses jQuery for delegating DOM events, you should be able to handle this in the normal backbone way, assuming the plugin uses normal jQuery events:
events:{
'apply.daterangepicker input[name="datefilter"]': 'handler'
},
handler: function(){}
Related
i have a problem with vuejs and kendo ui.
I need to click a tr columns
<kendo-grid-column #click="clicked"></kendo-grid-column>
i also used a #click.native but nothing
i've created also a template with <a> tag that calls "clicked" method
demo
http://dojo.telerik.com/#aldoZumaran/UTOGo
Maybe this is not exactly what you want, but it's possible to enable Sorting on the Grid and intercept the Sort Event for further handling.
Change your kendo-grid, add:
:sortable='true'
#sort='callback'
The Callback method syntax was also a bit weird, use:
callback: function(e) {
console.log(e.sort.field);
console.log(e.sort.dir);
}
Maybe this is the right place to execute your actions.
UPDATE
It's possible to call e.preventDefault(); in callback method to prevent default sorting action:
callback: function(e) {
if (e.sort.field === 'UnitPrice') {
console.log('Sort by Price not allowed!');
e.preventDefault();
}
}
I'm working on a web application project using Scala / Lift. I would like to make my application support drag and drop to improve the user experience.
But I'm not quite sure how to bridge jQuery part with Lift.
Currently I've a working UI part, an div block has class named listRow is dragable with an HTML5 attribute data-stuffid which has an ID from database.
It can be dragged to an block named nextAction, and I could print out the data-stuffid field correctly in JavaScript.
Here is my JavaScript code block:
<script type="text/javascript">
$('.listRow').draggable({
revert: true
});
$("#nextAction").droppable({
accept: ".listRow",
tolerance: "pointer",
activeClass: "dropActive",
hoverClass: "dropHover",
drop: function(event, ui) {
var stuffID = ui.draggable.data("stuffid")
console.log(stuffID)
}
})
But I don't know how to call to a Lift AJAX handler, and pass stuffID to Lift in the case.
What I would like to do is have an Scala function likes the following:
def showDialog(stuffID: String): JsCmds
{
// Do some server side work, ex: querying database
// Return a javascript cmds likes SHtml.ajaxButton...etc.
Alert("SutffID:" + stuffID)
}
And when user drag a .listRow to "#nextAction", showDialog would be called, and return the javascript to browser and let browser execute it.
You probably looking for one of these two functions. I'd take a look at :
JsCmds.Function and SHtml.ajaxCall
JsCmds.Function will allow you to create a JavaScript function, and SHtml.ajaxCall will allow you to execute code via ajax. You'd create a function in your Lift CSS Selector and then you'd be able to call that functions directly from your jQuery code.
There are a lot of discussions on using both those, some relevant info might be:
https://groups.google.com/forum/?fromgroups=#!topic/liftweb/4EyE1EbcDDM
https://groups.google.com/forum/?fromgroups=#!topic/liftweb/aAmvSjPxcyI
When initializing jquery from lift, just send lift ajax callback as parameter
I am using backbone.js and trying to stay strict to the model-view-controller structure as I learn it. I have an onclick function for a link in one of my views that I am not sure where to put. Is the best place to keep this in the render function of the view?
Thanks
More specifically, the onclick performs a facebook login and then adds the user to my database if they are not currently in it. Don't know if this changes anything.
Here is what I think I will go with:
var NewUserView = Backbone.View.extend({
el: $('#window'),
render: function(){
// Render
this.listeners();
},
listeners: function(){
// onclick and other listeners
}
});
From the Backbone documentation:
In Backbone, the View class can also be thought of as a kind of
controller, dispatching events that originate from the UI, with the
HTML template serving as the true view. We call it a View because it
represents a logical chunk of UI, responsible for the contents of a
single DOM element.
Here's the general way to handle events in Backbone:
var NewUserView = Backbone.View.extend({
el: $('#window'),
render: function() {
// Render
},
events: {
"click #facebookButton": "loginViaFacebook"
},
loginViaFacebook: {
// Perform facebook login and add user to database
}
});
Where do you want the link to appear? On View page right? So , you should keep it in the same view on which you want the link to appear.
But , if you are building an architecture rather than just a web application, then you should put the onclick function in some different file where you will keep all these function and then import them in the view as required or keeping them in separate files and bundling them for import on view page.
Please make a file and write all the functions in that file and include that file in the your view file and use the onClick in the anchor tag. Please let me know if this make sense.
In Metor 0.3.5, when all events were jQuery events, I was able to use use jQuery UI Draggable and then handle the drag & dragstop events using a Metor event map:
Template.game.events['dragstop .card'] = function (e) {
//stuff
};
But I just read this in the Meteor mailing list:
In 0.3.6, event maps no longer depend on jQuery
And sure enough, the above technique no longer seems to work – my dragstop handler isn't called at all now.
I'd greatly appreciate any advice as to how to achieve the same effect in 0.3.6.
Nowadays, you can simply use body events to accomplish this the "Meteor" way:
Template.body.events({
'dragstop #somedivid': function(e) {
// Do stuff
}
});
Custom jQuery events can be bound with plain old jQuery, bypassing event maps altogether:
$(function () {
$('body').on('dragstop', '.card', function (e) {
//stuff
});
});
Remember to use jQuery's on function to bind the handlers, since template elements are not necessarily included in the DOM at all times.
Hy,
I want to bind an event to
< INPUT type=checkbox value='true' name='selectedRows[]' id='sel_id_" + i + "'class='editor-checkbox selected_rows' hideFocus />
but I couldn't find a good jquery selector. If I put an onclick event I can only call functions that are not in the $(function() { }); block and in this case I can't make use of some core functions.
Here is the link to it http://li.ro/4bJw
Thanks!
I've added a sample implementation at https://github.com/mleibman/SlickGrid/blob/master/examples/example-checkbox-row-select.html
This is part of the 2.0 release.