Setting up a callback for the DatetimepickerBundle - javascript

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?

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');

jQuery validate not binding to keyup events [duplicate]

This question already has answers here:
onkeyup and onfocusout is not working in jQuery Validate
(1 answer)
jQuery validate plugin: validate on blur() by default
(1 answer)
Closed 5 years ago.
I'm making a "contact me" page, with jQuery validation. My main content box is reloaded with ajax to change content when the user clicks on a new page. The problem I'm having now is to bind an event handler for the validate function. what I got now is
$(document).ready(function(){
$('body').bind('focus focusout keyup', function() {
$('#contact_me').validate({
But it's not working like intended. I have to start typing, then click out of the input field and then click on it again before it starts to validate the input field value. I want it to validate on focus, focusout and keyup. I think the problem is with the event handler somehow. Any suggestions?
Here is a JSfiddle with the script: https://jsfiddle.net/z6h9d028/4/
I can see now that the eventhandler is not the problem. When i type in a input field its not validating the value until i click out of the box. After the first validation i works on keyup as well. How can i get i to work on keyup stright away?
Edit 2:
Updated fiddle: https://jsfiddle.net/z6h9d028/7/
It's almost working now! I just need to get all the error messages to show when clicking the submit button. And to find a way to show the error message when you type one character and then remove it if the input field is required (it does show it if you type once, then remove, type again and remove. but not the first time)
You don't need to set your own event listeners, or at least if you do, you shouldn't be using them on the .validate() method (see alternative method below).
Remove the whole $('body').bind() part, and add the following to your validate settings object:
onkeyup: function(element) {
$(element).valid();
// As sparky mentions, this could cause infinite loops, should be this:
// this.element(element);
},
This should be better too, as it may give you some extra freedom as to how you handle the onkeyup events, such as adding a setTimeout if you don't want it to be instantaneous.
Fiddle: https://jsfiddle.net/z6h9d028/5/
Inside the onkeyup, you can also call $('#contact_me').valid(), which will revalidate the whole form, although that may not be your desired outcome.
Edit: Sparky also helpfully mentioned that jquery-validate by default does allow keyup events, but it only does so after the first submit: jQuery validate plugin: validate on blur() by default
An alternative way would be to set the details of your validation as you currently are, without the onkeyup function, then set your own listeners and run $(element).valid():
$('#contact_me').validate({
rules: {
// ...
}
});
$('input').on('focus focusout keyup', function () {
$(this).valid();
});
Edit regarding your other issues:
Your errorPlacement function is doing some funky things. How it decides what is the next sibling or not seems to be working incorrectly. Also, you're adding the error HTML divs into your DOM manually, but they are actually generated by the plugin. So really, you're creating both, then trying to show them, kinda over-riding the plugin, kinda not, and the whole thing is going into a frenzy.
The solution is, I reckon, to remove those error divs, remove that errorPlacement function, and then modify the CSS selectors to get any id ending with "-error", which is what the plugin generates. So [id$='-error'] instead of .error_message
https://jsfiddle.net/z6h9d028/8/

jQuery Preselection of Dropdown Doesn't Enter Change() Function

Suppose I have
$('#myDropdown').change (function() {
// perform some action based on some logic for the selection
});
// Preselect a certain value on startup
$('#myDropdown').val('Item 3');
When I preselect like that, the Change event never gets called, so I don't get my results.
I can certainly make the manual changes required to accompany the selection of 'Item 3' on startup but I wish everything could be as generic as possible.
the change event will fire only if a change to the element's value is committed by the user.
So you might need to trigger or call change() manually
Make sure to preselect the value after it becomes available.
$( document ).ready(function() {
// Preselect a certain value on startup
$('#myDropdown').val('Item 3');
});
Are you using a jQuery dropdown plugin, or you use the html , if you could put more codes, will be helpful.

Which event used in jquery when textbox value get changed using code not by manually?

I am developing a application in MVC.
I have a view which contain another partial view.
I have textbox1 in a parent view but its value get assigned from partial view.
Now, the moment the Textbox1 get assigned with some value, I want to perform some action
like put the 10% value textbox1 value on the another textbox, textbox2 of the view.
( I want the event when textbox value get changed by code, not the manual entry.
so cant use blur() event. )
which event in jquery should I used to perform this task ?
Partials views are all processed server-side, where Javascript is not executed. Javascript only works with the full page and does not know anything about partials, so take this worry out of your question.
As already been mentioned, you need .change() and if that is not good enough, just create a function that updates value of your checkbox and do other stuff which you need doing.
//psudo-code using .trigger()
function updateTextbox(value){
$('#myTexboxId').val(value);
$('#myTexboxId').trigger('change');
}
And here another method where you create another function that updates your values and does the calculation for you.
//pseudo-code using another function
function updateMyTextbox(value){
$('#myTextboxId').val(value);
doCalculation();
}
$('#myTextBoxId').on('change',function(){
doCalculation();
});
function doCalculation(){
// update your other values
}

How to make a jquery plugin use jquery.live?

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
});

Categories