Refresh the page once res.redirect() loads - javascript

Basically i'm making an article website just for learning purposes.
When the user adds a new article, it should redirect him to home page.
Testing it and creating a new article, i expected to be available once i got redirected to home page, but it only shows up if i hit refresh, so res.redirect() is basically redirecting me to the home page previously loaded, instead of properly activating the route. There is some method like refresh() or something that i should be aware of?
Thank's in advance

I think what you'd be looking for is location.reload();
or in this case you could give document.reload() or window.reload() a go
https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

I had just found the trouble
// I was doing this:
Article.findAll()
.then( res.redirect("/home") );
// Correct way to do it:
Article.findAll()
.then( () => {
res.redirect( "/home" )
});

Related

Href to Onclick redirect

I have research this topic through the community, although I cannot find an answer. I am using Bronto's direct add feature (attempting to use it), The documentation isn't that great.
In summary, the href link subscribes the user on the email list. The only problem is that this link opens a new page. When I want the user to stay on the same page. I though about doing a redirect, when clicking the link, though I am not sure if that would work.
I have tried this:
//Html
<a id="subscription" href="http://example.com">Subscribe</a>
// Jquery
$("#emailsubscribe").click(function(e){
e.preventDefault();//this will prevent the link trying to navigate to another page
//do the update
var href = "http://example.com";
//when update has finished, navigate to the other page
window.location = "href";
});
The goal is that I am trying to make it where the user clicks on the link, it subscribes them to the email list, but immediately redirects them back, without opening another window.
You're looking for AJAX. This allows you to make requests without actually navigating to a page. Since you're using jQuery
$("#emailSubscribe").click(function (e) {
e.preventDefault();
$.get("http://www.myurl.com", function (data) {
//All done!
});
});
You have 3 options:
Do an AJAX request to subscribe the user
$('#emailsubscribe').on('click', function () {
$.get('/email-subscribe/' + USER_ID, function () {
// redirect goes here
window.location = 'REDIRECT_URL';
});
});
Use an iframe and when the iframe has loaded close the iframe (ugly, hacky, not recommended)
Have the subscribe page redirect the user back. Aka do the common messages of "You have been subscribed. Redirecting back in 5seconds...". You would need to pass the redirect link to the subscribe page, aka
window.location = '/subscribe/USER_ID?redirect_to=/my-redirect-page'
You need to refer the var, instead of typing another string to redirect.
//Html
<a id="subscription" href="http://example.com">Subscribe</a>
// Jquery
$("#emailsubscribe").click(function(e){
e.preventDefault();//this will prevent the link trying to navigate to another page
//do the update
var href = "http://example.com";
//when update has finished, navigate to the other page
window.location = href; //<<<< change this.
});

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});
});

Cannot set initial url for main-view

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

how can I navigate to page but ensure that the target page will be refreshed

I have a Login.html page from which I'm navigating to my Main.html
now when I;m doing a logout I want to navigate back to the login.html but I also want to ensure this page will be refreshed.
I don't want to disable the page cache, I just want only in this specific scenario to navigate it after refresh.
I tried the following:
window.location.replace but it doesn't refresh the page.
window.location.href - also doesn't refresh the page.
window.location.reload() - Refresh only the current page.
#Christof13 suggestion regarding passing a parameter is the only way I can see but it loading the page twice and it's very ugly,
any other suggestions?
How about setting a Timeout on the logout event? This way, the location reloads only once.
$("#myLogOutButtonOrLink").click(function() {
setTimeout(function(){
window.location.reload();
}, 1000);
});
My solution was using a global variable on the window scope as the following:
on main.html:
window.globals.RefreshRequired = true
on Login.html:
if (window.globals && window.globals.RefreshRequired) {
window.location.reload();
}
In this way the refresh will be done if I already visited main.html during the current browser instance.

Ajax Content Replacement with history url change

I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /about or /work or /contact to the adress but when I reload the site, the file cannot be find. Why?
Someone told me that the problem is that I added the file manually. How does that work? I am not a Javascript expert but I would like to learn it.
Somehow I need to add the history (via history api?). My .html files are in data. The strange thing is that it finds the file but when I try to find it manually, I get 404 Error or when I refresh the site with F5.
Can you help me and show me how it works. We can use my code to find the error. Thanks a lot.
UPDATE: Website Link
Html
<a class="hovers" href="about">About</a>
<a class="hovers" href="projects">Projects</a>
<a class="hovers" href="services">Services</a>
<a class="hovers" href="contact">Contact</a>
Javascript
$(document).ready(function () {
$('#allcontent').load('data/home.html');
$('.hovers').click(function () {
var page = $(this).attr('href');
$('#allcontent').fadeOut('slow', function () {
$(this).animate({
scrollTop: 0
}, 0);
$(this).hide().load('data/' + page).fadeIn('normal');
});
});
});
$('.hovers').click(function () {
history.pushState({
path: this.path
}, '', this.href)
$.get(this.href, function (data) {
$('#allcontent').slideTo(data)
})
return false
})
$(window).bind('popstate', function () {
$('#allcontent').slideTo(location.pathname)
})
I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /about or /work or /contact to the adress but when I reload the site, the file cannot be find. Why?
Your code is effectively saying two things:
Load some data from this URL and add it to the page.
Tell the browser that the modifications to the current page make it the same as some other page at some other URL.
You have to create the page at that the other URL yourself.
You haven't done anything on your server to tell it to respond to /about (and its friends) with anything other than a 404 error.
You have to create /about yourself. pushState won't do it for you.

Categories

Resources