Refresh Page Without Screen Going Blank? - javascript

I was wondering how GMail and things like that can update the emails in there without the entire screen going blank.
I am working on a web tools site here. As you can see on the right hand sidebar, there is a news feed that shows the recent events of certain members.
It is a simple PHP script that shows the latest events, these events are stored in a MYSQL table. This PHP script is then iframed for the sidebar.
I want the sidebar to automatically update. It can either update on a time interval (like every 10 seconds) or just when a new event is added.
I tried having a meta refresh that went every 5 seconds (on the PHP script)... it did not work well though. Every 5 seconds the entire sidebar would go blank and then re-appear. Plus the loading wheel for the site would constantly appear every time the sidebar refreshed.
Is there a simpler way to do this? Maybe using some type of JavaScript event to check for new events and then spit them out, instead of refreshing the whole page?
EDIT: OkayThanks For Your Help! I got it going with AJAX! However, I am now running into a different problem...Please continue reading...
I was using JavaScript to display the time in the bottom right corner of each event. I was using a code similar to this...
<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>
This would be the HTML actually stored in the database. The problem is that the AJAX is grabbing this code, spitting it out (onto the iframed page), and then the time snippet is not being executed (everything else works fine).
I would prefer to use JavaScript over PHP to display the time, because with JS you don't have to worry about timezone differences.
Is there anyway I can fix this?

Essentially if you want to mimic the concept of how GMAIL and various other sites render a page and then manipulate it there after without making the page reload between transactions as j08691 indicated in a comment to you AJAX is the methodology your looking for, however it requires knowledge of JavaScript and some server-side scripting such as PHP in your case.
For the sake of ease when building a scaleable piece of software of even just a web site in general I would suggest looking into a JavaScript library like jQuery, Prototype, Dojo, or the like. My personal flavor is jQuery as in my own opinion it is very stable, has a large support community and all around is easy to learn over all.
It will aid in rapidly developing JavaScript based code that will be cross browser compliant without having to write long lengthy scripts in native javascript to do the same as you could more easily achieve with a library backing it up.
http://www.jquery.com - core library
http://www.jqueryui.com - extension of the library
plus there's hundreds of thousands of little plugins you can pick up to aid develop your overall user experience quicker as well.

You can check it here:
Ajax let you send/fetch data from the back-end without refreshing your page
http://api.jquery.com/category/ajax/

Related

replacing showModalDialog causes loss of form post functionality

I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks
I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.

Which is more fast in going from one page to other, a link or a button?

Recently I designed a page which has a navigation bar with four buttons. The user is directed to different page on clicking each different button. For the buttons I'm using the following code,
<button type="button" class="subheader-buttons" onclick="window.loation=document.location.href='PAGE 1'">Button 1</button>
I'am using the above code for all the four buttons. Now I'am wondering whether it will be advantageous to use links instead of buttons? Do links goes from one page to another faster than the buttons?
I believe it is much faster just linking, since what your doing is executing javascript which takes more than just linking it in an href!
But still this is a very big debate!
I take this info from uxmovement.com
When we look at the web, links outnumber buttons on most websites. The reason for this is because
links are easier to create
links are simple and sufficient
links don’t overshadow content
Buttons, however, are the opposite.
buttons take more time and effort to create
buttons can come in different sizes, colors and styles
buttons can sometimes overshadow content
You can get more info on this website:
http://getlevelten.com/blog/randall-knutson/design-decisions-buttons-vs-links-fight
You should use <a href=""> over window.location.href, for several good reasons.
Firstly If you have your javascript disabled, then none of the links would work.
Google Bot do not interpret javascript, and so they won't follow any of your links.
For more info: window.location.href vs clicking on an Anchor
Using a standard HTML link is the common way to do it. Although both methods will be roughly as fast.
Technically, because you're using JS with your button, your browser has to run the code before sending you to a different page so it may take a fraction of a second longer.
You could make a link a button without using JS:
<a href="your-page.html">
<button>Your Page</button>
</a>
It's the same. You can use <button></button> if you want.
However, use javascript to link to other page may take a sightly slow, u can check by using network
I think a link would be faster. In both, the web server will be going to the link specified by href. However, a link would just be that - a call to redirect. However, a button, as far as I am aware, sends much more data to the webserver, and also has many more things react to it - aka more overhead. Therefore, the link may be faster. However, it would only have a marginal effect really, unless you had a lot of traffic to your website, so I don't think it matter to much - you should probably just go with whatever you feel comfortable with.
I also just wanted to point out that I don't think using javascript to navigate to the page like that may be the best idea, regardless of whether you are using links or buttons. Serving webpages is a job for the webserver, and thus javascript calls may not be the best. Using the language that you are using for your web server (and if you are not, then I suggest you start using a back-end for your website), you should be able to respond easily to the button click / page redirect. The upside of this would be that it would also allow for any extra work to be done on the page as required.
The difference wouldn't be significant (or even noticeable by human). There are other concerns (most importantly accessibility) as to whether to use onclick or href.

is it possible to crawl one page to render it to another page in javascript and html?

At my company, we are debating this. Say you have a color swatches that is already built in product detail page. At the category page, where each products are displayed, doesn't have color swatches. So we are trying to build one. I was suggesting if we can use jquery or javascript to crawl it, cache it or drag it from the pdp and display it in category page. If we do that, it probably gonna be very slow because the category page is going to hit the server many times.
Additional info, we don't have access to the php codes, so only javascript, jquery and html is possible.
I am actually looking for a way to do that. of course, it has to run fast too. Any suggestions of possibility anyone?
i dont think it is possible, your jquery or javascript should be native to the page to read its contents, ok lets assume it is native and you can read the content but where do you store ? with only javascript and jquery and not much of server side it is impossible

How to display a self-refreshing "popout" html GET page in a fanciful AJAX

I've got a web form done many donkey years ago that generates on form submit a popout html- page that refreshes itself every 10 seconds with the latest data drawn from the database.
Many browsers now prevent popouts, so I reckon that I need to rework the same web form to generate an AJAX or AJAX like "popout" that is not affected by browser security settings that block popout by default? Please advise if otherwise.
The "popout" should be movable, auto-refreshing and include a close button. I would also need to link to the "popout" from a html link.
Would like to hear from you web experts what are my options? :)
My recommendation as I said in my comment would be to take a look at jQueryUI specifically around the dialog (example here: http://jqueryui.com/demos/dialog/)
You could then use a javascript timer to periodically poll your server using jQuery Ajax (which if you haven't looked at before I would highly recommend) - see http://api.jquery.com/jQuery.ajax/

Preventing the loss of keystrokes between pages in a web application

My current project is to write a web application that is an equivalent of an existing desktop application.
In the desktop app at certain points in the workflow the user might click on a button and then be shown a form to fill in. Even if it takes a little time for the app to display the form, expert users know what the form will be and will start typing, knowing that the app will "catch up with them".
In a web application this doesn't happen: when the user clicks a link their keystrokes are then lost until the form on the following page is dispayed. Does anyone have any tricks for preventing this? Do I have to move away from using separate pages and use AJAX to embed the form in the page using something like GWT, or will that still have the problem of lost keystrokes?
Keystrokes won't have an effect until the page has loaded, javascript has been processed and the text field is then focused.
Basically what you are really asking is; how do I speed up a web application to increase response times? Your anwser is AJAX!
Carefully think about the most common actions in the application and use AJAX to minimise the reloading of webpages. Remember, don't over-use AJAX. Using too much javascript can hinder usability just as much as it can improve it.
Related reading material:
Response Times: The Three Important Limits - Great article from the usability king, Jacon Neilson.
Ajax Usability Mistakes
AJAX Usability Checklist
Perhaps I am under-thinking the problem but I'll throw this out there... You could just put your form inside a hidden div or similar container that you show (perhaps give it a modal look/behavior?) on the click event of the link. That way the form is already loaded as part of the page. It should appear almost instantly.
You can find modal div tutorials all over the place, shouldn't be too tricky. If you're using ASP.NET there's even one included in Microsoft's AJAX library.
AJAX or plugin are your only chances.
I think it will be quite hard to do what you want. I presume that the real problem is that the new page takes too long to load. You should look at caching the page or doing partial caching on the static components such as pictures etc. to improve the load time or preloading the page and making it invisible. (see Simple Tricks for More Usable Forms for some ideas)
For coding options you could use javascript to capture the keystrokes (see Detecting various Keystroke)
<html><head>
<script language=javascript>
IE=document.all;
NN=document.layers;
kys="";
if (NN){document.captureEvents(Event.KEYPRESS)}
document.onkeypress=katch
function katch(e){
if (NN){kys+=e.which}
if (IE){kys+=event.keyCode}
document.forms[0].elements[0].value=kys
}
</script>
</head>
<body>
<form><input></form>
</body>
</html>
You will need to save and then transfer them to the new page after control passes from the current page. (see Save Changes on Close of Browser or when exiting the page)
For some general info on problems with detecting keystrokes in the various browsers have a look at Javascript - Detecting keystrokes.

Categories

Resources