I have a website in PHP which is completely ajax-based.
There is an index.php, but a part from it, all the other pages are never rendered directly into the browser. Instead, all the post and get requests are done from JavaScript through ajax. So basically, if you go to /contact.php you will not see anything. All the pages are rendered inside index.php.
There are a lot of people that use this page that are not very web-savvy and may not understand what it means when we ask them to refresh the page.
The biggest issue happens when we do a new release. Especially the JavaScript code (but not only) can be the old one in a client's webpage as they maybe haven't refreshed the page for some weeks.
I perform an svn update to publish the new code to the server. Then I refresh my page and see the new features.
However, the people that don't really know how to refresh will not see anything. I have added a big button on the page with the text "refresh", which executes a location.reload.
This may help some people, but not everyone.
How can I "force" the browser to reload itself when a new version has been published?
I would prefer something simple which does not require additional libraries or a timer.
It is also quite important that the page not refresh when the user is doing something with the page, as they may lose work when this happens.
I think you can add a version constant in your code
<?php
define(VERSION, '1.0');
And everytime you call a javascript add this extension
<script type="text/javascript" src="myfile.js?<?php echo VERSION ?>">
So when you'll update version, every js will be recalled by the navigator. Is it more clear?
You can also add a version check web service that will be called before any validate action, so you can refresh page or warn user before doing an action.
Without timer or socket.io you can't refresh page for user.
Related
I've got a simple help desk type system using WordPress posts. If you refresh the page, it queries the database and displays any new replies.
At the moment I am refreshing the page every couple of minutes to grab fresh replies, but this isn't the best option because if someone is writing a reply, it could be lost when the page reloads.
I'd like the page to be able to auto-detect any new replies/messages coming in and refresh the page automatically with AJAX. Is there a script I can find somewhere to achieve this? Thanks in advance.
To recap from the comments, these web apis will help accomplish the goal but overall the question is not answerable given the current information.
I'd like the page to be able to auto-detect any new replies/messages coming in
This can be accomplished, in theory, using the MutationObserver API though I don't know this to be available in all browsers.
refresh the page automatically with AJAX.
AJAX is not needed to refresh the page. The Location.reload() web api can refresh the page and may meet the use case in theory.
Additionally, I can infer that it is not the page but just a div on the page that needs to be appended with the update from a REST API. This can be done in JavaScript though more specific implementation is dependent on more details.
I am trying to code a javascript that runs throughout different web pages. The script should type something into a search bar, click search, click a result, then save each result text into an array. It looks something like:
function returnresults(queries){
arrayofcontent = [];
for each query {
type query in searchbar;
submit search;
result[0].click(); // go to first result
arrayofcontent.push(pagecontent.innertext);
}
return arrayofcontent;
}
The issue is that the script seems to be stopping after the script clicks search, which makes me think that the script is unloading itself when moving to another page, even though I'm typing the script directly into the javascript console in Google Chrome. Does anyone know how to tell Google Chrome to keep running the script even after moving between pages?
Short answer: No.
When you examine what's happening in a browser tab (including working with the console), you are only able to inspect what's loaded in that tab. If you navigate to another page in that tab, everything that was in memory from the last page is thrown out and the new page content is loaded.
What you need is to store the state of the script and then retrieve that state on the other page. Storing state can be done in many different ways (cookies, localStorage, sessionStorage, server-side databases) and you'll need to decide which is right for your architecture and use case.
if you want to inject your script to different web pages you can do that by developing a chrome extension . A extension enables to inject your script depending on your logic
here is the link to get started
https://developer.chrome.com/extensions/getstarted
I wonder how sites like SoundCloud work: you play a song and it keeps playing even if you move to another page without stopping
Any suggestions?
The only way I can think of is to build your app, or at least the parts of it that need to bo continuous, as a single page.
In practice, this means that only one HTML document is loaded. When, say, a link is pressed, the browser action is intercepted and prevented and the browser behaviour is faked by javascript.
Consider a website consisting of pages A and B. Normally, when a link pointing to B is activated, the URL is changed and the browser calls the server, requesting B. In a single-page application, however, this is interrupted by a javascript function, which changes the URL using the History API, and then displays B in a way that doesn't require a new document being synchronously fetched from the server.
There's a couple of ways to do it.
Navigate to a new page
If you do that, a whole new JS execution context is created for the new page, so you can't keep the function running. What you can do however is to "resume" execution in the new page. For this you need to save the state of the old page either on the server or in some client storage that persists between page changes (cookies, localStorage, etc).
Fake navigation
This is the most user friendly way - you turn your website into a web application. You no longer have multiple pages, so when user wants to change what he sees in the browser (like go to a new song), the app simply changes the appropriate area with the desired content. This is a complex topic that should probably be researched in itself, not explained in a SO answer. Go ahead and google "single page application" and you should find plenty of resources for it.
Technically you never change the page when you are using souncloud. You always stay on the same page and only the parts get changed which are actually changing, so you never reload the whole page. That's why they can keep the music playing: They just never remove or change the actual player. If you are wondering why the URL in your browser is changing if you never leave the page: They manipulate your history entries.
If you are interested in creating an application that behaves similar you should checkout frameworks like Ember.js or Angular.js. TodoMVC Gives a nice overview of those frameworks.
Got an AngularJS app set up, where some views require you to be logged in. Other views are publicly available. Ideally, the user would be redirected to the login page (which is currently outside the scope of the app) before any of the view is displayed.
Since it has to redirect depending on the hash-value, this can't be done back-end. I have the redirecting working alright within the js, although there is the issue that using $window.location.href does not seem to prevent the javascript from running. So you still get that quick flash of what was on the page.
Note, all info is validated back-end as well, so the user can't see anything they're not meant to. It's just a matter of UX. Would prefer not have the page quickly flash before redirecting.
Is there any way to tell the browser to stop executing after $window.location.href?
EDIT:
While not an optimal solution, I've decided to have the <body> hidden by default. Then I use an if-else to either redirect or show the body.
I'm still interested, if anyone can think of a better solution?
I would like a javascript to run after a page is loaded , like on the example below with a delay of 6seconds. Right after the page loads the rest of JS is lost (obvious)...
Got any ideea how change content after page is loaded without clicking a button?
javascript:window.location = "http://example.com";
setTimeout(function() {
document.getElementById('lightbox').style.display = 'none';
}, 6000);
Once you set window.location the original page will be unloaded before the new page is loaded by the browser. This means your script will be gone before the new page start loading and thus can't modify the new HTML anymore.
This behavior is inherent to the security model of the browser. Without it you could inject any JavaScript into any web site of your choosing, which would be a huge security risk. What you are asking for is so-called XSS (for cross site scripting), which is prevented by the browser applying a so-called SOP (for same-original policy).
There are some common ways to work around this limitation in a safe way:
Set up a proxy to serve both your JavaScript and the original site. This way both your script and the original site come from the same domain and satisfy the browser's same-original policy (SOP). You could run the original site in an iframe with your custom script occupying the top-level window. Alternatively you could inject your script into the HTML as it is being retrieved through your proxy.
Run your script as a browser add-on or user-script. If you choose to do this, the user will have to specifically grant your script the rights to run locally with elevated rights. Greasemonkey popularized client-side scripts for Firefox a few years ago, but recently they seem to have lost momentum.
Ask the site owner to include your script. I doubt this is a valid option for your situation. But if it is a valid option it is definitely the simplest one.
Ask the user to run your script after the site has loaded. This one is probably also not valid for you, but if valid it would once again be a very simple solution.
Your example shows that you are first redirecting and then attempting to hide #lightbox. This script would not work, because you are redirecting the browser to another site before #lightbox gets hidden.
In short, you cannot have Javascript of a previous page manipulate DOM of the next page if you redirect the user to another URL (or even the same URL). Only Javascript that is 'on currently open page' can manipulate currently open page and no other pages.
I have not understood what you are saying. JS is lost? Please be more clear.
I think what you are talking about is the jquery ready function which runs after the DOM is ready. Or in the other case, try using window.onload() function.
This should do the job:
$(window).bind('load', function() {
// your code here
});
Then simply add the delay to your added code with .delay("6000");
The inserted code will only run when your page is completely loaded.