How to make a jquery plugin use jquery.live? - javascript

I am kinda in a bind. I got this color picker plugin that I am using and some text-boxes. So the color picker script runs and binds it too these text-boxes. But later on I dynamically load up more text-boxes and I want them to have the color picker plugin put on those text-boxes.
But currently it won't and I have no clue how to make them get this plugin. I tried "live" but that did not work too well.

Since the $.live() can potentially slow things down, you might consider rebinding the function every time you create a new textbox.
$("#whateverDiv").append("<input type='text' class='specialTextbox' />";
$(".specialTextbox").colorPicker();
//some time later
$("#anotherDiv").append("<input type='text' class='specialTextbox' />";
$(".specialTextbox").colorPicker();

$('button').live('click', function() {
functionInvocation( this );
});
That would attach a click event handler to any button elements added. You could adjust this to another type of action, but can you be more specific about what you need and how your color picker specifically works?

How does the color picker script attach itself to the inputs in the first place? With Thickbox, for example, it's simply a call to
tb_init('some-selector-here-to-which-thickboxes-should-be-applied');
Is there a corresponding call for this plugin that you could simply invoke yourself when you add the additional inputs later?
If not, it may require modification of the plugin to support that behavior.

Try editing the plugin itself by replacing bind with live within the function. Or add a parameter to use live rather than bind.
$(target).click(function(){
//plugin codes
});
//replace with this
$(target).live('click',function(){
//plugin codes
});

Related

jquery: comboBox.trigger(´chosen:update´) documentation?

comboBox.trigger(´chosen:updated´) what does this do in Jquery?
Anyone can give an example?
I dont see any effect or utility.
I really search over 20 links over google and I cannot find the documentation.
---- correcions ----
´chosen:update´ to ´chosen:updated´
comboBox.trigger(´chosen:update´)
comboBox
You will have a variable that points to a jquery collection containing a select, likely setup using
let comboBox = $("#mySelect");
.trigger
Raises the named event
'chosen:update'
the name of the event to raise.
In this case, the event is namespaced, this just allows it to be specifically looked for in the chosen namespace. It could also be .trigger("updated") and chosen2 will likely pick it up - this stop other code such as .on("update".. from triggering.
It also appears to be a typo as the event (depending on the version of chosen2) should be updated.
All together, you call this code when you change the value of the underlying select, eg:
var comboBox = $("#mySelect");
comboBox.val("newValue");
comboBox.trigger(´chosen:update´)
when your select has been converted to a select2 combo box. Without which, the select2 UI would not be updated to match the new value.
NB: The event to trigger appears to change with each version of select2, it could be one of:
comboBox.trigger('chosen:updated');
comboBox.trigger('change');

How can I get notified when the timezone-picker value is changed?

I'm using timezone-picker to pick my timezones, and so far it's working great.
However, the one problem is that I can't convince it to tell me when the value is changed by using one of the quickLink buttons.
You can try this by going to the demo and sticking this code in your console:
jQuery("#map select").on("change", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
If you do that, you'll see that changing the value via dropdown works just fine, but if you use the buttons to the right of the dropdown, it won't fire the handler. I'm guessing that's because the code isn't calling .trigger when it sets the value, and yeah I could probably modify the Javascript myself but that seems like the wrong thing to do... is there any other way to get notified when this value changes?
You could hook to the map:clicked events (as defined diggin' in to the source code).
Check this code in the demo page:
jQuery("#map").on("map:clicked", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
The only difference is that you need to hook it to the initialization element (#map). There is no trigger on the main select element. The defined binded event is map:clicked. It will execute each time you change the selected option, click on the map or select one of the quick links.
Hope it helps.

Setting up a callback for the DatetimepickerBundle

I use the DatetimepickerBundle in my Symfony project. In one form I have two date fields, start and end. I want the end field to update automatically when the start field is changed, so the user doesn't have to select the date again, since most events will have their start and end on the same day.
The Bundle is based on the bootstrap-datetimepicker by smalot and generates the following javascript for each field:
jQuery(document).ready(function($) {
$field = $('#app_bundle_event_start');
$field.datetimepicker({"formatter":"js","format":"dd.mm.yyyy hh:ii","autoclose":true,"language":"de"});
});
I added the following code in the template, but it doesn't do anything.
jQuery(document).ready(function($) {
$('#app_bundle_event_start').datetimepicker().on('changeDate', function(ev){
$('#app_bundle_event_end').datetimepicker('update', ev.date);
});
}
If I don't wrap it in the document-ready callback, the end-date is updated, but on the start-date field the datetimepicker is re-initialized and loses all its options.
How can I add this event callback to an already initialized datetimepicker?
I believe, although I am not 100% sure, that .on() actually belongs to standard jQuery event. Basically, you do not need to call datepicker() again.
So, to attach callback to already initialized Datepicker just do:
$('#app_bundle_event_start').on('changeDate', function(ev){
$('#app_bundle_event_end').datetimepicker('update', ev.date);
});
Is this what you wanted to achieve?

Get onchange event if I don't write in a input text

I have a table and when I click in a row the data of this row is copy to some input text. I have an empty select combobox and this will fill with one thing or another depend the content of the input. I'm ussing the event onchange for do this but it doesn't work because I'm not writing in the input. I put here the relevant code.
<td><input type="text" id="club" value="" onchange="load()"/></td>
function load()
{
var club=document.getElementById("club").value;
alert(club);
}
Pretty and straight forward way of doing this is to use bindings as in some reactive libraries like knockoutjs.
A quick hack is to call your load function in the click handler for a row after all your processing. ( copying text n all).
Firstly, the script in question has to be withing tags if you're defining it inline with html (which I don't recommend)
secondly, you'll need to prepend your function call with javascript: e.g.
onchange="javascript:load()"
I would recommend looking into event listeners or jquery instead, however.
document.getElementById("club").onchange();
Should do the trick. You can fire these events manually!

Stop custom datatables search box from loosing focus

I'm trying to customize the datatables search box in order to better integrate it into a bootstrap based UI. I have a table-controlbar 'horicontal_group' that contains other controls where I'd like to put the search box. It works as far as I can generate filtering events, however there is one very annoying problem:
the search box is loosing focus, every time the filter function is called.
This is a stopgap since I'd like typeahead functionality instead of letting the user click a button to search. I'd also implement a delay between keypresses and filter events of course, but first I have to deal with this focus issue.
This is how the dom looks like using the default 'f' option in datatable's sDom:
This is what I'd like to have:
wrapper_div.find('.dataTables_filter input')
.addClass('form-control tableview-search')
.appendTo(horicontal_group) //if this is uncommented, it works fine
.bind('keypress keyup', function(e){
datatable.fnFilter(searchTerm);
});
What I've tried so far (without any effect on the outcome):
use a freshly created input field instead of the field provided by the sDom-parameter 'f' (and delete 'f' from sDom)
use stopPropagation() on the event
unbind the events on the input field before binding the new ones
use .on('input' ..) instead of .bind('keypress keyup' ..)
append the whole dataTables_filter div to horicontal_group instead of just the input field
Ok, while writing this I've thought about it some more and I came to a solution that I'm gonna leave here. Using the built-in wrapper-div and adapting it to bootstrap instead of recreating it from scratch, solved my issues. If you have more insight on why the focus is lost I'd still be glad for your input.
I now initialize the sDom like this:
sDom: '<"row"<"col-lg-12 col-tableview-controls"f>><"row"<"col-lg-12"RlrtiS>>'
After dt is initialized I fixup the dom like this (note that I also used the merged search box from this thread: Add Bootstrap Glyphicon to Input Box:
var horicontal_group = wrapper_div.find('.dataTables_filter');
horicontal_group.addClass('input-group pull-right horicontal-group');
var merged_input = $("<div class='input-group merged'><span class='input-group-addon search-addon glyphicon glyphicon-search'></span></div>")
.appendTo(horicontal_group);
var input = horicontal_group.find('input');
input.addClass('form-control tableview-search')
.appendTo(merged_input)
.on("focus blur", function() {
$(this).prev().toggleClass("focusedInput")
});
var label = horicontal_group.find('label');
label.remove();

Categories