When I run the following test, it passes. It is supposed to fail (note the commented line making the tap() call). It is only supposed to pass when the tap() call is made. Would anyone have any idea why $.mobile.loading is showing as having been called when I don't send a tap() event?
beforeEach(function() {
jasmine.getFixtures().fixturesPath = ".";
loadFixtures('index.html');
});
/* this test is buggy - it passes even when the tap() method is not called */
it("should display a PageLoadingMsg", function() {
var PageLoadingMsgCount = 0;
runs(function() {
$('#account_creation').trigger('pageinit');
console.log('d');
spyOn($.mobile, 'loading').andCallFake(function() {
PageLoadingMsgCount++;
console.log('a');
});
console.log('e');
spyOn($.mobile, 'hidePageLoadingMsg');
spyOn($.mobile, 'changePage');
});
runs(function() {
expect($('#account_creation_create_account_button')).toHaveAttr('data-role','button');
// $('#account_creation_create_account_button').tap();
});
waitsFor(function() {
return (PageLoadingMsgCount > 0);
}, "PageLoadingMsgShown timed out", 1000);
runs(function() {
expect($.mobile.loading).toHaveBeenCalled();
console.log(PageLoadingMsgCount);
expect(PageLoadingMsgCount).toBeGreaterThan(0);
});
});
Here is the call it is trying to spy on:
$(document).on('pageinit', '#account_creation', function(event) {
$(document).on('tap', '#account_creation_create_account_button', function(event) {
event.stopImmediatePropagation();
event.preventDefault();
console.log('b');
$.mobile.loading('show', {theme:settings['theme'], text:"Creating account..."});
console.log('c');
...
Thanks,
David
I just ended up waiting for the call count to get to 2.
waitsFor(function() {
return (PageLoadingMsgCount > 1);
}, "PageLoadingMsgShown timed out", 1000);
Related
Today I prepared some PHP pages with jQuery-Mobile. It should enable for swiping from one page to another.
In general the swiping works but there is one problem: When I've swiped to a new page swiping doesn't work on that page first. Only when I reload the page it works again. The page source before reloading is OK.
It seems to me that not all inclusions are executed when I have swiped to a new page. How can this be fixed? E.g.: Ref link
$(document).ready(function () {
var urlup, urlleft, urlright;
$('img').on('dragstart', function (event) {
event.preventDefault();
});
$('img').each(function (i) {
if (this.src.indexOf("buttonup.png") >= 0) {
urlup = this.parentNode.href;
this.id = "buttonup";
} else if (this.src.indexOf("buttonleft.png") >= 0) {
urlleft = this.parentNode.href;
this.id = "buttonleft"
} else if (this.src.indexOf("buttonright.png") >= 0) {
urlright = this.parentNode.href;
this.id = "buttonright";
} else {};
});
//$.mobile.loadPage(urlup);
//$.mobile.loadPage(urlleft);
//$.mobile.loadPage(urlright);
$(":mobile-pagecontainer").pagecontainer("load", urlup);
$(":mobile-pagecontainer").pagecontainer("load", urlleft);
$(":mobile-pagecontainer").pagecontainer("load", urlright);
$(document).on("swipeup", function () {
$.mobile.changePage(urlup);
});
$(document).on("swipeleft", function () {
$.mobile.changePage(urlright);
});
$(document).on("swiperight", function () {
$.mobile.changePage(urlleft, {
reverse: true
});
});
$("#buttonup").click(function () {
$.mobile.changePage(urlup, {
transition: "slideup"
});
});
$("#buttonleft").click(function (event) {
event.stopPropagation();
});
$("#buttonleft").click(function () {
$.mobile.changePage(urlleft, {
reverse: true
});
});
$("#buttonright").click(function () {
$.mobile.changePage(urlright);
});
});
In the meantime I was able to fix this problem: I used the document-ready-event and this one is not fired when jQuery Mobile loads a new page. Thus the javascript code that binds the swiping events was not executed. I had to use JMs pageinit event instead. After fixing some other problems swiping works fine on my pages now:
http://www.ulrichbangert.de/orchid/odm_rawdonjester.php
Best regards - Ulrich
I wish to show loading message during page transition in jQM and backbone. But the showPageLoadingMeassage isnt working.
Following is my code:
collection.js
findById : function(artistId, page, limit, sort) {
$.mobile.showPageLoadingMsg('a', 'Loading......', false);
var self = this;
if (limit == undefined) {
limit = 10;
}
$.mobile.showPageLoadingMsg('a', 'Loading......', false);
console.log("hello");
$.ajax({
type: "GET",
url: siteURL + 'artists/artist_detail/artist_id' + artistId + '.json',
}).done(function(msg) {
var response = JSON.parse(msg);
if (response.status == true) {
var dataArray = response.data;
console.log(dataArray);
self.reset(dataArray);
if (self.length > 0) {
$.mobile.hidePageLoadingMsg();
}
//return dataArray;
} $.mobile.showPageLoadingMsg($.mobile.pageLoadErrorMessageTheme, 'Sorry! No records found', true);
setTimeout(function() {
$.mobile.hidePageLoadingMsg();
}, 1500);
}
});
}
where am i getting wrong?
edited:
it works when for search page:
... findByTitle : function(keyword, genre, language, page, limit, sort, collection, fan, featured) {
//~ console.log(page);
var self = this;
if (limit == undefined) {
limit = 10;
}
$.mobile.showPageLoadingMsg('a', 'Searching......', false);
$.ajax({....
found the answer on stackoverflow itself- jQuery Mobile - Problems getting showPageLoadingMsg to work with pagebeforeshow or pagebeforeceate.
It says that sometimes jQM doesn't adds the ui-loading class to the body so we have to do it manually.
$('body').addClass('ui-loading');
$.mobile.showPageLoadingMsg('a', 'Searching......', false);
and while hiding the loading msg:
setTimeout(function() {
$('body').removeClass('ui-loading'); //remove class
$.mobile.hidePageLoadingMsg();
}, 1000);
This function was also deprecated and in the current versions is not at all.
Situation:
My tooltips show up on my page. Opening my fancybox works. Doing the ajax post from that fancybox works.
But my tooltips don't work in that fancybox. And they don't work after my ajax post.
I tried to reinitialize TipTip with the callbacks of fancybox.
EDIT
Title changes
So I found a way to let it run on the second hover after post but not on first hover.
I also found some explanations here but it still didn't fix my problem. Probably doing it wrong.
EDIT 2
Tootip in fancybox working use afterShow only.
Changes
added this in $(function () { so that it calls this function instead of initTipTip.
$(".tooltip").live('mouseover', function () {
$(this).tipTip();
});
Code of my function that does the post thing and closes my fancybox.
var reservation = MakeReservation();
var oldDateSplit = $("#resDate").val().split('/');
var newDateSplit = $("#dateEditReservation").val().split('/');
var oldDate = new Date(oldDateSplit[2], oldDateSplit[1] - 1, oldDateSplit[0]);
var newDate = new Date(newDateSplit[2], newDateSplit[1] - 1, newDateSplit[0]);
var time = $("#txtTime");
$.ajax({
url: ResolveUrl('~/Reservation/CheckSettings'),
data: "JSONString=" + reservation + "&hasJavaScriptMethod=" + true
}).done(function (data) {
if (data.length == 0 || oldDate.getTime() == newDate.getTime()) {
$.fancybox.close();
var id = $("#reservationId").val();
$("#reservationList").load(ResolveUrl('~/Reservation/reservationList',
function () { initTipTip(); }));
$("#reservationDetail").load(ResolveUrl('~/Reservation/DetailInfo',
function () { initTipTip(); }), { reservationId: id });
$("#reservationList").on("hover", " .tooltip", function () { $(this).tipTip(); });
}
else {
$(".errorDiv").removeClass("hidden");
$(".errorDiv").html(data);
$(".btnReservations").removeAttr('disabled');
}
});
NEW
$(".tooltip").live('mouseover', function () {
$(this).tipTip();
});
}
Still the same as before the edit.
Code initialization for TipTip
function initTipTip () {
$(".tooltip").tipTip();
}
Code of fancybox
function openFancy() {
$("a.inline").fancybox({
'type': 'ajax',
'afterShow': function () {
return initTipTip();
}
});
$("a.inlineBlockedDate").fancybox({
'type': 'ajax',
'ajax': { cache: false },
'afterShow': function () {
return initTipTip();
}
});
}
I found the solution for this.
So I used my .live in $(function(){ like in my question but I did not use ".tooltip" here but the table itself. I also use initTipTip here instead of $(this).tipTip();
So this solves the Tooltip from TipTip.
Explanation: This is because the tooltip.live only gets triggered on first hover and not when the table 'refreshes'. So now you add that event on that refresh of the table
Correct me if I'm wrong here.
So no need for any other .tiptip stuff or InitTipTip then in $(function(){
$("#reservationList").live('mouseover', function () {
initTipTip();
});
I hope your problem gets solved with this question.
Here's my JavaScript sample:
function createButtons(idDialog, tab, fn, param) {
var btns = new Array();
for (var i = 0; i < tab.length; i++) {
btns.push( {
text: (tab[i]>0 ? '+':'')+tab[i],
click: function(a) {
console.log(fn);
console.log(param);
fn(param);
$(this).dialog("close");
}
});
};
btns.push( {
text: "Close",
click: function() {
$(this).dialog("close");
}
});
$(idDialog).dialog('option', 'buttons', btns);
}
The params: fn is a function that should be called whenever we click the button, and param is a param that should be passed to the function.
When I use this code, console.log(fn) says undefined and console.log(param) says undefined. It kinddof doesn't recall the param.
How should I do?
I've asked JoshNaro to answer but he didn't so here's the solution he gave that works perfectly:
function createButtons(idDialog, tab, fn, param) {
var btns = new Array();
for (var i = 0; i < tab.length; i++) {
btns.push( {
text: (tab[i]>0 ? '+':'')+tab[i],
click: function(a) {
console.log(fn);
console.log(param);
fn(param);
$(this).dialog("close");
}
});
};
btns.push( {
text: "Close",
click: function() {
$(this).dialog("close");
}
});
$(idDialog).dialog('option', 'buttons', btns);
}
createButtons(
"#Hello",
['Save', 'Load'],
function(parameter) {
alert(parameter);
},
'World'
);
In my extension where the overlay.js comprises of the following events:
var sto =
{
onLoad: function() {...},
onMenuItemCommand: function(e) {...},
onToolbarButtonCommand: function(e) {...},
};
window.addEventListener("load", function () { sto.onLoad(); }, false);
I would need a listener fired every time a button is clicked in a loaded page. How can I achieve this?
Well I'm not sure if that's what u want but u can try to do an event delegation on the entire document:
var document_mouseup_lst = EventListener.createEventListener();
doc.addEventListener("mouseup", document_mouseup_lst, false);
document_mouseup_lst.addEvent("mouseup", function click(e, callback, object){
var element = e.target;
if(element.tagName.toLowerCase() === 'button') {
if (e.which == 1) { // left click
// do whatever u want
} else if (e.which == 2) { // middle click
// do whatever u want
}
}
return false;
});
btw in order to create the eventlistener (the EventListener object which got the createEventlistener method) I used this page Ajaxian >> An alternative way to addEventListener
I found the solution - was quite easy. Ok here is the source:
https://developer.mozilla.org/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages
and the modified code:
var sto =
{
onLoad: function() {...},
onMenuItemCommand: function(e) {...},
onMouseClick: function(e) {...},
onToolbarButtonCommand: function(e) {...},
};
window.addEventListener("load", function () { sto.onLoad(); }, false);
document.addEventListener("click", function(e) { sto.onMouseClick(e); }, false, true);