When the datepicker element is selected, and the calendar pops up, I also want to set a different select element back to the top option, and also clear a textbox....this is what I am trying and doesn't seem to work:
<script>
$(function() {
$("#timeremoved").val("");
$("#timeinplace").val("");
$("#removed").datepicker();
});
</script>
Any help appreciated! Thanks!
Related
I have a select field with the id being node_service_area_city. I wish to clear this dropdown using jquery. For the same I have the following code:
$("#node_service_area_city").empty();
When this line is commented I can chose any of the options in the dropdown. When the code is run with this line included then the options in the dropdown are STILL THERE but I cannot chose any of them. Nothing happens if I click on any of the options.
As such I feel that the dropdown menu is empty but somehow the dropdown items are still showing so I might have to refresh the page. Someone please guide me as to why this is happening and what can I do about it.
can you try this :
$('button').click(function () {
$("#node_service_area_city > option:first-child").prop("selected","true")
});
I inherited a bunch of code of varying quality and I'm fixing a bunch of things that has been wrong. One thing that it does is that is has a table of form inputs, one of which uses jquery-ui Datepicker. There is also a button that creates a new row at the bottom of the table. The new row's Datepicker never shows up.
I've seen this problem listed a few times here on SO but none of those solutions worked. I'm putting up what I have now. My jfiddle is at:
http://jsfiddle.net/squarepegsys/G8WEC/2/
The meat of my code is here:
tr.find(".datepicker").on("focusin",function() {
console.log("got focus");
$(this).datepicker();
});
In the on("focusin"...) line, I see "got focus" on the console but never see the datepicker show up.
When you create the datepicker instance, jQuery assigns it an ID, and when you clone it, you're duplicating it. Instead, create the datepicker instance dynamically via:
$(document).on('focus', ".datepicker", function () {
$(this).datepicker( "destroy" ).datepicker();
})
jsFiddle example
This will work for dynamically created elements and jQuery will manage the IDs properly.
Upon a button click, I have some jquery that will add some html to the 'body' element. In that html, I have a datepicker input field which refuses to appear when it should.
I use the ui-datepicker in several other spots in my app, and it works perfectly.
I have tried calling the datepicker when the document loads:
jQuery ->
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
and after the click event which adds the new html to the page:
$('.my-button').click ->
$('body').ipadoverlay
titleStyle: false
contentWidth: 500
topSpc: true
content: $('#popup-for-' + thing_id).html()
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
But the picker refuses to show up. My guess is that it has to do with when jquery builds and places the datepicker, but I really don't know.
Let me know if you have any ideas or could use more information.
UPDATE
I changed the way I call datepicker() so that it only applies to the element I want the datepicker attached to.
$('.ipadoverlay .date-picker').datepicker()
This eliminates the first issue with the .each =>.
Now it silently fails. No error or warning. The datepicker simply does not show up.
I am going to begin digging into jquery.ui.datepicker.js to see if I can figure out whats going on, but if you have any ideas why the datepicker fails to response, please let me know.
UPDATE 2
Ok, I got a step further. The class 'hasDatepicker' was already attached to the element I want add the datepicker to (which means $('.date-picker').datepicker() was being called somewhere else, while the element was hidden and unused), but the datepicker didn't work. I fixed this by removing the class from my element, and calling .datepicker() again
$('.ipadoverlay .date-picker').removeClass('hasDatepicker')
$('.ipadoverlay .date-picker').datepicker()
Now the datepicker shows up on click, but selecting a date doesn't do anything... Help would be much appreciated
You need to use the fat arrow. Your use of 'this' loses its context.
jQuery ->
$('.my-datepicker-class').each => # <-- Fat arrow
input = $(this)
input.datepicker()
I'd explain, but coffeescript.org does a better job than I ever could.
Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps
I am developing an app in asp.net in which I am using the Jquery Zebra DatePicker but the issue is this, I am opening the form in Jquery dailog and calendar will open on the dialog but datepicker is opening at the bottom of the page, same problem is reported here but I am unable to understand how to modify the function. Kindly tell me solution or purpose me some other plugin which is same as ajax calender extender. Thanks in advance.
I recently have the same problem. But a little delay (timeout) solves the issue for me:
jQuery(document).ready(function($){
window.setTimeout(function(){
$('input.datepicker').Zebra_DatePicker();
}, 100);
});
Sorry for the delayed reply... Anyways I will like to improve this answer.
I had the same problem but in my case it occurred due to the icon's position in the date textbox.
If you just want to update the icon’s position, simply call the update method without any arguments:
var datepicker = $('element').data('Zebra_DatePicker');
datepicker.update();
Add the following in your css class for it is (Zebra_DatePicker):
.Zebra_DatePicker{
position: absolute;
}
We can control the Zipra Datepicker positions by changing the default_position and container attributes
Zipra Datepicker has default_position attribute, We can use this default_position attribute to display the calendar above or below of the input box.
Default position -> above / below
Zipra Datepicker default position is above, it means calendar will display right top of the input box.
The second option is the container, the calendar will display relative to the container element.
container: $('body'),
By default, the container will be the body which means the date picker will append related to the body, You can see the date picker HTML code at the top of the DOM
You can change the container position relative to the parent of your input box by adding the class name of parent div in the container section.
$('#datepicker-on-change').Zebra_DatePicker({
default_position: 'below',
container : $('.datepicker-position')
});
<div class="datepicker-position">
<input id="datepicker-on-change" type="text" class="form-control" data-zdp_readonly_element="false">
</div>