Keep most HTML after link clicked - javascript

Hi i want to make an effect similar to what this site does http://www.hffm.co.uk/
When you change the page the url up top changes but the content in the sidebar and header stays the same. - i am also curious if this affects SEO.
They stay the same - and do not reload with the page - i figure it has to be some ajax thing? Curious what a system like this is called.
The point is in their case they dont want to interrupt the radio on a link change.

To update the specific part of the page it can be achieved through Ajax and JQuery. Basically both of the those works on the client side which means that website doesn't refresh. You can always make a Ajax request to the server which can return the content in a Json format and that content can be reflected on the page using Jquery.
This is only just a overview of how ajax/Jquery works. But you need to be more specific in what you are trying to achieve and what you have done so far.

Related

How to reload/refresh the content of div without clicking the button or ink in javascript/ jquery

How do i reload/refresh the div in a couple of seconds without refreshing the whole page and without clicking any button or link. The div below with id='div_graph' is the div i want to reload/refresh. Note: inside the dashboard.php contains query.
<div id="div_graph">
<?php
include('folder/dashboard.php');
?>
</div>
Thank you very much.
I think your question is too broad for this site. Broadly, to reload a single div you need some client side code (often javascript) to either trigger the update or send a request. You will have to have code on the server side to receive that request and generate the data (or the entire div) and send it back. You then need to have client side code to apply or update the div.
You question is close to, "how to I jquery ajax?"
There are lots of guides if you search for "how to use jquery ajax with php". Good luck.

HTML hide info bar during page reload

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.

Changing Document headers with Javascript or equivalent

I'm running into the following issue
For the most part, the whole website is generated on the initial load, so there is no changing of pages and new content fades in nicely using Javascript, however there is a portion of my website that is a bit load intensive, and that is the calendar (lots of events read from database to the calendar), so I use a GET/POST request to change months and so on, so now whenever someone refreshes the page it will say the general "Are you sure you want to resubmit blah...ect", the client doesn't want this even though there's no reason for the user to refresh. Is there a way to change headers so when I click a link it will change headers and get rid of that request?

how to clear gridview using javascript or jquery

i have a grid view and a file upload button on a page. I have users load their data to my site and i parse their files and load onto the gridview. Then using ajax i update the javascript/jquery I allow users to edit their data right on the gridview. My problem is somehting that should be simple to fix but yet im stumped. Once the user is ready to submit the gridview data for good i have an AJAX call to a webservice that i send all the information on the grid. Then i would like to clear the grid and basically start with a clean page again. However i cant seem to clear the grid view. The data just keeps refreshing in the control with the original data. I realize that it has to do with the fact that is bound on the server but i cant unbinded!. i have tried.
window.location.reload()
but all this does its get me a crappy message from firefox telling me that the page is going to refresh.
I saw this on this site from various people
Response.Redirect(Request.RawUrl);
however i don't know how i can trigger that from an Ajax call?. Can i? I'm doing everything through Ajax partly because is where im most comfortable, but i would hate to have to put another button on the page and make the user have to click that button to restart it seems silly. I would like to do a full page refresh on my command. Is there anyway to do this via AJAX? putting a server button does not seem feasible to me due to the fact that once i load data in grid view i use jquery data table and jeditable and work pretty much on the client.
I'm open to suggestion, ideas, tips, anything at this point. So frustrated with what should be a simple task.
Thanks in advance
Miguel
To force a full page refresh without postback you can set the window.location.href value to the current window.location.href
e.g.
Imagine our current scope is the success callback of your grid data ajax submission function, so when the page reloads all new data will be fetched.
//reload the page now that data has been updated.
window.location.href = window.location.href;
If you must use server controls, you can wrap it in an UpdatePanel. This will make it ajax-enabled, but is pretty brute force.
There are nice libraries from companies like Telerik that have ajax-enabled controls. These cost some dough, but if you are doing a lot this it may be worth it.
Another option that does not support server templates/databinding is to use a jQuery based grid like jqQrid.

Unobtrisuvely ask user for details

I am trying to figure out the best way to acompish "unobtrusive" forms for a user (within a web app).
The purpose: keep user on the site by not asking to fill unnecessary form in. Ask for the details as only when such are needed.
The requrements are:
User should provide additional details only when it is required (email to receive notifications, login required for account page, save credit card details when checking out).
User should not leave the current page providing the additional details.
The implementation would be fairly easy if all requests would be AJAX ones. It would be easy to analyse the response (401 or so) and show the appropriate lightbox-form.
I do not see how it can be done "the right way" with plain anchors and form submits as in both cases the user actually leaves the page (by following the link or submitting a form) and there is no way to analyse the response on the client side.
Converting all links and forms to AJAX ones would be just silly.
The closest analog to what I want to achieve is the default Basic Authentication dialog in most of the browser. But obviously that just doesn't fit my requirements.
Any creative suggestions how to do that for non-AJAX requests?
Regards,
Dmytrii.
In a page sense, where "page" refers to what the user sees and not what the URL is, I only can think of following ways to update independent parts in a page with JavaScript (and thus Ajax) switched off:
Frames
Iframes
Using held-open connections there are two more ways to update a page, however these do not work reliably in all cases:
Animated GIF
CSS DIV tags with absolute positioning.
Note that this needs that your Server can keep open a session for each person looking at the page, which can be thousands. If this does not work the only possible workaround is with FRAMEs and automatic refresh, which is somewhat clumsy.
As I think that you do not want to use Frames and you do not want to render animated GIFs, I explain the CSS DIV way:
When you load the page you do not finish loading it. Instead the connection is kept open by the web server and the script handling the connection waits for additional information to arrive. When there is additional data, this is sent to the browser by encapsulating it into additional DIV tags which can overwrite other parts of the page.
Using "style" in the DIV tag and CSS position:absolute these can overwrite other information on the page like a new layer. However you need either position:absolute or must add this data to the end of the page.
How does this work with forms?
Forms usually have a known size so you can put them into IFRAMEs. These IFRAMEs get submitted to the webserver. The script there notifies the other script that new data must be output, so the waiting script renders the response and displays it in the page while the script which took the submit redisplays the form with fresh values only.
How does this work with 404 and anchors?
I don't really know because this must be tested, but here is a hint how I would try to implement this:
We have 2 issues here.
First the URL must not point to other pages but back to a server script again, so the href is under control. This script then notifies the waiting script to update the page accordingly, for example by retrieving the page and sending it to your browser. The script can check for 404 as well.
Second you must hinder the browser to switch the page when clicking on the anchor. This probably involves some clever tricks using CSS, target and server side status codes (like "gone" or redirect to the current page, whatever) to keep the browser from switching the page. I am not completely sure if that works, but if you remember download pages, these show URLs which do not switch the page but have an effect (downloading the file). That's where to start to try to hack browsers not leaving the current page without using JavaScript.
One idea not followed here is not keeping the connection of the page open but the CSS file and send new css information to the browser which then "fills in empty stubs" using the CSS way. But I doubt that this works very well, most browsers probably will parse the CSS only after loading finished, but perhaps I am wrong.
Also note that keeping a connection open never finishes the page loading, so you will see the busy-logo spinning all the time, which is unavoidable with this technique.
Having said this all I doubt you get around JavaScript.
What I wrote here is very difficult to do and therefor usually is not used because it scales badly. And it is a lot more difficult than using JavaScript alone (that's why I explained it).
With proper AJAX it is much more easy to reach your goal. Also note that you do not need to change your page source much, all you need is to add a script which augments the page content such, that for example forms suddenly use AJAX instead of a direct POST with re-rendering the page. Things which cannot be detected easily then need some hints in the tags such that the tag scanner knows how to handle the tag. The good thing then is, that with JavaScript switched off your page still works - however it then "leaves the page".
Normal HTML just was not designed to create application-like web pages like we want to see today. This all was added using JavaScript.
About popup forms
The Basic-Auth-Handler reloads the page after the user enters something into this dialog, only if cancel is hit the current page is displayed.
But there are two ways to present additional query-popups in a page using JavaScript:
The first one is the javascript "prompt", like in following example:
http://de.selfhtml.org/javascript/objekte/anzeige/window_prompt_vor.htm
(Click on the "Hier").
The second one is "JavaScript forms" which are like popups within an HTML-page.
However I consider popups to be far too intrusive and bad design.
Ajax and JavaScript is the easiest way
Unfortunately using JavaScript is never easy, but if you think JavaScript is improper or too difficult, there is no other technique which is easier, that's why JavaScript is used everywhere.
For example your page onload-Script can cycle through all Anchor-Tags and modify them such, that clicking on them invokes a function. This function then must do something clever.
Same is true for Forms. Fields which can be modified (like the user's eMail address) then have two views, on is visible, the other one hidden. The hidden one is a form. Clicking on the eMail address then switches the view (disables the first div and enables the second), such that suddenly instead of the eMail address a text form field is there containing the eMail address. If you click on the "OK" button the button changes the look into a spinner until the data is submitted, then the view switches back to the normal one.
That's the usual way to do it using JavaScript and Ajax. And this involves a lot of programming until it works well.
Sorry for not shortening this post and missing code snippets, I am currently lacking time ;)
Hidden iframe.
Set target attribute of the form to the name of the iframe. use the onload event of the iframe to determine what is the response.
Or, if you really dont like any javascript, don't hide the iframe and instead present it in a creative manner.
CSS to hide an element
#myiframe { position:absolute; left: -999em; display: none; visibility: hidden; }
But normally, display: none is enough. This is just an overkill.

Categories