I have an application where I have multiple date fields. All of these fields are datepicker.
This application also have some processes where it updates automaticly the value of these fields using
$('#selector').datepicker('setDate', aDate);
The problem is when the focus is on another field and the calendar is opened, it's sets the date to the last 'selector' called by the setDate method...
Here is a jsFiddle that reproduces the problem I am facing.
To reproduce the problem.
Run the jsFiddle
Click on the first input field (the calendar opens)
Wait until the 3rd input field is populated with the current date
(about 5secs)
Select a date.
--->Problem, the selected date updated into the 3rd field...
jsFiddle
Any way to avoid this?
Maybe try to detect if one of your inputs already has focus, then refresh it after the auto-populate of dt3. Seems kind of hackish though.
$("input").datepicker();
setTimeout(function () {
var focused = $('input:focus');
$('#dt3').datepicker('setDate', new Date());
if (focused) {
focused.datepicker('refresh');
}
}, 5000);
http://jsfiddle.net/Nza9u/3/
Related
Sadly, I don't find any focus event for sap.m.Input or sap.m.TextArea to which I can register handlers in XML view.
What are your best practices e.g. if you have nearly 100 fields and most of them should handle focus event so that the text within the input field gets automatically selected?
Normally, I try to avoid to register the focusin handler in controller on every input field (also looping) but it seems that there are no other possibilities available isn't it?
What I want is a possibility, that when I navigate e.g. with keyboard through a table with input fields, every time when I press the tab or updown arrow keys to jump to next input field, the whole content of the input field should be selected.
Example:
Open this table sample.
Click on Edit.
When tabbing, it automatically selects the text. But it doesn't work with updown arrow keys and with sap.m.Input class.
Here is a working example of an extended sap.m.Input that selects the text on focus: https://embed.plnkr.co/98BIbMEIujbzBXqU
Input.extend("demo.control.Input", {
onfocusin: function() {
if (typeof Input.prototype.onfocusin == "function") {
Input.prototype.onfocusin.apply(this, arguments);
}
this.getDomRef("inner").select();
},
// ...
});
Note: sap.m.InputBase provides the API selectText(iStart, iEnd). However, that API doesn't support Input controls with type Number according to the HTML spec as well as API reference:
selectText
Only supported for input control's type of Text, Url, Tel and Password.
Since our goal is to select all text within the input field (not a range) regardless of the type, domElement.select()api can be used instead.
If you really have a form with -- gasp! -- 100 fields, I would then extend the standard sap.m.Input and attach the onfocus browser event in that extended control using sap.ui.core.Control's attachBrowserEvent method.
On ie8, everything is working fine with my sortable lists. However, I'm having issues on ie7.
My page is set up with a table for each employee. There is a list of jobs which need to be assigned, and I drag and drop these job rows into the employee tables.
At first, I was suffering the problem whereby I couldn't drop into an already empty employee table, but I got around this issue by using a combination of a .dontinclude row in each table, and adding a receive function (see below):
jQuery_1_9_1(function() {
jQuery_1_9_1('[id$="' + tname + '"] ').sortable({
items: "tr:not(.dontinclude)",
connectWith: ".connectedSortable ",
receive: function(ev, ui) {
//debugger;
ui.item.parent().find('tbody').append(ui.item);
}
}).disableSelection();
});
I add the .dontinclude row as I create the tables (they're built dynamically rather than declared), meaning it is the first row on there. Prior to adding
:not(.dontinclude)
the rows would not add to an empty table. After adding that line, they would add to the table, but they would be added after the tbody tag, which was no use. Adding the receive function specified where to add after receiving, meaning elements now appeared within the tbody.
SO, everything was working fine in ie8, until I found out that some users would be on ie7. Everything was going fine, until I accidentally let go of a row mid drag and drop, but not over one of my sortable tables. The result was that it completely disappeared. I checked the DOM page, and the rows were once again adding outside of the tbody (presumably causing them to disappear on ie7). If I put a debugger inside the receive function I find that function is not called in this instance - it is only called when I am over a sortable table.
So I think I need to find the behaviour that is called when an item is dropped outside of a sortable area, and perhaps override it.
Is this possible? Maybe something to do with jquery droppable?
OK, I got to the bottom of this one.
It looks like I over-complicated things initially.
There was no need for using the receive function.
jQuery_1_9_1(function() {
jQuery_1_9_1('[id$="' + tname + '"] tbody ').sortable({
items: "tr:not(.dontinclude)",
connectWith: ".connectedSortable tbody"
}).disableSelection();
});
I just needed to specify the tbody in the selector and the connectWith. This, in additon to having the .dontinclude row (in my table, this is just the table header row) seems to resolve the issue, and ensure values are still added within the tbody tag.
EDIT I should also add, my 'tname' id and class 'sortable' are specified on the table tag.
I'm having a great time playing around with knockout js and have just started to get to grips with adding custom bindingHandlers.
I'm struggling a bit with the update function of a 3rd party jqWidget gauge - I can only get it to animate the first time I update the variable. On each update after that it just sets the value directly.
I don't fully understand ko.utils.registerEventHandler() and what it does although I've seen it in a bunch of other examples. Is this what is causing the animation to break? How do I know which events to register from the 3rd party widget?
For some reason this works fine if I add a jquery ui slider that is also bound to the observable.
You can test this here: set the value a few times to see that it animates the first time and not after that.
http://jsfiddle.net/LkqTU/4531/
When you update the input field, your observable will end up being a string. It looks like the gauge does not like to be updated with a string value, at least after the first time.
So, if you ensure that you are updating it with a number (parseInt, parseFloat, or just + depending on the situation), then it appears to update fine.
Something like:
update: function(element, valueAccessor) {
var gaugeval = parseInt(ko.utils.unwrapObservable(valueAccessor()), 10);
$(element).jqxGauge('value', gaugeval || 0);
}
http://jsfiddle.net/rniemeyer/LkqTU/4532/
You would generally only register event handlers in a scenario like this to react to changes made by a user where you would want to update your view model data. For example, if there was a way for a user to click on the gauge to change the value, then you would want to handle that event and update your view model value accordingly.
I'm answering the
I don't fully understand ko.utils.registerEventHandler() and what it does
part of your question.
registerEventHandler will register your event handler function in a cross-browser compatible way. If you are using jQuery, Knockout will use jQuery's bind function to register the event handler. Otherwise, will use the browser Web API with a consistent behavior across browsers.
You can check it out on the source code.
My specific usage case is that I'm using a .net postback to display an update panel of elements that have tooltips associated with them. I have already initialized the ZURB Foundation (provides tooltips) script on the page, and the first-page tooltips work great. After the postback, I want to *re*initialize the script so that these new tooltip items are bound to the 'hover' event.
Generic usage case is any situation where new tooltip-enabled elements are added in any way.
It appears to me that the 'hover' binding is done on page init to the existing collection of '.has-tip' elements, but there is handling of future .has-tip elements coming into existance.
I'd like to do the following:
a) Reinitialize the tooltip plugin and search for new .has-tip elements to attach the 'hover' event to.
have tried a number of different ways to try and reinitialize, but
$.fn.tooltips('init');
seems to be the most hopeful, in that it successfully calls the init method in the script, but does not bind the hover event to the new .has-tip elements.
Edit/Clarification:
it seems like there was a bug with dynamic content:
https://github.com/zurb/foundation/pull/465
When the bug is fixed
(you can fix it yourself, read the pull req. for more info), the bug is fixed, so you can
trigger a page-wide tool-tip refresh with:
$(document).tooltips('reload');
Original answer
If you didn't figure it out yet, jquery.tooltips.js has a method/function called .reload that actually seems to be the most promising (code is from the foundation plugin):
reload : function() {
var $self = $(this);
return ($self.data('tooltips')) ? $self.tooltips('destroy').tooltips('init') : $self.tooltips('init');
},
It's really just a chain of their other methods, but it's probably best to .destroy before .init to avoid double tooltips or some other collision.
I have tried a lot of suggestions, but what truly works is:
After you finish editing the DOM, you have to call to
$(document).foundation();
This sentence is going to refresh everything, including your tooltips. WORKS LIKE A CHARM.
I had the same problem when genereted modal windows with Ajax,
Here is my fix for that:
$(document)
.on('opened.fndtn.reveal', '[data-reveal]', function () {
$('html').css({'overflow': 'hidden'});
$('.has-tip').each(function(i){
var tip = $(this);
Foundation.libs.tooltip.create(tip);
});
})
It works for ZF v5.2+
I've just updated my project from jquerymobile 1.0a1 to version 1.0.
I've encountered a problem with dynamic content. Based on an ajax search I populate an unordered list with list items. Previous the following code refreshed the list so that all the styling appeared correctly:
$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');
However as of 1.0 this no longer seems to work.
The list appears but the styling is all wrong and the data-theme on all the elements gets ignored.
Has anyone come across a similar issue with updating and come across the solution.
Updating lists If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create
any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a
list. This is done for performance reasons. Any list items already
enhanced will be ignored by the refresh process. This means that if
you change the contents or attributes on an already enhanced list
item, these won't be reflected. If you want a list item to be updated,
replace it with fresh markup before calling refresh.
http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
if #myContent is the listview you can do this:
$('#myContent').listview('refresh');
if #myContent is the page you can do something like this:
$('#myContent').trigger('create');
Create vs. refresh: An important distinction Note that there is an important difference between the create event and refresh method
that some widgets have. The create event is suited for enhancing raw
markup that contains one or more widgets. The refresh method should be
used on existing (already enhanced) widgets that have been manipulated
programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
What you want can be achieved by replacing your 2 lines of code with the following:
$('#myContent ul').listview('create');
Hope this helps...
I've had this issue. The reason you are getting things all messed up is you are initalizing and refreshing the element multiple times. I noticed I had 2 different functions running that would call .listview('refresh') on the same element. After I took one out the themes and data went back to looking normal. Also are you getting any JS errors?
EDIT:
To be more specific you are calling .listview() somewhere in your code 2 times which is initializing it twice. I would wait to before you page is loaded to run the refresh so you only call it once.
Another thing you could do is check if the element is initialized already or not so you don't do it twice. Just check the element or in some cases the parent to see if the class ui-listview is present.
var element = $('#myContent').find('ul');
if ($(element).hasClass('ui-listview')) {
//Element is already initialized
$(element).listview('refresh');
} else {
//Element has not been initiliazed
$(element).listview().listview('refresh');
}
Just an FYI you can chain those events to look like $('#myContent').find('ul').listview().listview('refresh');
It cand be achived through.
$('#myContent').listview('refresh');
The below snippet shows you to load data from xml and dynamically create a list view.
function loadData()
{
$.ajax({
url:"BirthdayInvitations.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find("event").each(function()
{
$("#mymenu").append('<li>' + this.textContent + ' </li>');
});
$("#mymenu").listview('refresh');
}
});
}
See if this is related to ur question http://www.amitpatil.me/demos/jquery-mobile-twitter-app/ and this one also http://www.amitpatil.me/demos/ipad-online-dictionary-app/
In first example i am using listview('refresh'); method and in second example i am using
$(document).page("destroy").page();