I'm trying to put a JqueryUI Datepicker on an AJAX appearing form.
The traditional $(".datepicker").datepicker(datepickerParams); does not work since the ".datepicker" element is not present on DOM ready.
I've tried the live() method but there is no load event on <input>.
Then, I do the following :
$("#datepicker_button").live('click', function() {
$('.multiFieldsDatepicker').datepicker(liveMultiFieldsDatepickerParams).focus();
});
It works when I focus on the input field but I can't put the calendar icon to show the calendar.
Is it possible to catch an event when the form appears and set the datepicker with $(".datepicker").datepicker(datepickerParams); ?
Related
http://klaussongs.com/
I have this table on my site that when you hover over the tabs, it changes it. But I want to make it so it works on click I tried defining that on my code by saying:
$("#tabs").tabs();
But it is not overriding the jquery UI CDNed file main event which is mouseover. I can see on console under eventlistener that it has a mouseover listener attached to it, how do I override that to work on click. I also tried this, but it didn't work:
$("#tabs").tabs({
event: "click"
});
I am referring the following url http://jqueryui.com/autocomplete/#combobox
to render comboBoxes in my HTML page. Using the following line of code I can determine when an item from the comboBox is selected.
$("#myDropDown").combobox({
select: function (event, ui) {
//item from combobox is selected
},
});
I wish to attach an onFocus or an onBlur event to this dropdown. On searching I only come across the select event. Is there a workaround to bind an onFocus or an onBlur event to the comboBox?
I have a need to capture an event (like a click) on a object that is elsewhere on the page and not a child of the select2 object while the select2 object has focus and is showing results. When the select2 results object is focused, I cannot click on a button/anchor elsewhere on the page and have it perform its action. It merely closes the select2 object.
Is there a way to do this? Here is a demo that shows this behavior: http://codepen.io/anon/pen/JoJobW
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
alert("click!");
e.preventDefault();
});
});
<!-- HTML snippet -->
<select id="e1"></select>
Click here when select2 is focused
Using select2 v3.5.2 and jQuery 1.11.0
Select2 places a "mask" element behind the drop-down that captures the mouse click. Others have complained about this.
Here is a jsfiddle that shows the mask element.
You could try to remove the mask element when the drop-down is opened.
$('#e1').select2().on('select2-open', function() {
$('.select2-drop-mask').remove();
});
Of course, this means the drop-down will not close when the user clicks off of it, but you could add an event handler on the document (or body) to do that.
$(document).click(function() {
$("#e1").select2('close');
});
You have to make sure the click event on the other element does not propagate to the document in that case.
$('#e2').click(function() {
alert('click!');
return false; // Prevent default action and stop propagation.
});
jsfiddle
I'm following the modal dialog example on jQuery UI website but not having any luck getting the dialog to be displayed. The example creates and opens the dialog from a button-cllick but I'm trying to launch it from a click on a TD element. Is that possible?
Assume that your td element has clickable_td id and also your dialog block has dialog id, So you can attach click event handler for td emelent with the on() function object and show your dialog block with dialog() function object while clicks captured like this:
$('#clickable_td').on('click',function(){$('#dialog').dialog();});
NOTE: The default jQuery z-index is 100, if your layouts' elements have higher value of it, try this instead:
$('#clickable_td').on('click',function(){$('#dialog').dialog();$('div.ui-front').removeClass('ui-front').css({zIndex: "10000"})});
This code basically creates a block UI. Instead of using jquery block UI dialog, you can use jquery blockUI plugin. You can refer the link to understand the code.
http://www.malsup.com/jquery/block/#demos
In the below example #yourtd_id is the id of your td and #your_div is the div which you want to make as modal. When the td is clicked .blockUI is a class which display your_div on the screen. Now it like a modal dialog. To come out of the modal dialog insert a button on #your_div and give id as #cancel_btn. When the #cancel_btn is clicked .unblockUI() unblocks the UI i.e unblocks the modal dialog.
$(document).ready(function() {
$('#yourtd_id').click(function() {
$.blockUI({ message: $('#your_div') });
//keep a cancel button on #your_div. for eg: consider its id as #cancel_btn
});
$('#cancel_btn').click(function(){
$.unblockUI();
});
});
This will work.I hope this will help you.
The contents of the datepicker input is changed programmatically via "setDate" method and I want to update the preview of the input form depending on the changed date value.
The "onSelect" event is triggered only when the date is changed through the datepicker UI and not when "setDate" is called.
"onChange" event of the input is also not triggered.
Right now it seems the only way is to call my updatePreview function manually every time after the "setDate" and I have to re-format the date object I get from the "getDate" method.
Is there an easier way to do it?
Here's the mockup in jsFiddle. The "change programmatically" button doesn't update the preview.
If I am understanding correctly, you want to update a separate element with the date being entered or set programmatically. If so, updating an alternate field preview is baked into jQuery UI Datepicker already.
The datepicker widget only seems to be able to update an alternate <input> field rather than a <div> preview though, so if you need it to update a <div> then this demo will require a bit more work.
You could trigger the event yourself, but in general setting values in javascript does not trigger events. This goes for jQuery too.
Firing the events yourself:
$(elem).select(); // for select obviously
$(elem).change(); // for change