I am trying to show a popup when a page loads. I have a generic popup embedded in each page that should be shown if there are data in the popup itself. Here is the code I'm trying to use:
$(function() { // initial page load
$(document).on("pagechange",
function(event) {
var pageId = $(document).pagecontainer( "getActivePage" )[0].id;
displayMessages(pageId);
});
});
}
I've looked at every other sample I've seen on StackOverflow, but none of them seem to work. The error I'm getting is:
Error: cannot call methods on popup prior to initialization;
attempted to call method "open".
So, when can I call popup("open") on a popup?
EDIT TO INCLUDE displayMessage FUNCTION
function displayMessages(pageId) {
pageId = pageId || $("body").pagecontainer( "getActivePage" )[0].id;
try {
var errCount = parseInt( $(jq(pageId + ".errorCount")).val() );
if ( !isNaN(errCount) && errCount )
{
$( jq(pageId + ".errors") ).popup( "open" );
}
else if ( $(jq(pageId + ".message")).text() != "" )
{
$( jq(pageId + ".message") ).popup( "open" );
}
} catch (e) {
alert(e);
}
}
Related
I am using a jquery ui autocomplete. when the user types in their own value, rather than selecting an item from the list, the textbox clears. This is ok (I don't want the user to be able to enter their own values) except if the user types in a value that does exist on the list.
I tried using the autoSelect plugin as detailed in this post, but it is not working - I added the plugin but when I type in a value that IS on the list and hit tab, I get the same results as before - the textbox clears.
Here is my autocomplete:
$(function () {
$('[id$="txtDocType').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/MyPage.aspx/myFunction",
data: "{'prefixText':'" + request.term.toLowerCase() + "', 'ddvId':'" + this.element.data('autocomplete') + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) { }
});
},
minlength: 1,
select: function (event, ui) {
$('#divOtherFields input[type=text], input[type=password]').prop("disabled", false).removeClass("disabled");
$('[id$="btnSaveNext"],[id$="btnSaveClose"]').prop("disabled", false);
$('[id$="txtReceiptDate"]').datepicker("setDate", new Date());
}
});
});
Here is the plugin:
(function( $ ) {
$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).on( "blur", function( event ) {
var autocomplete = $( this ).data( "autocomplete" );
if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
autocomplete.widget().children( ".ui-menu-item" ).each(function() {
var item = $( this ).data( "item.autocomplete" );
if ( matcher.test( item.label || item.value || item ) ) {
autocomplete.selectedItem = item;
return false;
}
});
if ( autocomplete.selectedItem ) {
autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
}
});
}( jQuery ));
I set a breakpoint in the plugin on this line - "$( ".ui-autocomplete-input" ).on( "blur", function( event )" and the breakpoint was hit, yet the code would not step through. When I set a breakpoint to this line - "var autocomplete = $( this ).data( "autocomplete" );" the breakpoint was NOT hit.
Any ideas? I am at my wits end with this.
I solved this by making a couple of tweaks to the autoSelect plugin. Here is the code that eventually worked for me:
$(".ui-autocomplete-input").bind("focusout", function (event) {
var autocomplete = $(this).data("ui-autocomplete");
if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
autocomplete.widget().children(".ui-menu-item").each(function () {
var item = $(this).data("ui-autocomplete-item");
if (matcher.test(item.label || item.value || item)) {
autocomplete.selectedItem = item;
return false;
}
});
if (autocomplete.selectedItem) {
autocomplete._trigger("select", event, { item: autocomplete.selectedItem });
}
});
I used the focus event to set the first value to a hidden variable. The same hidden variable also got updated in the select event. And then this was the hidden variable which I posted to the ajax call.
Why I did not use focus to set the value in the autocomplete input box, was because doing so populated the autocomplete input box even while I was typing in this box.
focus: function (event, ui) {
if($("#streetid")) $("#streetid").val(ui.item.label); //this was my hidden variable
}
},
I am trying to change a page and display a view with JQM and backbone.
My home page loads ok but when I try and go to the second page - this is when I have a few questions. the page loads but nothing is showing
so my app has a router
var AppRouter = Backbone.Router.extend({
//define routes and mapping route to the function
routes: {
'': 'showHome', //home view
'home': 'showHome', //home view as well
'products/productList' : 'showProducts',
},
initialize:function () {
// Handle back button throughout the application
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
},
defaultAction: function(actions){
this.showHome();
},
showHome:function(actions){
// will render home view and navigate to homeView
var homeView=new HomeView();
homeView.render();
this.changePage(homeView, 'fade');
},
showProducts:function(){
var productList=new Products();
var self = this;
productList.fetch({
success:function(data) {
self.changePage(new ProductListView({collection:data}));
}
});
},
changePage:function (view, transition) {
//add the attribute 'data-role="page" ' for each view's div
if (transition != "slidefade") {
transition = "pop";
}
view.$el.attr('data-role', 'page');
$('.ui-page').attr('data-role', 'page');
//append to dom
$('body').append(view.$el);
if(!this.init){
$.mobile.changePage($(view.el), {changeHash:false, transition: transition});
}else{
this.init = false;
}
}
});
$(document).ready(function () {
console.log('App Loaded');
app = new AppRouter();
Backbone.history.start();
});
return AppRouter;
here is also my view page for product
var ProductListView = Backbone.View.extend({
template: _.template(productViewTemplate),
initialize: function () {
_.bindAll(this, "render");
this.collection.bind("reset", this.render);
},
render: function () {
var self = this;
this.collection.each(function(model) {
self.$el.append(self.template(model.toJSON()));
console.log("here");
});
}
});
return ProductListView;
So from within the homeView I can change the page and that's fine the issue what am i doing wrong on the products view for it not to return a thing.. no errors are returned.
thanks
so I have done some more work and made my show products function
showProducts:function(){
var productList=new Products();
var self = this;
var productListView =new ProductListView({collection:productList});
productList.fetch(self.changePage(productListView));
}
this works when the view is
var ProductListView = Backbone.View.extend({
template: _.template(productViewTemplate),
initialize : function () {
_.bindAll(this, "render");
this.collection.bind("reset", this.render, this);
},
render: function() {
var self = this;
this.collection.each(function(model) {
self.$el.append(self.template(model.toJSON()));
console.log("here");
});
}
});
return ProductListView;
but now jQueryMobile doesnt add on its code so it has no styling..
any suggestions?
Both Backbone.js's router and jQuery Mobile use the hashtag and don't work so well together. There are ways to get them to work but unless you have specific reason to do so I'm not sure its worth it, instead I'd recommend using jQuery-Mobile-router which is a plugin for jQuery mobile, that was created for this very reason (that is to work with Backbone.js). As a bonus the jQuery Mobile Router ties in with the special JQM Page events.
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.
I am working on a PhoneGap application that uses jQuery Mobile (jQM). This application has areas that will require the user to be authenticated. So I'm using jQM's pagebeforechange to determine if the user needs to authenticate before viewing the page they have requested. If so, I send them to a login page.
I want to keep the login page out of jQM's history tracking. That is, if the user is presented with the login page, but decides to press "cancel," I want the application to go back to the previous page and not have a "next" page in the history; the "previous page" would be at the top of the history stack.
Here's how I am handling the login page redirection:
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/someRestrictedPage/)) {
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "myLogin.html";
}
});
For the cancel button of my login page I am doing:
$loginCancelButton.bind('click', function() {
var prevPage = $.mobile.urlHistory.getPrev();
if (typeof prevPage !== 'undefined') {
$.mobile.changePage(prevPage.url, {
changeHash: false,
reverse: true,
transition: "pop"
});
}
});
However, when I do this, I end up with a $.mobile.urlHistory.stack with three elements:
[ {"index"}, {"login"}, {"index"} ]
How do I manage intercepting page changes to redirect to a login form when necessary, but not create an "invalid" navigation history?
looking at the jquery docs it mentions that pagebeforeload event needs to be stopped. and then call the data.deferred (resolve or reject).
try changing it to:
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/someRestrictedPage/)) {
e.preventDefault()
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "myLogin.html";
}
data.deferred.resolve(/* url */, data.options)
});
A solution for the initial problem could be something like:
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/ your regex /gi))
{
if (!check_login())
{
e.preventDefault();
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "#SignIn";
$.mobile.changePage("#SignIn");
}
//data.deferred.resolve('#SignIn', data.options);
}
});
That worked for me just fine.
VeXii's solution seemed to work for me. By simply removing
data.deferred.resolve('#SignIn', data.options);
and
e.preventDefault();
On jquery mobile 1.3...
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/index/)) {
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "#login";
}
});