Ionic - View Doesn't refresh when relaunched from the side menu - javascript

From my Side Menu, I have a view that loads two calls for action - scan barcode or search product when initially loaded. Once I a make a selection, the rest of the view is dynamically populated. Once it is dynamically populated and if I go back to the Side Menu to reload the view so that I can only see my original calls for action, I cannot see that. Instead I still see the dynamically populated state. At the beginning of the controller I have the following calls. $ionicNavBarDelegate.showBackButton(false), $ionicHistory.clearHistory(), $ionicHistory.clearCache().
I tried initializing the view with an empty function so that it causes the scope to reset however that didn't not help. Is there a way to trigger a fresh session every time I launch from the side menu?

I was able to resolve this by creating an empty controller that will redirect me to myview. The refresh worked magically every time.

Related

Refreshing a div or page in VUE.JS 2.0 after a v-for loop

I'm using VUE.JS 2.0 and I have a page that has a b-tabs component with 2 tabs. When I click on an option on tab page 1 it pulls data from a web server using AXIOS
axios.get('https://wwwwwwwww.azurewebsites.net/api/formattedpubs/' +
self.new_researchers[0].PMIDS)
.then(res => {
self.publicationData= res.data.New_Publications;
}
and builds the data on tab page 2 using a v-for loop.
<div class="person-info" v-for="obj in publicationData" :key="obj.pmid" v-bind:data-pmid='obj.pmid' >
My problem is I need to know when it is finished being rendered because I have a third party component that runs a javascript function over the data and pulls in metrics from another resource.
<div><div class='altmetric-embed' data-badge-type='donut' v-bind:data-pmid='obj.pmid' data-link-target='_blank' data-badge-popover='bottom' ></div></div>
according the readme file from the third party
If you're adding Altmetric badges to the DOM after the page has
loaded (via AJAX, for example) then you can ask the Altmetric embed
script to search the page again for new matches by calling
_altmetric_embed_init in Javascript:
The problem is that the page needs to be completely rendered before the badges can be put on. If I click on another tab and then click back the badges are there. If I put a button with the JavaScript refresh from the third party company they are there. If I try to time the page to display by timing a programmatic function I can't get it to refresh first then call the other function.
Bottom line is how can I know when the page is rendered? I tried mounted but since I need to know when the second tab is loaded it seems to fire when the first tab page is loaded.
I tried VUE - Call a function after v-for has done looping
but that does not seem to work for the second refresh. If I put into the isRendered function
this.$forceUpdate();
I get an error in the console of
[Vue warn]: You may have an infinite update loop in a component render function.
My fall back is to put a button that says "Show Metrics" but that's a last resort. Sorry for being wordy Thanks
Perhaps after you set self.publicationData you can await nextTick(), or perform the action you need within the updated lifecycle hook which occurs after a rerender.

The new added field doesn’t show up when I reload the page

I am facing an issue and I don’t know how to resolve it.
I added a field on a webpage using JavaScript, ( when the user clicks on a button a new field should be added and it must be a static I mean it doesn’t suppose to be disappeared when move to another page or refreshing the page)the field appears but when I refresh the page it disappears.
Is there a solution for this?
Usually the local variables which are set by JS will be cleared when refreshing page, so what you can do is,
1) make use of LocalStorage API or
2) if you have a server, create some API calls, store the value in DB, if the user logs in from different browser, he can see the field.

Ionic-1 Navigation

I am working on an Ionic-1 App. I am terrible confused in managing the back history of my app. Consider this scenario:
Start from home page then
Does a 3 step user registration process
After the end of user registration redirect to records page
Now clicking back button (hard or soft back) I want to navigate back to home instead of cycling through user registration process. There are other scenarios like this where back behavior needs to be modified. Are there any references around to implement back behavior systematically? Should I manually define view hierarchy tree structure and somehow figure out where in tree current view is and then go to parent?
As per my suggestion you should pass parameter say 'extraparams' in your url and set it value to 'home'.And on record page controller then make a function on back button say 'goBack()' where you can check if value of 'extraparams' is 'home' and then use $state.go() to navigate to home view.
If you can keep and maintain each and every section using state approach then you can redirect to home page or what ever the page you prefer to redirect to.In that way you have to implement back button like this way, $state.go('homeSate');
or if you can keep 3 steps(registration) as sub states and have try by injecting $rootScope to your controller in which allows you to access your parent(home).

partial ajax update with back button

I'm doing partial update to the page with Ajax which is a shopping cart that updates with Ajax as users add items to it. The problem is that if users move to checkout and then hit the back button the shopping cart looks empty as it was updated with Ajax. Refreshing the page make items appear again.
Is there a way to force updating the page on back button?
If you use the history.pushstate in your ajax app, you can keep the contents of the card in a variable in the global namespace (e.g. window.cartItems = { item1, item2, ... }), and after back button is pressed and the previous button is rendered again, get your items from that global object.
I would recommend against altering the behavior of the back button itself. Users expect the Back button to take them back a page, not to do anything else.
I would suggest a different approach. For example, you could have a piece of JS that runs on the cart page itself. This script would grab all the cart data from the backend. The script could run once when the page loads, ensuring that the cart is up-to-date.

How to go back to previous page in asp.net while retaining the previous page data

I am having problem while using onclick="javascript:history.back();" with Aspnet. In the first page i filled some data and click search button it show some results, i click on particular result for its details which navigate to the 2nd page but when i click on custom back button it refresh the page and all data set to initial values,when i use onclick="javascript:history.back();" I get nothing but the page displays "webpage has expired."
Thanks in advance!
This is because you are using HTTP POST for your search page.
If you use HTTP GET (putting your parameters in the querystring) - then the browser won't display this message.
This has nothing specifically to do with ASP.NET. It's a (sensible) browser behaviour to prevent you from repeating an action that may have undesirable impacts (for instance, sending two copies of an order)

Categories