im trying to implement a navigation like this using jquery mobile 1.45
page1 -> page2 -> page 3 -> go back to page1
How can i navigate to page1 removing page 3 and page 2 from history?
this is may function:
function backCertainPages(cant) {
var history = $.mobile.navigate.history.stack;
history.splice(history.length - cant, cant);
$.mobile.navigate.history.stack = history;
$.mobile.back();
}
but im getting a
Uncaught Exception: Uncaught TypeError: Cannot read property 'lastScroll' of undefined at (compiled_code):6317WL.Logger.__log # worklight.js:5064WL.Logger.$.each.PUBLIC_API.(anonymous function) # worklight.js:5444WL.Logger.window.onerror # worklight.js:5404
jquery.mobile-1.4.5.js:6317
Uncaught TypeError: Cannot read property 'lastScroll' of undefined
i just put changeHash: false in my transitions:
$.mobile.pageContainer.pagecontainer("change", id, {
transition : "pop",
reverse : true,
role : "back",
changeHash: false
});
and override all back button logic, except in the first page
Related
I'm using the modal compoenent from Bootstrap UI (https://angular-ui.github.io/bootstrap/) in Angular to render a modal, and on closing I want to be able to redirect to another state, or at least have a function be called.
The problem is I can intercept the close event but whenever I user presses Esc the modal is dismissed and I couldn't find any documentation of catching the dismiss event or assigning a function to the promise that is returned.
The code is as follows:
var modalInstance = $uibModal.open({
templateUrl: 'a-template.html',
controller: 'AnotherCtrl',
controllerAs: 'modal',
backdrop: false,
size: 'lg'
});
// I am able to catch this whenever the user exits the modal in an
// orthodox fashion. Doesn't happen when he presses Esc button.
modalInstance.closed = function () {
$state.go(homeState);
};
Alternatively another solution that would suit my business case would be to simply not allow the user to dismiss the modal. And close it myself whenever an event happens in the modal controller. I neither found functionality for this so far.
In the controller associated with the modal ("AnotherCtrl" or "modal" for you), you can use $scope.$on() with the 'modal.closing' event.
Example:
var modalInstance = $uibModal.open({
templateUrl: 'a-template.html',
controller: ['$scope', function($scope){
$scope.$on('modal.closing', function(event, reason, closed){
if('condition for not closing')
event.preventDefault(); //You can use this to prevent the modal from closing
else
window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
});
}],
controllerAs: 'modal',
backdrop: false,
size: 'lg'
});
I am using an external toolbar in a jQuery Mobile site I'm working on. I initialize it like so:
$(document).ready(function () {
$("[data-role='header'], [data-role='footer']").toolbar();
});
I have a couple of buttons in the toolbar and want to disable them during page transitions so users don't click them multiple times which seems to get the framework into a weird state. My first attempt has been to listen for the pagebeforeshow and pageshow events to programmatically disable and enable the buttons:
$(function() {
$("[data-role='header'], [data-role='footer']").toolbar({
create: function (event, ui) {
$(document).on('pagebeforeshow', function () {
$('#page-header .ui-btn').button('disable');
});
$(document).on('pageshow', function () {
$('#page-header .ui-btn').button('enable');
});
}
});
});
I have the code nested inside like that because I don't want to register the handlers until the toolbar has been initialized. However, I'm running into a separate problem:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'disable'
Since I'm not explicitly initializing the buttons myself, I'm not sure I understand how / where I can wait for them to be initialized.
Is there a better approach to this, and does anyone have any suggestions to get this working?
Use .button() on input with type button, reset and submit. For anchor or button tag you need to add / remove ui-state-disabled class.
$(document).on("pagecontainerbeforehide", function () {
$('#page-header .ui-btn').addClass('ui-state-disabled');
});
$(document).on("pagecontainershow", function () {
$('#page-header .ui-btn').removeClass('ui-state-disabled');
});
Demo
I am trying to use JQuery UI Dialog from AngularJS partial HTML pages.
The problem is that the dialog works fine, and even can be opened multiple types, from a view - as long as the view is opened for the 1st time.
Yet when navigating to another view, and then back to the view using the dialog - an attempt to open the dialog works as if there would be 2 dialogs to show, not one. Browser "refresh" of the view URL makes the problem disappear, till the next back-and-forth navigation.
I put a test application (not integrated with real back end) to show the problem:
Navigate to:
http://socialtodow.cloudapp.net/app/tdg_test/#!/new
Click on red "Get Advice" button: the dialog shows up OK, and can be closed with Esc.
Now, please navigate to http://socialtodow.cloudapp.net/app/tdg_test/#!/search and then back to http://socialtodow.cloudapp.net/app/tdg_test/#!/new
Click red "Get Advice". You get 2 dialogs, one on top of another - the buggy behavior I am talking about.
The relevant directive code:
.directive('advice', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var self = $(element),
adviceDialog = $(attrs.advice);
adviceDialog.dialog({
width: 260,
height: 405,
autoOpen: false,
modal: true,
dialogClass: "advice_dialog"
});
self.click(function () {
adviceDialog.dialog('open');
});
adviceDialog.find('button').click(function() {
adviceDialog.dialog('close');
});
}
}
}])
Checking
adviceDialog.is('dialog'))
does not seem to work - it's always true.
I am looking for a fix (not infrastructure replacement).
Any hint will be appreciated.
Max.
This is the modification to the directive, found by a developer wokring on the project, that seems to resolve the issue:
.directive('advice', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var self = $(element),
adviceDialog = $(attrs.advice);
self.click(function () {
adviceDialog.dialog({
width: 260,
height: 405,
autoOpen: false,
modal: true,
dialogClass: "advice_dialog",
close: function() {
adviceDialog.dialog('destroy');
}
});
adviceDialog.dialog('open');
});
adviceDialog.find('button').click(function() {
adviceDialog.dialog('close');
});
}
}
}])
Note: the URl mentioned in the original question may not be operational - sorry for that.
Max.
I have a page on which I am loading a select tag with options that I am getting from an ajax call to a service. It is working just fine and loading the select tag correctly. I only want this loading to happen once when the user first arrives at the page so I put the call to the function that does this inside the $(document).ready(function call. The problem that I am seeing is that when the user selects one of the options and then clicks a button under certain circumstances I pop a dialog (jQuery UI) telling them they need to take a certain action. The first time this happen and only the first time the selected option is getting reset somehow to the first option in the list. I ran in debug many times and discovered that if this is the first time on the page the selector is loaded on arrival at the page as is expected but if the dialog gets popped it is loaded again - only the first time - after that if the dialog gets popped the reload does not occur and all is well. The abbreviated code:
$(document).ready(function () {
$.fn.LoadStuff();
});
jQuery.fn.LoadStuff = function () {
//load up the select tag with options
};
LoadStuff does not get called anywhere else. selOffers is the select tag and dvConflict is the dialog. They are not sharing a common parent div.
<select id="selOffers"></select>
<div id="dvConflict"><div id="dvConflictMsg" /></div>
jQuery for the dialog:
var optSave = {
width: 400,
modal: true,
resizable: false,
draggable: false,
closeOnEscape: true,
zIndex: 1320,
buttons: [
{
text: 'Ok',
click: function () {
$(this).dialog('close');
}
}
]
}
$(".ui-dialog-titlebar").hide(); //Hides the title
$('#dvConflict').css('background', 'none'); //Takes out our custom background
$('#dvConflict').dialog(optSave);
EDIT: Two things
Use $.LoadStuff = function () { } instead of $.fn.LoadStuff = function () {...}. The first is to be called at any context via $.LoadStuff();. The latter is to be used on an element-selection, like $("div.to-load").LoadStuff();.
$(document).ready is fired every time the DOM finishes loading. In some AJAX calls, you could be reloading parts of your DOM, or an internal frame (I don't know, though I don't have your code).
The following code sample will help you bypass the problem:
var first = true;
$(document).ready(function () {
if (first) $.LoadStufF();
...
first = false;
}
When opening a dialog, make sure there are no <script> tags inside the dialog-wrapped element. Say you have the code line:
$('#dialoged').dialog({ ... });
So a bad practice is to have:
<div id="dialoged">
<script>
var first = true;
$(document).ready(function () {
if (first) $.LoadStufF();
...
first = false;
}
</script>
</div>
I have two pages, the method name is changepage index2.html ... inside this page I would like to make a call to the database and dynamically populate a listview but I can not get to call the function we just change the page ..
on the main page I have this script:
$(document).live( 'pageinit',function(event){
$("#changePageButton").click(function() {
$.mobile.changePage("index2.html", { transition: 'slideup'});
});
in index2
$(document).live( 'pageinit',function(event){
alert("OK");
});
but never displays the alert