I´m developing an App with Cordova Onsen-UI and AngularJS.
I have several pages in my application.
I change the page with that command:
$scope.ons.navigator.pushPage('msg_det.html', { animation: 'slide' });
I´ve noticed the following:
If I call the same page with the same command again, the old page still exist.
(I have a html element
for example: <img id="test" src="sadf.png" />
with an ID. At the first time, the access by id works.
$("#test").css("left", "20px");
After the second time it is not been working anymore.)
That is a sign, that the id still exists a second time.
Is there a chance to build the page "msg_det" new and delete the old one.
It seems that you need to check it manually
$scope.ons.navigator.getPages() gives you all the pages that currently exist, so check if your page already exist call the destroy() on old page.
for more info take a look at http://onsen.io/guide/overview.html#PageNavigation
Related
This is my first post on Stack Overflow. Excited to be a part of the community!
I am creating a Stock Market App project. I ran into an interesting problem. I am using Materialize in my project over Bootstrap. I am coding in React. I have 2 stocks in my initial state, Apple and FaceBook. Whenever I click on them, the modal opens with more stock info on each. But whenever I add a new stock (like JPM), the item shows up, but whenever I click, it will not open.
In materialize, you initialize the modal with jquery like below in (index.html). Then you make the href and ID match on each item like I did. I inspected the new like created for JPMorgan and it says href="#JPM" and id="JPM" just like the others that work. The only thing I can think of is that maybe whenever the jquery initializes, that when I add an item, it is somehow not initialized as well? But I'm not sure about that because it is just a simple line of code:
$('.modal').modal();
Def pretty stumped here. The github repository is below. I'll also post some screen shots of my StockItem.js file. https://github.com/Christopher-Bowling/Stock-Market-App
Pictures:
Index.html StockItem.js
You need to run the component initialisation each time you create a new element that needs initialising.
When you run $('.modal').modal(), jQuery looks for any element in the dom and runs the .modal() function on it - once. Any dynamically added elements (added after this initial has run) will behave as if you never ran the init at all. It is touched upon on the select doc page:
Initialization
In addition, you will need a separate call for any dynamically
generated select elements your page generates.You must initialize the select element as shown below.
https://materializecss.com/select.html
I am working on a site that is transitioning to Angular - it uses Angular for single page application navigation and a new feature I'm currently working on is written entirely in Angular.
The rest of the site takes navigation results and returns them through the SPA model, the feature I'm working on runs entirely in a single page, but in order to make links shareable and bookmarkable it changes the URL in relation to the current state of the page.
So when someone selects a new subsection of the new feature, we have some code like this in the subsection service:
function setLocationForSubsection(subsection) {
var path = subsection.id ? "subsections/" + subsection.id + "/" + subsection.urlSlug : "";
$location.path("/section/" + path).search({}).skipReload();
};
If they follow a link to elsewhere in the site ( which goes through a $stateProvider.state('all', { url: '*urlPath?id', controller... pattern ) it works correctly.
If they then hit the back button, they come back to the correct page and setLocationForSubsection is called. If they click on the same link outside of the subsection again, nothing happens.
So this course of action occurs:
/section/2/subsection-name <- works.
/news <- works
back button ( /section/2/subsection-name ) <- works
/news fails
As far as I can tell, the problem arises because the location path setting fails to push the location into the angular state in this situation, so as far as angular is concerned it is still on /news and so when I try to navigate back there, it doesn't pick it up as a navigation event. I have tried using $window.history.pushState(null, 'any', $location.absUrl()); manually, but it doesn't seem to make any difference. If I drop the skipReload call it works but reloads the contents of the page, which is superfluous in this case. I'm using that approach for now, but I would like to know if there is a better option.
Is there a way to tell angular that a state change has happened in this case?
I'm sure ui-router is very useful when a site gets complex, but man is it indecipherable on a simple site.
I've got a table with a bunch of records on a summary page called /records/. (not concerned about how this page was built - it's built with ng-grid)
I want to click on record 102 and have it open /records/102 where I will use the id to show deets of 102.
This plunker is never going to work, but I've tried to put the basics in:
http://plnkr.co/edit/qfEaMM8Ihgg8gCUAMHbE?p=catalogue
enter code here
This: {{row.entity['id']}} does give me the record ID I'm looking for - I've got that working. It's a matter of how I get it to routes.js where it says url: '/records/:recId' and then how I get it to appear in the URL when it goes to the new page.
How do I do that?
(P.S. 'Submit Error: links to Plunker must be accompanied by code'. What??)
To redirect to /records/102 you just use a normal html anchor like this:
<a href="/records/{{row.entity['id']}}" ...>
Yo get the value out in your RecordsController you need to use the $routeParams service, inject it and use it like this:
$scope.recordId = $routeParams.recId;
I'm using Angular UI router in my app. This is what I'm doing.
A main view contains a child view and a div container for "pagination"
By default, initially, a first set of contents is loaded
When a user clicks on "next page", next set of contents is loaded (with the URL also being changed to /content/2 (where 2 indicates the next page number)
All is working well, but each time the contents are loaded, it goes "blank" before it loads. So it seems like it's reloading the view (which is obvious).
What I would like to do is reload the content without having that "blank" page. How can I achieve this?
At first thought, I think you could you the same approach as infinite-scroll, which is what I'm using. So you make a GET request to the server to get new content and push it to the list on clicking 'next'. However, since the URL changes also. This will cause the controller to be reloaded. You can actually bypass this by setting reloadOnSearch to false.
I am writing something like a registration process containing several steps, and I want to make it a single-page like system so after some studying Backbone.js is my choice.
Every time the user completes the current step they will click on a NEXT button I create and I use the router.navigate method to update the url, as well as loading the content of the next page and doing some fancy transition with javascript.
Result is, URL is updated which the page is not refreshed, giving a smooth user experience. However, when the user clicks on the back button of the browser, the URL gets updated to that of a previous step, but the content stays the same. My question is through what way I can capture such an event and currently load the content of the previous step and present that to the user? Or even better, can I rely on browser cache to load that previously loaded page?
EDIT: in particular, I'm trying something like mentioned in this article.
You should not use route.navigate but let the router decide which form to display based on the current route.
exemple :
a link in your current form of the registration process :
<a href="#form/2" ...
in the router definition :
routes:{
"form/:formNumber" : "gotoForm"
},
gotoForm:function(formNumber){
// the code to display the correct form for the current url based on formNumber
}
and then use Backbone.history.start() to bootstrap routing