I'm using the bootstrap-datepicker from eternicode and I'm against a strange behaviour.
When I try to use the setDatesDisabled option on the fly with the default startDate and endDate option, the datepicker seem to freez and don't allow me to change the month any-more.
The strangest thing is a simple alert() just before the call of setDatesDisabled seem to correct the bug...
My final need is to add some disabledDate on the fly, using a function as a data provider
The simplified code :
// enable the datepicker on fields
$('.date-picker').datepicker({
format: 'yyyy-mm-dd',
startDate: '2016-04-01',
endDate: '2016-08-15',
datesDisabled: ['2016-04-21','2016-04-20','2016-04-13']
})
.on('show', function(ev){
// #TODO check why bug here...
// alert('hi'); // uncomment to patch bug
$(this).datepicker('setDatesDisabled', ['2016-04-17','2016-04-16']);
});
Check the JSFiddle to reproduce.
Does anyone face the same thing / have a work around to disable some date on the fly ?
I've already make a bug report on the eternicode Github, as I think is may be an internal bug.
Its most likely due to the fact that the datepicker 'show' event fires multiple times as you navigate while the datepicker calendar is open.
Setting disabled dates while the callendar is already opened causes it to be recalculated and reloaded so it navigates back to the month with the currently selected date - this makes it impossible to navigate away from the page with the selected date (the half working scenario happens when there is no selected date).
Not sure if this is applicable in your scenario but this should work when you set the disabled dates only when calendar is not opened.
I changed
.on('show', function(ev){
to
$('.date-picker').on('click', function(ev){
and this seemed to work fine, see the updated fiddle:
https://jsfiddle.net/zj9sjspf/11/
Second slightly "hackish" solution is that you could disable automatic showOnFocus, and manually check if the calendar is not opened + set the new disabled dates + trigger show manually when the field is being focused on. This is not the best way of doing this, but might be the way to go while you wait on replies on your bug report ;)
One way of doing this can be seen here:
https://jsfiddle.net/zj9sjspf/13/
I faced the same issue with setEndDate and setStartDate on the fly. The datepicker was broken and couldn't change month, year etc and solved it like this:
var setDatesDisabled = false;
$('.datepicker').datepicker({
// Whatever options
})
.on('show', function(e) {
if (!setDatesDisabled) {
$(this).datepicker('setDatesDisabled', ['2016-04-17','2016-04-16']);
setDatesDisabled = true;
}
})
.on('hide', function(e) {
setDatesDisabled = false;
});
The show event will only run when the datepicker opens and NOT as you navigate.
Related
Filling out a signup page that checks to see if it was auto filled. I spent half the day and fount a code that worked for the text boxes posted by wOxxOm.
document.getElementsByClassName('form-control')[4].focus();
document.execCommand('selectAll');
document.execCommand('insertText', false, 'My City');
Well below this I have document.getElementsByClassName('form-control')[5]. This is a dropdown state selection. When I use the execCommand to send [5] letters they are sent back to [4]. I think it has to do with the .focus() not working on the dropdown selection. I have tried everything from jnode changes, val changes, and triggerMouseEvent. Also getelementBy/ID or NAME is not possible except thru option form-control with a number selection as they change every new visit except for form-control[1]-[8].
waitForKeyElements (".form-control:has(option[value=AL])", selectDropdown);
function selectDropdown (jNode) {
var evt = new Event ("click");
jNode[0].dispatchEvent (evt);
jNode.val('AK');
evt = new Event ("change");
jNode[0].dispatchEvent (evt);
}
I posted this because it works until I click submit then the input is removed. I do believe a mouse selection should be able to work, but I am just at a loss right now. Any help would be appreciated.
Just figured out the answer, I used
var targNode = document.getElementsByClassName("formInput")[2];
targNode.classList.remove ("NotVerified");
targNode.classList.add ("Verified hasinteracted");
Then just set each dropmenu with a simple value and verification values where set.. Just incase someone else needs an answer for the same question.
My Wordpress theme interacts with WooCommerce so that when a user selects a specific product variable from a drop-down a particular price is shown for their region.
This works fine when a user manually selects the drop-down, however, I'm trying to speed up the process by pre-selecting the appropriate option for the user based on a browser cookie (or lack of one).
For instance, if the user hasn't entered their region their browser will not have a cookie I've named "pc-entered" and the following jQuery script will run:
$(function() {
$('ul li.product').each( function() {
/*If no region set by cookie*/
if( document.cookie.indexOf("pc-entered=") < 0) {
/*Set downdown to generic*/
$(this).find("#pa_region").val('generic');
}
});
});
This works, successfully pre-selecting the correct 'generic' dropdown option automatically.
Unfortunately, and this is where I'm stuck - although the dropdown is correct the price isn't auto-populating like it does when a user manually selects their region.
E.g.
1) When auto-populated using my script:
2) When user selected:
I've tried replacing this in my script:
$(this).find("#pa_region").val('generic');
With the options listed on this thread, however, they don't seem to work in this case. I've also tried firing the script after all other scripts on the page and even delaying the script running with a timeout function but nothing seems to be working.
My test site is here.
TLDR - Why is my jQuery script not populating the price?
With $(this).find("#pa_region").val('generic'); you are only changing the HTML value (text) of dropdown.
You need to attach the event handler which will trigger the change to the function where you change the value.
function changeValue(){
$("#pa_region").val('generic');
$("#pa_region").trigger('change');
}
$( "#pa_region" ).change(function() {
console.log( "Handler for .change() called." );
});
This is the way on how to solve it.
I also made a JSFiddle so you can test it.
I have an emberjs web app where one of my views is a search page to query a database of records. I have the ability to filter by date and am using JQuery's datepicker.
The problem I am having is that if a user opens the datepicker and then hits either the browser back or forward button it stays active on the screen until a user clicks away. To clarify the process is as below:
Navigate to search page
Click select date
Datepicker appears
User clicks the browsers back button
Previous page loads BUT with datepicker still lingering around
Does anyone have any suggestions of how to hide or destroy the datepicker when a browsers back button is pressed?
Thanks!!
EDIT----------------------------
Current code:
Formal.Route.Search = Ember.Route.extend({
deactivate: function () {
console.log("hi");
$("ui-datepicker-div").datepicker("destroy");
},
Put the removal logic at View instead Route. Lets assume your template name is "search", then
App.SearchView=Ember.View.extend({
didInsertElement:function(){
$("#ui-datepicker-div").datepicker();
},
willDestroyElement:function()){
$("#ui-datepicker-div").datepicker("destroy");
}
});
Note: I assumed your selector is ID, if it is css class then use $(".ui-datepicker-div")
If you would like to write datepicker as component which can be used across the application then do watch the Screencast here http://eviltrout.com/2014/06/03/jquery-component.html
P.S. If you still could not figure out, please show your code in http://jsbin.com/
Thank you all very much for your help!
I resolved the issue with the following:
Formal.View.Datepicker = Ember.TextField.extend({
destroyDatepicker: function () {
this.$().datepicker("hide");
},
});
For some reason "destroy" was not doing the trick but "hide" does. If anyone has any insight into why this is I'd love to hear.
I'm trying to create a custom Picker whose data is from a remote JSON. The problem is that it doesn't fire the 'change' event on the picker at the first time when I select a row from the picker, I have to close the picker and select a row from the picker again and then the event change works.
var clubs_data = [];
//custom object to handle the httpClient
new K().scoutmobile.Tools.getData(new K().scoutmobile.URL_BASE, {Accion:new K().scoutmobile.CLUBS}, function(_response){
if(response.status.codigo === "RESULT"){
clubs_data.push(Ti.UI.createPickerRow({title:'select a club'}));
for(_j in _response.data){
clubs_data.push(Ti.UI.createPickerRow({color:'#fff',title: _response.data[_j].Propiedades.club_nombre.Valor, id:_response.data[_j].Propiedades.club_id.Valor}));
inputClubs.add(clubs_data); //where inputClubs is created previously
}else{
new K().scoutmobile.Tools.createDialog('invalid_user_alert_dialog_title','invalid_user_alert_dialog_message');
}
});
//event listener
inputClubs.addEventListener('change', function(e){
Ti.API.info(e.row.id);
});
win.add(inputClubs);
In the Titanium Studio Console I get this:
[WARN][InputManagerService( 60)] Window already focused, ignoring focus gain of: com.android.internal.view.IInputMethodClient$Stub$Proxy#43f8dbb8
Any ideas what it is happening?
I have three solutions for this, none of them are good enough:
A very stupid solution would be having picker pointing at empty option at start, then user need to change it anyways
If you loading another element of UI using that picker value, you can preload that part with the default (or first) option
You can modify Titanium SDK source code, where they write this log "Window already focused' and fire change event instead. This is pretty simple, I have done that for TabGroup control, it may take 2 hours of your time (either for Android or iOS)
I am using jQuery to convert a navigation menu to a select list when the browser window is small, for a responsive design. However, selecting Options of select list redirect to appropriate page in Firefox and Opera, on Webkit based browsers, selecting an option does not do anything.
Live demo - http://emoeco.com
$('ul.menu').each(function(){
var action="loadPage(this.form.elements[0])";
var form=$(document.createElement('form')).insertBefore($(this));
$(form).attr({
method: 'post'
});
var select=$(document.createElement('select')).appendTo(form);
$(select).attr("onchange", action);
$('>li a', this).each(function(){
var a=$(this).click(function(){
window.location.href=this.href;
}),
option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function(){
a.click();
});
});
});
First, you should open a JavaScript console and look at the errors. Most of them are due to files not being found.
Second, just looking at the heads tag makes me die a little inside. I know this is not the purpose of your question, but you create enormous overheads by loading the same things twice or more. Please spend the 5 minutes needed to fix that; the site will load a million times faster
Third, if I understand your question right, you should do it in a way that the user has to click a button to traverse to a page. Plus, instead of completely removing the menu, why don't you scale it?
Fourth, if you dislike Thirds, why not dump the whole anchor thing, and just use select's native 'change' event?
$('select').change(function() {
location.href = $(this).children('option:selected').val();
});
Edit: As to why it doesn't work only in WebKit, it's because they don't tie the click event to the 'option' element. At least that's what I think: You can try this example (add /edit to the url to see the source code.) Tested working in FireFox, got nothing in Chrome