Detect checkbox change in jstree - javascript

I am using the latest jstree commit from github with the checkbox plugin as a part of my form. I am using the tree with the "real_checkboxes" attribute.
Everything is fine except the checkbox plugin does not actually add any changed property attribute to the hidden field and nor does it seem to have a external function that will allow me to hook in to create custom functionality.
Is it possible for me to understand and listen for when a checkbox is either ticked or unticked?
Thanks,
UPDATE: after doing some experimenting I was able to over ride the default functionality of the check and uncheck methods using:
$.jstree._instance.prototype.check_node = function(node){ alert("here"); }
However it isn't very clean and it does override the whole method.
Is there:
a) a cleaner way to do it?
b) a way to just do a callback on the function rather than replacing the whole damn thing?
Thanks again,

#Noctyrn
Yes I did that originally but then I looked through the docs a lot more closely and found this:
$(".js_tree_'.$this->attribute.' div").bind("check_node.jstree", function(){});
But yes your function does the same :). But since mine is right to the jsTree docs Ima mark my answer as the right one. Also that function allows for different trees on the same page to have different binds so it is better overall :).
Thanks for the help :),

This is actually less clean but at least it gets the job done:
var check_node_func = $.jstree._instance.prototype.check_node;
$.jstree._instance.prototype.check_node = function(node) {
check_node_func.apply(this, arguments);
alert("here");
}

Related

Javarscript issues with dynamic tooltipster

I'm using Tooltipster which seems to be a nice jquery plugin.
Regardless I need to have my tooltips dynamic, which I don't believe should be that difficult. However I wrote a script and maybe it's because I'm tired or I don't know the simplest of javascript. Probably a combination of both.
I can't seem to get around this particular error. TypeError: $(...).tooltipster is not a function.
Here is the basic javascript code:
$("img#box_image[data-img-number]").hover(function(e) {
e.preventDefault();
i = $(this).attr("data-img-number");
var w = "http://trailerbrokerimages.s3.amazonaws.com/pics/" + i ;
window.console.log('before tool');
window.console.log('before tool ' +w);
tool(w);
});
var tool = function (w) {
$('.tooltip_two').tooltipster({content: $('<span><img style="height:191px; width:256px;"src="http://trailerbrokerimages.s3.amazonaws.com/pics/'+w+'" /></span>')});
An example of the code can be found at http://www.trailerbroker.com/go/listings/view/219
I suspect it's lame mistake on my part, thanks.
You have the same id box_image for multiple elements.
I understand that you're trying to make it unique by appending the data-img-number, but this won't work, as there's no way you can do this at run time unless your explicitly specifying different hover handlers.
Instead you could attach the hover handler to a class.
Add a class="box_image" to your <img /> elements and attach the hover as follows,
$(".box_image").hover(//rest of your code here//)
This should give you the desired functionality.
I solved this problem by using twitter bootstrap popover. Don't waste your time with tooltipers.

Disable Jquery UI widget completely

How do I do such a thing? I need to disable the widget completely, meaning that all of the instances should be disabled and NO MORE instances can be created after the disabling. I tried searching, but nothing comes up.
Will appreciate any help.
EDIT:
A more lively example.
Say, I have three instances of my widget placed on three elements. Then I want to turn my widget off. I invoke a static method turnOff, which leads to
a) all working instances to be disabled
b) prohibit any other instances of that widget to be created if they are later called via ajax i.e.
Then I want it to work again, so i invoke a turnOn().
My widget is a hint pugin, so if the user switches hints off, they should be switched off everywhere, and there are places in the app where hinted parts of the page are still being loaded asynchronosly.
That's pretty much what I need to do.
The answer depends on if your widget is obvious when not active -- for example if it's a 'hint' type tooltip that shows on hover then all you need to do is not show the tool tip when it's inactive. However if it also adds formatting to show where the hints are you need to undo that as well.
Let's take the simple case first -- suppose we have a simple widget filler that just adds a class (filled) when the mouse is over the element. Then just have a variable in global scope:
enableFiller = true;
and then check that in your widget:
$.widget( "spacedog.filler", {
_create: function() {
var progress = this.options.value + "%";
this.element.hover(
function() {
if (enableFiller) {
$(this).addClass("filled");
}
},
function() {
$(this).removeClass("filled");
}
);
}
});
Fiddle.
Note that I don't check the flag in the removeClass because the widget might be disabled while the mouse is over a widget and you probably don't want the hover color to accidentally 'stick on'.
From there it's pretty easy to extend to the case where your widget alters the element even when off. I'll do the logic as pseudo-code:
When creating the widget add a base-widget class to the element (even if inactive)
If the widget is on add the active-widget class and do whatever is required
To turn off remove the active-widget class from all base widgets: $(".base-widget").removeClass('active-widget'). You might also need to do some other changes to all the elements -- but they're easy to find.
To turn on add the active-widget class back and adjust everything else
You can embed the turnOn/turnOff functionality into the widget, as long as it uses the global variable as the flag. See this answer for other options for storing the global: How to declare a global variable in JavaScript?
If you get stuck you could post (a simplified version) of your widget code and what you've tried so far and someone can probably help further.

Minimal modifications to jQuery plugin sample to call plugin with no elements

I essentially have the same goal as in this question:
Calling a jQuery plugin without specifying any elements
However I am looking for the minimal edit to add a method to the "conclusion" built up in the jQuery plugin guide...which culminates in a jQuery "data" based tooltip plugin:
http://docs.jquery.com/Plugins/Authoring
I'm looking for the turnkey "right" way to add a method (the sort that finds its place in the list with reposition, show, hide, and update) for something that could be called with no elements. My case is I want to add a debug mode method you can call like:
$.tooltip('debug', true);
Like the author of the question I cite, I can get this working just fine with a parallel to:
$().tooltip('debug', true);
But the supplied answer wasn't cast in terms of the full-on .data-based tooltip plugin structure. So I can't quite figure out where to inject the offered advice of using .extend. Can anyone suggest the minimal edit to get the desired effect?
After looking at this a bit, I think the simplest modification to do is just to inject the extend call right after the $.fn.tooltip = function(method) { ... } and make it a synonym, like this:
$.extend({
tooltip: $.fn.tooltip
});
That seems to do the trick...and in the plugin's methods you just test to see if this is equal to jQuery (or $) to see if it's actually being called on "nothing".

Minimizable side panel in html

I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)
You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.
as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!

jquery ui.slider: add click event to display/hide handle

I am completely new to javascript and jquery. My programming knowledge is... nonexistent, I just started some days ago with some simple tasks like replacing a CSS class or toggling a div. So I want to apologize if I'm treading on someones toes by asking newbie-questions in here. But I hope that someone can help me and solve my problem.
I need to implement some sort of visual analog scale for a survey; ui.slider is perfect for that one. But I need the handle to be hidden by default. When the user clicks on the slider, the handle shall appear in the proper position. That should be fairly simple - at least I hope so - by just hiding the handle with CSS and changing it by a click event on the slider.
I use the following piece of code to wrap a normal div (a div is needed in my understanding to apply the jquery slider.js) to my input elements (they should be - at least visually - replaced by the slider) and pass the value of the slider to the input elements (needed for passing the values to a form). that works properly. (I do that instead of just putting a div in my DOM by default because I cannot influence some PHP scripts that will generate form elements of the survey and so on)
$(function () {
$.each($('.slider'),
function () {
obj = $(this);
obj.wrap('<div></div>');
obj.parent().slider({
change: function (event, ui) {
$('input', this).val(ui.value);
}
});
});
});
Hiding the slider-handle can be done by CSS as described above by changing style properties of a.ui-slider-handle. but when I add a normal click event to the slider (.ui-slider) that changes CSS properties of the handle, nothing happens. As far as my basic knowledge goes it should have something to do with the click event not working on generated DOM elements. Am I right with that one? And if yes: how can I solve this problem? Could someone provide me a piece of code for my function and explain it so I might comprehend what's exactly going on?
I read a tutorial about events on learningjquery.com but I have not made enough progresses the last few days since I started working with JS/jquery to comprehend the steps and translate it into my example/problem. And I am running out of time (I need this for a survey I have to make asap, that's why I hope someone could give me a hint so I can solve this little issue somehow).
Any reason you can't just include the show on the change event rather than a click? It's a bit cleaner code-wise rather than including a whole new event.
$(function() {
$('.slider').wrap('<div></div>').parent().slider({
change: function(event, ui) {
$('input', this).val(ui.value);
$('.ui-slider-handle').show();
}
});
});
Also, there was a bit of redundancy in the code - most jQuery functions return the object itself, so you can chain them. And you don't need that each function, since most jQuery functions also, when applied to a collection, run on all of them :)

Categories