I have an interesting situation. I need to navigate from one Angular app to a second one when clicking a link.
Other App
When I click this link the url updates to /otherApp, but the app itself does not load until I refresh the page. I know I'm missing something simple, but can't seem to put my finger on it.
Related
So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.
The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the
welcome menu button loads the welcome.html into the
#main-view and the url updates from
samplewebsite.com/dashboard to
samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.
Examples: mee6.xyz/moderation or contacts.google.com
What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:
HTML:
Welcome
JS:
$('#welcome-button').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#main-view').load(href, function() {
console.log("Load was performed.");
});
history.pushState(null, "Welcome", href);
})
I'm using Flask with Python where I have the following routing set up:
#app.route('/dashboard')
def dashboard_server():
return render_template("dashboard_server.html")
#app.route('/dashboard/welcome')
def welcome():
return render_template("welcome.html")
The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I
refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that?
Also the navigation (back/forward) doesn't work but that's another problem I'll
adress after I got this figured out.
What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when
pressing another menu button I want it to update the div and url and
on the refresh be on the same page with the updated div and so on.
A visual explanation:
I'm grateful for any kind of help. Thanks a lot in advance!
This seems to be a pretty hacky way to do routing with JavaScript. But here is how I think your problem can be solved:
When user refreshes the page on this url: /dashboard/welcome, you should run some js that would grab the location.pathname and know that the url must not have the welcome part and would redirect the user back to dashboard but you would have to add an url parameter to let the js on dashboard page know which page's content to load in the #main-view so from dashboard/welcome you can redirect the user to an url similar to this: dashboard?page=welcome. Now through js on the dashboard page, you need to grab the url parameter page and load the content of the welcome.html which you already have achieved. Now you should change the url back to dashboard/welcome from dashboard?page=welcome and push the url to history too.
This approach might have a lot of scenarios where the stie might break. One would be: when your js is evaluating things on dashboard/welcome page, the welcome page might have already been loaded, so you would have to show a loader or similar to prevent the flash of incorrect content.
I can't think of more scenarios from top of my head. I would suggest you to use some sort of framework/library to take care of routing for you. CRA (create react app), Next.js, Gatsby.js, Nuxt.js are all great libraries that can handle routing in a very robust way so you don't have to worry about that and can focus on the content and styling your applciation. Except CRA, I think all other libraries support static site generation which gives you better SEO overall. But to use these, you need to know React.js or Next.js at least. Best of luck!
Is it possible to install a pwa from a link?
For example:
you go to a domain name index.html page and view multiple links to different pwa apps.
Then click a link and it installs a pwa to that specific app (with or without) going to a landing page for that app?
As it is now:
if i go to
www.domainname.com/subfolder/index.html
and I have set it up as a installable pwa, it installs and the icon appears on the devices home screen with a link to www.domainname.com/subfolder/index.html..
What im looking for is:
if i go to www.domainname.com/index.html i will see a menu of available apps. if i click an app link it will install the home screen icon and when that is pressed will go to www.domainname.com/subfolder/index,html as the start page, without first going to the app main screen.
I have been experimenting with this, but i cant get it to work, just checking if it is possible, or my code is wrong.
i tried subdomian works, with https for earch subdomain is ok, let me try and post comment later for if subfolder is work
I'm developing a web app using ReactJS. I want to create an Admin layout my self. My problem is, how to change the view without reloading the sidebar? I mean, there is a sidebar in the Admin layout. We have options to click there. When we click on a particular option, let's say "User Profile", it loads the User Profile page on the right side of the screen. The URL also changes. But, the sidebar does not reload. Please, someone, edit this if the thing I'm going to express is not much clear. I hope it is clear.
I want to know, how to do this? How to route the views like that?
I have an android application, which I want to launch from the website.
Here is the condition: If user had installed that app previously then give the option to open it, if not then go to the play store.
I used this code in my website:
Click me
It is working fine.
Now what I want that when a user searches my website on Google and the link appears, if someone clicks on that link it will open the app.
As well as this code:
Click me
is not working if I put this into a function like:
launchApp:function(){
$window.location.href='myapp://link';
}
this is not working.
How do I fix these issues?
Create an Intent filter for the main activity/ the activity which you want to open, something like this: https://stackoverflow.com/a/31404717/7527995
I have a web app. The web app is added to home screen on iPhone. I have many external resources(Links) in my web app. Every time a link is clicked, it opens the web browser because target is set to _blank and there is no way for the user to go back. is it possible that the user will be able to open any of these resources without leaving my web app?
I was thinking of doing the following:
creating an iframe and have the links open within that iframe. I am hoping that there is something better out there.
If you still not sure what is it that I want?
a good example would be, if you look at facebook's native app for iPhone when you click on an article that someone posted, it opens the link within a frame that allow you to go back to your last page. In other words, you never leave their app. I understand that it is a native app and it is completely different but I believe that with JQuery Mobile or just JQuery it is possible. Am I wrong?