Calendar appearing again after changing tabs or minimizing browser - javascript

I'm using pickadate jquery plugin and applying it to a field in a form page.
When the user clicks on the input field, there are 2 possible options I'm dealing with:
the calendar appears and the user selects a date (after that the calender automatically closes)
the user just close the calendar (selecting no dates)
What's happening is that after one of the 2 options above, if the user opens another tab in the browser (and then go back to the form tab) or minimize the browser (and then open it again in form tab), the calender shows up again.
This only happens if the last field selected is the one with the pickadate plugin applied to. If the user selects another field that does not contain the pickadate plugin and does that same process (of changing tabs or minimizing browser), the calender doesn't appear again.
What should I do to does not make the calender appear if the last field select is the one with the pickadate plugin applied to?
The code that calls the plugin is:
$(document).ready(function() {
$('.datepicker').pickadate();
});

Method 1 (This method worked for me)
Add onOpen to the initialization object.
var $input = $('.datepicker');
$input.pickadate({
onOpen: function () {
if ($input.hasClass('picker__input--target')) {
$input.pickadate().pickadate('picker').close(true);
}
}
});
Method 2 (This method didn't work for me. Maybe I didn't code it right).
Add onClose to the initialization object.
var $input = $('.datepicker');
$input.pickadate({
onClose: function() {
$input.blur();
}
}
});
Source from github

It seems to me that when the tab with the picker is brought back to focus the focus event for that input is being called again, thus causing the picker to pop back up.
I would tie into the window focus event
window.addEventListener('focus', function() {
// make sure input in question is not in focus
});
then make sure input in question is not in focus

Related

FullCalendar - Submiting form in event click and scroll adjustment after submission

I am using fullcalendar in my code and I want to adjust the scroll position after (and only after) an event is clicked. I can do that by having $(window).scrollTop($("#MyId").offset().top) in eventclick but my problem is that i need to submit a form on each click as well and that causes a page reload. so i lose my scroll position. i can't do the scroll positioning in eventAfterAllRender or loading either, since i only want it to happen after an eventclick.
Is there anyway I can know that reload is happening after an eventclick? not for example, after choosing a new date on the calendar?
I really tried everything which came to my mind but I didn't get anywhere. any idea would be appreciated :)
Update:
Part of the code I was trying to explain:
the eventClick option of my fullcalendar:
eventClick: function (calEvent, jsEvent, view) {
$(window).scrollTop($("#IdOfTheDivIWantToJumpToAfterAnEventIsClicked").offset().top);
// Now I need To submit my form everytime I click on an event which makes the page loses scroll position.
$("#MyForm").submit();
},
I hope it is clearer now..
What I ended up doing:
I added a hidden input field to my form and when an event is clicked, I filled up the input field value with a string (for example "Clicked")
eventClick: function (calEvent, jsEvent, view) {
$("#MyNewHiddenInputField").val("Clicked");
$("#MyForm").submit();
}
Then if this input field is filled with a value (which happens only by a click on an event), I fill the hidden field value through my controller on form submit to save the hidden field value after the page reload.
and after i used this value in fullcalendar loading, i just remove its value..
loading: function (isLoading, view) {
// some code
if (isLoading) {
//some code
} else {
if ($("#MyNewHiddenInputField").val() == "Clicked" && // some other conditions) {
// Do what you wanna do
}
// Now clear my hidden field
$("#Clicked").val("");
}
}
therefore, page load after an event click will be recognized from other type of loading. i hope am clear!
i am not sure if there is any better way to do it, if i come across a better solution, i will update my answer :)

Problems with mouseleave/focusout event handlers and user selecting from autocomplete list

I have bound the jQuery event handler mouseover to an element with the below code:
jQuery(document).ready(function(){
jQuery('#buyout_field').mouseleave(function() {
alert('Hi!');
});
});
This works great, but then I noticed that if the user selects a value from those dropdown auto-complete menus the browser shows you of your past data you have entered that the mouseleave event fires too early for my liking. Yes, it fires at the right time (when their mouse leaves the element); however I need the function to fire only after the user has entered data into the field.
I then added the focusout handler to cover more bases with:
jQuery('#buyout_field').focusout(function() {
alert('Hi!');
});
However it's still possible the user may select a value from the dropdown list AND not click outside the text field.
Do I have any other options here at firing the function or do I have to resort to perhaps using setTimeout() to allow the user time to select something from the autocomplete list and THEN fire the function OR should I just disable autocomplete?
Fiddle: http://jsfiddle.net/wbsDy/

Mozilla Extension: Multiple States between multiple tabs

I am creating a mozilla extension that converts the content of a webpage on click of the "convert button"(Label: Convert) in other language
and its label gets converted to English so that on click of that button(Label: English) the content gets converted into original form
I tried to set attribute "changedcontent" with each tab so that on event focus ,focussed tab reads its "changedcontent" attribute and set the label on button ("Convert" or "English")
problem arises where i need to switch between multiple tabs, plugin in the different tab should maintain different state depending on whether it is displaying changed content(should display button label: English)
or it is in its original form(should display button label: "Convert")
so when i click refresh button or click other link in the webpage. The label of the button which is "English" with converted content on the page should gets changed to "Convert"
so for this i have handled page unload event to track page refresh or link click, but since webpage may contain multiple frames/iframes this event is getting called multiple times.
If in the meantime i switch the tab, label of other tab gets converted from "English" to "Convert"
code of the unload event is:
window.addEventListener('unload', unloadingDocument, true);
function unloadingDocument()
{
var currentTab = gBrowser.selectedTab;
currentTab.setAttribute("changedcontent" , "false");//set the transliterated attribute back to false
var convertButton = document.getElementById("convert_button");
convertButton.setAttribute("label","Convert");
}
Please suggest how can i solve this problem and maintain different states of mozilla plugin between multiple tabs.
Thanks
You could use the Session Store API to have independent state between tabs.
-- EDIT:
So if you already have a way to know if a specific tab is "Translated or not", if you want the button to change to have the correct state when another tab is selected, you might want to check for the tabSelect event: Detecting tab selection
In this event you check your tab attribute to check if you have to change or not the label/behaviour of your button.
-- Edit 2 :
If when you click the "Convert" button you do your processing, and you set the attribute changedcontent of that tab to true. Then you have a load/unload listener to check for the refresh, to change the state back to false. Then if you change tabs, you would have the tabSelect event to change the button whenever you change tabs.
If you add this listener when you change changedcontent to true. Then when the event beforeunload is first called, you check if changedcontent is true, you change it to false and remove the listener.

jquery datepicker is not working well in mobile

I m designing an application for mobile in which I m using jquery datepicker. I have date textbox and a submit button. The calendar opens on the submit button. But the problem is, when I click on any day of the month, this button gets focus and is clicked instead of chosing that day.
Thanks,
Do you mean the button under the datepicker gets focused? I had that issue and solved it by adding a callback function to datepicker which would disable all other inputs when it got activated, then re-enable them again on datepicker close.
Check the documentation, datepicker has callbacks for both open and close.
Edit:
Instead of another reply, I'll post here.
When you init your datepicker, you can pass options, including callbacks. These are the two callbacks you want to use, what I've done here is grabbing all inputs in a variabel called "inputs" by $('#containingdiv').find('input'), then beforeShow I add attribute "disabled" to all the inputs, and on close I simply remove this attribute again.
date.datepicker({
beforeShow: function() {
inputs.attr("disabled","disabled");
},
onClose: function() {
inputs.attr("disabled","");
}
});

How do i find the new focus item with jquery?

I have a pop up dialog that lets you write text and does stuff when you click a button. My code is below
This function works, i find the new object by looking at e.originalEvent.explicitOriginalTarget. However now i notice if i press tab this function will be called but e.originalEvent.explicitOriginalTarget will give me the same current object instead of the new object. So my dialog doesnt close if a user presses tab to leave. How do i find the correct new dom item?
$('#Area').focusout(function (e) {
if ($(e.originalEvent.explicitOriginalTarget).closest('#Area').size() == 0)
$('#Area').hide();
});
event.relatedTarget worked for me. It will give the other DOM element, within the event, if there is one.
An example would be, if you had 2 buttons controlling the same function, and didn't want their code to be executed if they were clicked consecutively. You could attach a focusout event handler and check for an ID, or a class name.
$(".buttons").on("focusout", function (event) {
if($(event.relatedTarget).prop("class").indexOf("buttons") === -1) {
//code to execute
}
});
Perhaps a better example would be the issue I had.
I created a custom drop down list, that has a button beside it. The drop down list can be opened and closed by either clicking on the list, or the button. It can also be closed be losing focus to either object.
This becomes a problem in the following scenario.
1) user opens drop down list by clicking the list object.
2) user closes drop down list by clicking the button.
What happens is the list opens, but when the user goes to close the list, the list loses focus, which closes it, but since they are clicking on the button, it opens back up. The focusout causes the two objects to cancel each other out, in this type of scenario.
By writing the focusout event, I can now set it to only trigger when the relatedTarget doesn't have the same class as the target that called the event.
$(".listControl").on("focusout", function (event) {
if($(event.relatedTarget).prop("class").indexOf("listControl") === -1) {
//Close the drop down list
}
});
http://api.jquery.com/event.relatedTarget/
Check out this question/answer How to select an element that has focus on it with jQuery
I think the reason why you don't get anything with $("*:focus"); in Firebug console is when you click the console, the element loses focus.
And if you want to tackle it with events, the opposite of focus() is blur().
Edit
Maybe you can even try a different approach. If your only concern is watching for tab key, you can use .keypress() event and watch for tab keycode which is 9.

Categories