Cannot set initial url for main-view - javascript

For the app I'm making, when the user first enters the app, the default home page is loaded (let's call it index.html). After the user signs in, they are routed to another page of the app (let's call this feed.html).
When the user leaves the app and decides to come back later, but is still logged into the app, I want the user to automatically see feed.html when the app loads, rather than index.html.
Is there any way I can do this? I have tried changing the default url dynamically and in the html as indicated here, but index.html keeps loading instead of feed.html.
Thanks in advance.
UPDATE:
var mainView;
if (localStorage.getItem("isLoggedIn") !== null){
// If already logged in
mainView = myApp.addView(".view-main", {
url: "feed.html"
});
}
else {
mainView = myApp.addView(".view-main", {});
}
So this is my code. According to the documentation, setting the url parameter when instantiating the main view should set the default url of the page to load when the view loads, but feed.html doesn't load.
Before this, I would forward the user to feed.html after index.html loads using the router:
mainView.router.load({
url: "feed.html"
});
but I would rather have the user land on feed.html instead of index.html if possible.

I have use previous version of framework7. its solve the problem

Related

How to redirect to the pages on back button click of different components in angular2?

I have 3 pages to implement this scenario.
Currently,
If I go to the first page and, click to navigate to the 2nd page. And then, on the 2nd page, I click the back button. It works fine (i.e, Navigates to 1st page).
Now, from 1st page, I go to the second page and, click to navigate to the 3rd page. And then, in the 3rd page, I click on back button, it redirects to the 2nd page as expected.
Now if I click on the back button on the second page, it goes to the 3rd page again. Where I want that to be redirected to the 1st page.
Here, actually according to code, it is working fine but my requirement is that
i have 2 pages company and companyApp where both pages have same guide and pin pages.. So, i want the guide page to redirect to company page, if i had been to guide page from company page even though guide page has been and come from images page.
If i had been to guide page from compnay app page then it must redirect to company app page even though it is again directed to images page and all.
So, can anyone help me to solve this:
TS:
// 1st Page:
goToGuide1(company){
this.router.navigate(['/guide',company.user._id]);
}
// 2nd page:
import {Location} from '#angular/common';
constructor(private _location: Location) {}
goToCompany1() {
this._location.back();
}
goImg(guide) {
this.router.navigate(['/guideimg', guide._id]);
}
// 3rd page
goToGuide1() {
this.router.navigate(['/guide',this.user_id])
}
Here on the 2nd page:
If I go to the Image page and click on back button, it comes to the guide page but doesn't go to the 1st page.
We use the benifits of localStorage and store the current Component and redirect accordingly,
Since you have,
{ path: 'company', component: CompanyComponent, canActivate:[AuthGuard] },
{ path: 'companyapp', component: CompanyAppComponent, canActivate:[AuthGuard] }
In Company Component:
goToGuide(company){
this.localStorage.store('oldroute', 'company')
this.router.navigate(['/guide',company.user._id]);
}
in companyApp Component:
goToGuide(company){
this.localStorage.store('oldroute', 'companyapp')
this.router.navigate(['/guide',company.user._id]);
}
In Guide Component,
goToCompany() {
if(this.localStorage.retrieve('oldroute') && (this.localStorage.retrieve('oldroute') == 'companyApp'))
{
this.router.navigate(['/companyApp']);
}else{
this.router.navigate(['/company']);
}
}
Reason for the behavior: It is happening because of the 3rd page is stored in the location attribute.
Angular API documentation states that,
"Note: it's better to use Router service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing."
The possible solution for your issues are,
Write a service which saves the whole user navigation history into a data structure and also to retrieve it when we need it.
Append the redirecting state through query parameters so that, using a conditional you can check that on the current page.
I'd possibly go with the option 1 if I have the same behavior several times in my entire application. but here the 2nd option would do.
While redirecting from any of the pages add the page detail into the queryParams and redirect.
Ex - If that's from the company page,
[routerLink]="['/guide', <anyId>]" [queryParams]="{from: 'company'}"
or
goToGuide1(company){
this.router.navigate(['/guide',company.user._id], { queryParams: { 'from': 'company' } });
}
So when you redirect to back you can check with a conditional and redirect back.
// Import
import { ActivatedRoute } from '#angular/router';
// Inject
constructor(
private route: ActivatedRoute
) {
// store the previous state
this.route.queryParams.subscribe(params => {
this.redirectedFrom = params['from'];
}
}
// check the condition while redirect
goToBackState() { // can go as goToCompany
if (this.redirectedFrom === company) {
// redirect to company
} else {
// otherwise redirect to companyApp
// Please note that you can check for the companyApp as well.
}
}
It is all about how you handle the conditional logic and overall logic as well. If you identify those and do it right,
Then it should work as it is expected.

Get current DOM element

I have a functioning site that includes a search function that loads results into a <div> element via a jQuery $.ajax call like so:
$.ajax({
url: '{{ path('order_search') }}',
type: $(this).attr('method'),
data: $('#search_form').serialize(),
success: function (data) {
$('#js-search-results').html(data);
}
});
I'm working in a twig template within a symfony project, thus the url notation. This is working perfectly.
This is on a site that requires login. I have an event listener in symfony that checks for a period of inactivity at each each kernel request (taken from here), and if the inactive period exceeds a maxIdleTime then the user is redirected to the login page.
My problem is that if the user is inactive for a period and then enters a search, the js-search-results div is filled with the login page. What I would like to happen is to have the entire window redirect to the login page. Seems simple, but I haven't figured out how to do it.
One what I thought to handle would for my login page script to check whether it was being loaded into the full window (rather than just a div element), and if not then refresh the entire window. How to do this?
You can check the content inside the variable "data" to check if it contains elements from the login page and then use an if else statement.
if(data.includes("username") && data.includes("password")){
window.location.assign("https://your.login.page.html");
}else{
$('#js-search-results').html(data);
}
It sounds like you want to find out what type of data is there and if it is the login page do a redirect.
Find out if the data contains elements that are in the login page. if it is do a window.location.href = "/login" if not display the search results in the div. send data from backend like {page : "login"}

What is the best way to show a page only on first visit with Angular?

I am using this code to show the splashscreen only when the user is visiting the app for the first time. This works, partially, but it's not working properly.
When a user, who has already visited the app before, visits again, it first shows the splashscreen for just 1 second (so a delay), before it (eventually) goes to the home screen... so it's like a glitch.
Main controller:
$urlRouterProvider.otherwise("/splash");
In my splashscreen controller, I have this:
if (localStorage['firstTimeLoad']!='TRUE'){
localStorage['firstTimeLoad']='TRUE';
$state.go('splash');
}
else {
$state.go('home');
}
So probably I am doing something wrong here and I want to know how can I show a page just once (on first visit!) and not anymore...
The code that is currently in your splashscreen controller might belong in your Main controller:
if (localStorage['firstTimeLoad']!='TRUE'){
localStorage['firstTimeLoad']='TRUE';
$state.go('splash');
}
else {
$state.go('home');
}
If the code above were in your splash screen controller, whenever the user gets to the splash screen for the first time it would send them back to the splash screen. Then the second time it would send them to Home (but you're still starting from the splash screen, so maybe there is still a delay before you send them to Home?).
Also, it seems like the code that is currently in your Main controller should be in your routes file:
$urlRouterProvider.otherwise("/splash");
Edit: According to the comments, there is no Main controller (that is what you call your route provider). So the redirect logic could go in your Home controller. But if you want to keep it in your splash screen controller, I assume there is a setTimeout in there - where is it located? It looks like your logic needs to be something like this:
if (localStorage['firstTimeLoad']!='TRUE'){
localStorage['firstTimeLoad']='TRUE';
$timeout(function() {
// Show the current splash screen for some time, then redirect
$state.go('home');
}, delayTimeInMilliseconds);
}
else {
$state.go('home');
}
But we may be able to provide better help if you show more code.
Edit: The code above works for me, but since it executes in the splash screen controller, even if the second branch of the if statement executes (causing an immediate redirect to home) the splash screen could still render and display for a fraction of a second before the redirect completes. A quick workaround could be to set a variable showSplashScreen:
if (localStorage['firstTimeLoad']!='TRUE'){
localStorage['firstTimeLoad']='TRUE';
$scope.showSplashScreen = true;
$timeout(function() {
// Show the current splash screen for some time, then redirect
$state.go('home');
}, delayTimeInMilliseconds);
}
else {
$state.go('home');
}
And then use ng-if = "showSplashScreen" on the outermost
element of your splash screen template. Otherwise, the redirect logic should be moved elsewhere (perhaps into the router itself, as a resolve property on the Home route or a parent route, or even in the Home controller) so that you never even get to the splash screen controller if the user has already been to the site.

Load external page on div and getting a specific url at the same time

I am developing a new website and while I want to get it done as easy to navigate as possible, I also wanted to use some kind of navegation with overlapping pages.
My idea was to have articles on the current page that will open on a floating div over the rest when clicked. That´s not really the problem because using jquery .load() it gets quite easy to do, but my problem is that it doesn't modify the current url, so it remains as www.myweb.com for example and I would like to have it like www.myweb.com/current-article when the article is opened. Once you have that specific url to the article, if it is shared, whoever open that link will get to the website with the article opened over the it.
I hope it all makes sense, but a good example can be found in USA Today or Play.Spotify
I am using umbraco 7 and javascript for the site. Any idea of how it could be done?
its called hash base navigation
location.hash = "#myHash"; //sets the url plus hash
Below is fired if user manually changes the URL or by using the back button
window.onhashchange = function()
{
if (location.hash === "#myHash")
{
doSomething();
}
}
This is actually a big and complex task to implement correctly.
I would advise you to use Backbone.Router http://backbonejs.org/#Router. It use history api in "new" browsers, with a fallback to hashtags in older browsers.
Some pseudo code:
First define your route. It will catch all pages under www.myweb.com/articles/*
var MyRouter = Backbone.Router.extend({
routes: {
"articles/:page": "loadPage"
},
loadPage: function() {
var div = $("#overlay");
div.html($.load("your page"))
div.show()
}
});
You would need to implement some logic to test if the loaded page is not under articles/.*
Init MyRouter when the page is loaded:
var router = new MyRouter();
router.start()
The overlay page will now open when you hit www.myweb.com/articles/cool-article
If you want to open the page from a parent page, simply call
$("button").click(function(){
router.navigate("articles/cool-article", {trigger: true});
});

Prevent iFrame from changing location?

I've got a simple app that parses Tumblr blog templates. It's modeled after their customization screen and contains a header with some configurable options and an iframe. Every time an option changes, the app reloads the iframe, serializing the config form and updating the iframe's src with the serialized data as a query string.
This all works fine, except every time this happens, I am only able to reload the main index page with the changed options. If the user wants to view, say, a single post page by navigating away from the index, the template renders that page, only with the default options.
In other words, the changed options do no persist while the user navigates the blog.
I've been able to have 'persisting changes' with an $('iframe').load() event like so:
$('iframe').load(function(){
updateTheme();
});
The only problem is, as you can tell, this would wait for the iframe to fully render the page using the default options, then re-renders it with the updated options. I mean... it works, but it's not really a great solution.
Does anybody know how I can prevent the iframe from loading, capturing the users desired location, then re-render the frame with the current options as represented in the header?
Any help would be greatly appreciated. Thanks in advance!
Are you hosting both the top-level page and the embedded iframe page? If so, there are some games you can play, but it's not pretty. For example you can rewrite links within the embedded iframe in order to pre-fill the config options, e.g. with something like:
$('iframe').load(function(){
$('a', $('iframe')).each(function() {
var new_url = this.attr("href");
new_url += config_options;
this.attr("href", new_url);
});
});
Here's what I came up with:
var p = top || parent;
(function($){
$('a').click(function(e) {
var prevent = e.isDefaultPrevented(),
is_local = p.isLocal(this.href),
is_hash = $(this).attr('href').match(/^#/);
if(prevent || ! is_local || is_hash) return;
e.prevenDefault();
p.updateTheme(this.href);
return false;
});
})(jQuery);
My worry was that I would be affecting the javascript events attached to <a/> tags by the user, but apparently jQuery will detect default prevented events, even if they weren't prevented with jQuery itself. I tested it like this:
document.getElementById('test-link').onclick = function() {
return false;
}
jQuery detects that the original event has been prevented, so I am just assuming I shouldn't continue.

Categories

Resources