I'm trying to combine some of JS libraries to create a mobile SPA website. I'm working with knockoutJS that misses routing engine so I take it from SammyJS or PathJS (haven't decided yet). And I'd like to use jQuery Mobile to get the controls and the mobile design from it.
The thing is that whenever I include the jquery mobile js file into my page the routing engine stops working. Actually it does work, but the window.location.hash get changed not only by me but with jquery mobile itself.
So here is how the code looks like:
in the html file I got a div that I binded to a template
(function ($) {
infuser.defaults.templateUrl = "templates";
console.log('just before pageinit');
$(document).bind('pagecreate', function () {
// disable autoInit so we can navigate to bookmarked hash url
$.mobile.autoInitializePage = false;
// let PathJS handle navigation
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
$(document).bind('pagebeforechange', function (e, data) {
var to = data.toPage;
if (typeof to === 'string') {
/* var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname;
// manually set hash so PathJS will be triggered
location.hash = to;
// prevent JQM from handling navigation*/
e.preventDefault();
}
});
$(document).bind('pagechange', function (e, data) {
});
var Model = function () {
this.items = ko.observable(null);
this.chosenItemData = ko.observable();
this.state = ko.observable('items');
this.goToItemDetails = function (item) {
location.hash = '/details/' + item.id;
};
};
window.currentModel = new Model();
ko.applyBindings(window.currentModel);
Path.map('#home').to(function () {
currentModel.state(window.templates.items);
currentModel.items(window.dummyData);
});
Path.map('#home/details/:id').to(function () {
var self = this;
$(currentModel.items()).each(function (index, item) {
if (item.id.toString() == self.params['id']) {
currentModel.chosenItemData(item);
currentModel.state(window.templates.itemDetail);
}
});
});
Path.root('#home');
$(function () {
Path.listen();
})
})(jQuery);
Now, you can see that $.mobile.hashListeningEnabled = false; is set to false so the jquery mobile should not listen or react to hash changes whatsoever.
But!
lets say I move from localhost/sammy/#home to localhost/sammy/#home/detail/1
the hash change happens and changes right away to localhost/sammy/home/detail/1
for some reason the hash itself is ommited and the route doesn't get executed.
I sorry if I didnt explain myself better. I'm working on publishing it on a server for everyone to be able to look at it, but, unfortunately it takes time.
Meanwhile, if anyone has any idea what i can do to fix this it will be awesome!
So apparently (and it's written in the jQuery Mobile website the "initmobile" event fires as the script for jquery mobile it attached. To be able attach the event the following lines should be included before the jQuery Mobile script.
<script type="text/javascript">
$(document).on('mobileinit', function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.linkBindingEnabled = false;
});
then the onchangehash event in jquery mobile will be disabled.
Related
i have created a directive to handle selectable provided by Jquery
mydirectives.directive('uiSelectable', function ($parse) {
return {
link: function (scope, element, attrs, ctrl) {
element.selectable({
stop: function (evt, ui) {
var collection = scope.$eval(attrs.docArray)
var selected = element.find('div.parent.ui-selected').map(function () {
var idx = $(this).index();
return { document: collection[idx] }
}).get();
scope.selectedItems = selected;
scope.$apply()
}
});
}
}
});
to use in html
<div class="margin-top-20px" ui-selectable doc-array="documents">
where documents is an array that get returned by server in ajax response.
its working fine i can select multiple items or single item
Issue: i want to clear selection on close button
http://plnkr.co/edit/3cSef9h7MeYSM0cgYUIX?p=preview
i can write jquery in controller to remove .ui-selected class but its not recommended approach
can some one guide me whats the best practice to achieve these type of issue
Update:
i fixed the issue by broadcasting event on cancel and listening it on directive
$scope.clearSelection=function() {
$scope.selectedItems = [];
$timeout(function () {
$rootScope.$broadcast('clearselection', '');
}, 100);
}
and in directive
scope.$on('clearselection', function (event, document) {
element.find('.ui-selected').removeClass('ui-selected')
});
is this the right way of doing it or what is the best practice to solve the issue.
http://plnkr.co/edit/3cSef9h7MeYSM0cgYUIX?p=preview
Datepicker using Jquery loses focus to the textbox after date selected. I am using jquery-ui-1.9.2.When a date is selected the focus not coming to the textbox.Any solution?
Try using the below code.
HTML code:
<input type="text" id="date"/>
JQuery:
$("#date").datepicker({
onClose: function () {
$(this).focus();
}
});
JSFiddle1
EDIT: The above code has a problem in IE, the datepicker is not getting closed. Here in this blog you can find the more information.
<script language='javascript' src="jquery-migrate-1.2.1.js"></script> // download and add this
$("#date").datepicker({
/* fix buggy IE focus functionality */
fixFocusIE: false,
onClose: function(dateText, inst) {
this.fixFocusIE = true;
this.focus();
},
beforeShow: function(input, inst) {
var result = $.browser.msie ? !this.fixFocusIE : true;
this.fixFocusIE = false;
return result;
}
});
JSFiddle2
$(".datepicker").datepicker({
onClose: function () {
$(this).parents().nextAll().find($(":input[type !='hidden']")).first().focus();
}
});
});
I have found an easier way that will put the focus on the next input, no matter how nested it is. You can always swap out the condition after the .find to whatever you like and it will bring the focus to that.
Initialise all the datepcikers on Doc Ready
$('.datepicker').datepicker(
{
onClose: function () {
this.focus();
}
});
Exapnding Praveen's answer.
I had one problem with it. On IE datepicker refused to show up each odd time I focused a field.
Also, there was a slight logical issue with that solution (which did not affect anything, but still not correct to my eye): fixFocusIE field is being set on options, but then later it is being called on "this", when "this" refers to DOM element and not options object. So essentially there are two fixFocusIE - one in options (unused) and the second one on DOM element itself.
And also $.browser.msie did not work anymore, I had to invent my own IE detector.
My working code looks like that:
var el = $("selector of element I need to assign to datepicker");
var options = {}; // actually I fill options from defaults and do some other manipulations, but I left it as empty object here for brevity
options.fixFocusIE = false;
function detectIE() {
var ua = window.navigator.userAgent;
if(ua.indexOf('MSIE ') > 0 ||
ua.indexOf('Trident/') > 0 ||
ua.indexOf('Edge/') > 0) {
return true;
}
// other browser
return false;
}
/* blur() and change() are needed to update Angular bindings, if any */
options.onSelect = function(dateText, inst) {
options.fixFocusIE = true;
$(this).blur().change().focus();
};
options.onClose = function(dateText, inst) {
options.fixFocusIE = true;
this.focus();
};
options.beforeShow = function(input, inst) {
var result = detectIE() ? !options.fixFocusIE : true;
options.fixFocusIE = false;
return result;
};
/* and this one will reset fixFocusIE to prevent datepicker from refusing to show when focusing the field for second time in IE */
el.blur(function(){
options.fixFocusIE = false;
});
el.datepicker(options);
Are there any events fired by an element to check whether a css3 transition has started or end?
W3C CSS Transitions Draft
The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.
Webkit
To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Mozilla
There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.
Opera
There is one type of transition event
available. The oTransitionEnd event
occurs at the completion of the
transition.
Internet Explorer
The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.
Stack Overflow: How do I normalize CSS3 Transition functions across browsers?
Update
All modern browsers now support the unprefixed event:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
I was using the approach given by Pete, however I have now started using the following
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
Alternatively if you use bootstrap then you can simply do
$(".myClass").one($.support.transition.end,
function() {
//do something
});
This is becuase they include the following in bootstrap.js
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'transition' : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
Note they also include an emulateTransitionEnd function which may be needed to ensure a callback always occurs.
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
Be aware that sometimes this event doesn’t fire, usually in the case
when properties don’t change or a paint isn’t triggered. To ensure we
always get a callback, let’s set a timeout that’ll trigger the event
manually.
http://blog.alexmaccaw.com/css-transitions
All modern browsers now support the unprefixed event:
element.addEventListener('transitionend', callback, false);
Works in the latest versions of Chrome, Firefox and Safari. Even IE10+.
In Opera 12 when you bind using the plain JavaScript, 'oTransitionEnd' will work:
document.addEventListener("oTransitionEnd", function(){
alert("Transition Ended");
});
however if you bind through jQuery, you need to use 'otransitionend'
$(document).bind("otransitionend", function(){
alert("Transition Ended");
});
In case you are using Modernizr or bootstrap-transition.js you can simply do a change:
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
You can find some info here as well http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
Just for fun, don't do this!
$.fn.transitiondone = function () {
return this.each(function () {
var $this = $(this);
setTimeout(function () {
$this.trigger('transitiondone');
}, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
});
};
$('div').on('mousedown', function (e) {
$(this).addClass('bounce').transitiondone();
});
$('div').on('transitiondone', function () {
$(this).removeClass('bounce');
});
If you simply want to detect only a single transition end, without using any JS framework here's a little convenient utility function:
function once = function(object,event,callback){
var handle={};
var eventNames=event.split(" ");
var cbWrapper=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
callback.apply(this,arguments);
};
eventNames.forEach(function(e){
object.addEventListener(e,cbWrapper,false);
});
handle.cancel=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
};
return handle;
};
Usage:
var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
//do something
});
then if you wish to cancel at some point you can still do it with
handler.cancel();
It's good for other event usages as well :)
i got a big problem with jquery and the postback.
i'm dynamically adding html elements to my page. e.g. JQuery UI Tabs.
but after postback ALL dynamically added elements are gone.
how can i keep all of these elements after postback and also the values of textboxes and datetimepicker?
greetz
Tobi
EDIT:
e.g. i'm adding some JqueryUI Tabs with this code:
$(function () {
var $tab_title_input = $("#tab_title"),
$tab_content_input = $("#tab_content");
var tab_counter = 1;
var $addButton = $('<li class="ui-state-default ui-corner-top add-button"><span>+</span></li>');
$addButton.click(function () { addTab(); });
var $tabs = $("#tabsTravel, #tabsWork").tabs({ autoHeight: true, fillSpace: true,
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
$(ui.panel).append("<p>" + tab_content + "</p>");
$("#tabsTravel ul.ui-tabs-nav").append($addButton);
}
});
$("#tabsTravel ul.ui-tabs-nav").append($addButton);
// actual addTab function
function addTab() {
tab_counter++;
var tab_title = "worker " + tab_counter;
$tabs.tabs("add", "#tabsTravel-" + tab_counter, tab_title)
.tabs("select", "#tabsWork-" + tab_counter, tab_title);
}
// close icon: removing the tab on click
$("#tabsTravel span.ui-icon-close").live("click", function () {
var index = $("li", $tabs).index($(this).parent());
$tabs.tabs("remove", index);
tab_counter--;
});
$("#tabsWork span.ui-icon-close").live("click", function () {
var index = $("li", $tabs).index($(this).parent());
$tabs.tabs("remove", index);
// tab_counter--;
});
$('#button').click(function () {
addTab()
});
});
how can i implement this localStorage to this code?
greetz
Bl!tz
Normally this would be the job of your server-side code; you would save the added elements in the the session cache, or in the database if the changes need to be permanent.
You could also consider using the new HTML5 session storage, or local storage, but this approach will probably be more of a hassle; best to use the sophisticated server-side libraries of PHP, .NET, etc, if possible.
Edit
Here's a simple example. Let's say your client script adds some HTML to the page:
var html = "<div>hello world</div>";
$("body").append(html);
Now, you can save it in local storage like this:
localStorage.setItem("dynamichtml", html);
If you put something in your page startup script like this:
$(document).ready(function() {
if (localStorage["dynamichtml"]) {
$("body").append(localStorage["dynamichtml"]);
}
});
Then you will have achieved the dynamic functionality. Note that the localStorage data will remain saved until the user deletes it explicitly.
In this JsFiddle : http://jsfiddle.net/maxl/mCXND/
(copied and modified from http://jsfiddle.net/ud3323/XMgwV/)
I try to create an Ember DatePicker based on JQuery's.
The first problem I run into is this line :
var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
jQuery.ui[this.get('uiType')] doesn't return a function, so I suppose that the solution
that I started with works for some jQueryUI widgets, but not all.
I would like a solution that will work for all JQuery-UI widgets,
and in particular JQueryUI's Datepicker.
Thanks
If you look at the jqueryui code, you see that some of them are invoked as a function, others not. You can solve it using this:
var ui;
if (typeof jQuery.ui[this.get('uiType')] === 'function') {
ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
} else {
ui = this.$()[this.get('uiType')](options);
}
working example: http://jsfiddle.net/PzsrT/7/
One more thing about jQuery UI's datepicker widget as a EmberJS Mixin.
If you want to supply a callback function to handle the beforeShowDay event, you will raise this error:
Uncaught TypeError: Cannot read property '0' of undefined
even if your callback function (in your ember view) return an array, like it's specified in the jqueryui doc
beforeShowDay: function(date){
some code...
return [true, ''];
};
This happens because nothing is returned after the callback.call in the _gatherEvents function
_gatherEvents: function(options) {
var uiEvents = this.get('uiEvents') || [], self = this;
uiEvents.forEach(function(event) {
var callback = self[event];
if (callback) {
// You can register a handler for a jQuery UI event by passing
// it in along with the creation options. Update the options hash
// to include any event callbacks.
options[event] = function(event, ui) { callback.call(self, event, ui); };
}
});
}
I fix this by adding a return statement before the callback.call.
_gatherEvents: function(options) {
var uiEvents = this.get('uiEvents') || [], self = this;
uiEvents.forEach(function(event) {
var callback = self[event];
if (callback) {
// You can register a handler for a jQuery UI event by passing
// it in along with the creation options. Update the options hash
// to include any event callbacks.
options[event] = function(event, ui) { return callback.call(self, event, ui); };
}
});
}
working example http://jsfiddle.net/thibault/qf3Yu/