I need to make a section of my site like a vidiprinter stlye thing where I can update it and the page will refresh automatically on the user's device without them having to refresh. Ideally if I could allow other people who I specify to update the thread as well that would be great but is not essential. Is there any way that I can do this? (As simple as possible)
Thanks!
Have javascript check / make an ajax call to some back end page to check for updated. I'd also save the time stamp of the last time the page was updated, and then check if the newest comment / update time stamp is greater than the old time stamp, then update the page either by refreshing the whole page, or by adding the info right there from an an ajax call.
Related
We are using the Orangehill fork of bootstrap-session-timeout and it works nicely, with one exception, and I cannot figure out how to reslve this. Wondered if someone could help turn the light on for me.
Site is written in PHP with Bootstrap3 and JQuery3.
The footer of every page contains the script that activates bootstrap-session-timeout, but the option to reset the timer each time the mouse is moved is not used. If there is no activity within the timeout period, the ribbon pops up and the user is given the option of Staying Connected or Signing Out.
This is working fine for the site, however what we have is an order edit page, where users can add, delete and update lines that are on an order. The page is not refreshed during the edit. To add, delete or update order lines, the links call JS functions, which in turn call PHP scripts to perform the updates, JS then being used to update the screen contents dynamically.
We need to reset the session timeout counter each time the user updates the order.
Ideally, we would like to call a function whenever an update to the page contents is made, but none of the individual bootstrap-session-timeout functions seem to be available within our JS.
Hope this makes sense and thanks in advance for any help/pointers.
Since nobody responded to this question, I thought it pertinent to add my solution, which might not be the best, but it does work.
Basically, we have an order entry page which stays in place while an order is being entered. The countdown timer keeps going even though the user might be doing something on the page (we have the on-key options turned off). So, even though the user might have last updated the order 5 minutes ago (the updates being handled via Ajax calls to PHP API's), the countdown timer is not reset because the page has not been reloaded.
My solution is to write the timestamp to a file which is keyed by PHP session-id, every time a PHP script is loaded. This applies to the main page or to API's. So, when the countdown timer ends, a timeout script is called, and this checks whether the last activity timestamp in the file is before or after the timeout cutoff point. If it is, the logout script is called, but if not, the current page is refreshed, which causes the countdown timer to be reloaded.
I need to reload an HTML page every second to monitoring the server status in a automatic control application. I'm able to do this using a Javascript timer, but I have a boring info bar on browser (I'm using Chrome, but I suppose that it is present also in others browser) that inform me that the page is reloading, and it is flashing every second. I would like to remove this info bar. Does someone help me ?
Thanks and regards,
Enrico.
Don't do this! This is a common case for AJAX - instead of refreshing the page. You'll be able to load data from the Server without reloading anything - on the fly!
Take a closer look at jQuery's ajax:
https://api.jquery.com/jQuery.ajax/
BUT: For monitoring purposes you should take a look at Node.js! This gives you the ability to handle requests and sockets in realtime. Ajax is useful for e. g. preventing page-refreshes but in your scenario i really recommend to use Node.js - its worth it!
To answer your Question:
Its not possible to access and control browser-related elements like the yellow info-tooltip on the bottom left when refreshing the page or hovering a link like it's also not possible to change the cursor's position.
I have a bit of an issue with page formatting when I navigate away, and then hit browser back to a page.
Here is an example:
I have security questions on a form in a drop down list like so:
http://i.stack.imgur.com/ib32z.jpg
When the user selects [Type in your own question] from the drop down list, I have some jquery that animates a CSS change that pushes the form down, and makes visible a hidden field for 'custom security question'. When selected, the form looks like this:
http://i.stack.imgur.com/uVPKo.jpg
Now my dilemma is when I navigate away from this page, and then navigate back using the browsers back button, my formatting gets screwed up and looks like this:
http://i.stack.imgur.com/5Xhpi.jpg
The javascript that I have written does not trigger again on the back button so the browser doesn't know to move the form back down to accomodate the change in spacing. Is there anyway I can force the document.ready to reload or clear some kind of cache?
Thanks!
EDIT: Sorry guys, I need to reupload the images to a host and repost. Sorry for the delay.
There are basically four mechanisms for persisting state on the web:
Browser-based - the browser, if you're lucky, will save answers to form fields and re-display them when it sees an INPUT with the same name; also, some browsers will preserve some state between forward<=>back navigation
Cookie-based - pretty self-explanatory; you save a cookie with the state info, and check it later to recover the state
URL-based - navigate to a different hash of your URL, with the info you want in it (eg. "?roll_down=true")
HTML5/Local Storage - Look it up if you're interested :-)
We can basically throw 1 and 4 out, because they both rely too much on browser behavior/support, and we can't reliably rely on all browsers to handle them the way we want. That leaves #2 or #3.
Cookies allow you to save more info (as much as a cookie holds, ie. about 4k). URLs allow less info, but they have the added benefit of bookmark-ability; if the user saves the URL as a bookmark (or as a link they send a friend, or whatever), the state still gets preserved.
So, take your pick of the above, decide on how to persist your "my form is rolled down" state ... and then comes the part that (I think) you're really interested in: how do you check this state and fix things when the user clicks "back"?
That part I humbly defer to another SO post, which has already answered it:
Is there a way to catch the back button event in javascript?
I am trying to use the jQuery Countown plugin to let my users now how much time they have left for a certain task.
So I use the following code to start the countdown with 30 minutes.
<script type="text/javascript">
$(function () {
$('#defaultCountdown').countdown({until: '+30m'});
});
</script>
The problem is that the users are going to be navigating to different pages for a given task, and if I just include this code on all the pages the timer would start from 30 minutes every time a user goes to a new page or refreshes the current one. I am new to jQuery so I would like to know if there is a way to make this code static so that is starts after a given event(in one page) and is and stops when an event on another page has occurred?
EDIT: I should mention that the countdown will only be used for a usability test in a controlled environment so that the application will only be run on one computer.
Client side solution:
Instead of counting up to a relative time, count to an absolute time and store it in a cookie.
Each page can lookup the value and start the timer.
This is not possible unless some synchronisation mechanism is provided:
Each page passes to the other the time remaining in the query string. Initialisation code needs to be modified in order to start the countdown from the received parameter.
Each page posts the time remaining in the server. This is more difficult to implement as it requires a persistense layer in the server.
What usually happens is to have the countdown in one tab/window and open the other pages in new ones. You can ask the user not to close the original window.
I see three solutions:
1) Give starting time from server side.
2) Load other pages with AJAX, so page will not refresh
3) Use frames (worst choice).
What is the best way of doing a pagination? I would also need to save the current page, so that when I click a link it would save the page I was on. So if I'm on page 2 of the pagination and click one link and then get back to pagination page it would remember that I was on page 2.
I get the results/data from Json request where I have offset and limit possibility.
$.getJSON(base_url+'/ajax/get_news/4/!OFFSET!/!LIMIT!/true', func...
Where !LIMIT! is how many results it shows and !OFFSET! is, well offset :D When I click a link, it makes that request, it goes throught the results and appends the result into page.
What is best way to save the page, cookies? Should I get all the results and then do the pagination somehow or do new request when user change page?
Some tutorial or "hands on" example would be awesome. Normal instructions/guides are difficult to undestand since my first language isn't english.
It appears you have two questions:
1) How to save page state (what page you are on): If the application must continue to use an ajax, then you should look at storing the state in the url as discribed here:
http://ajaxpatterns.org/Unique_URLs
2) Regarding where to do the pagination, I think it would depend on the size of the data to paginate. If it is small and you are not worried about the data changing on between paging, do it all in javascript. Otherwise, do it server-side.
Okey I should use the !OFFSET! and !LIMIT! to do the pagination. I just need change those numbers with pagination links (1 2 3 4 pages etc) to get the pagination to work I believe. But I dont know where to start :/