Develop Reference

Reloading a page using jQuery while retaining some data

Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets.
Basically i have a bunch of ajax requests, variables and content that i want wiped when a user clicks 'new' (currently i'm using just using location.reload(); ) but want a more graceful way of doing it.
I'm really wanting to refresh it without the screen going white for a split second and also want to retain a single modal popup i have which is open when the user clicks 'new'.
So the user clicks the 'new' button, a popup appears taking a parameter, the site refreshes and the parameter is passed to an Ajax request kicking off the start process.
If anyone could point me in the direction of what to even look for it'd be much appreciated.

"Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets."
You can't refresh the website without making it look like it refreshed, the browser needs time to display the content.
You can, however, use jQuery .load to load some standard markup into your site to make it appear as it did when it was initialized, the browser won't refresh, just like making an AJAX call doesn't require the website to refresh.
I'm, however, unable to see why you want the website to refresh if only to make an AJAX call.

The simple answer is to have the content you want to reload inside a container i.e.:
<div id="container"> page content </div>
Then when you have successfully got new data from the ajax call you can empty the container with:
$("#container").empty();
and repopulate it with
$("#container").append(newcontent);

You can use jQuery's .load to request and replace a portion of your page, e.g. a container element.
For example, calling the following on index.html would effectively "reset" the #container element:
$("#container").load("index.html #container");
See "Loading Page Fragments" on the docs for $.load.
As for resetting variables and cancelling any pending ajax requests - you could perhaps write a reset() function to do all that for you.

Another possibility would be to put data in local storage, or in the url after a # before the reload. But your options for having it look like it isn't refreshing are pretty limited outside of jQuery .load or an XHR request (which is what the jQuery load does)

How to dynamically load external page content

How and what would be the best way to go about dynamically loading page content? (load new content without whole page reload / refresh using div container )
I have a gallery page and want to load only the new gallery content from other pages I will be making in the future. I will be using the pagination bar to load the content. Preferably without hashtags in address bar. I'd appreciate any help. Thanks.
Here is the gallery page I'm working on.
http://www.hlipublishing.com/nmg/index.html
Below are examples of what I'm looking for and caught my attention.
http://www.unheap.com/
Rethinking Dynamic Page Replacing Content and Doc Template from CSS-Tricks.

Try using ajax:
$.ajax({
url: url,
data: prameters,
dataType: "html",
type: "post"
success: function(result){
//append your dynamic image here
$("#gallery").html(result);
}
});
On the success part, the result should return the html for your images. Then you're free to append it anywhere on your page. This whole process won't reload your page or add hashtags to your URL(unless you used an <a> tag as trigger to your ajax)

$.ajax() is your answer. Basically, what you want to do is:
Write a script that will return JUST the inner data (what goes inside section.portolfio) for one page. Ideally, you can use a function to check if the call is from AJAX, and return only the inner data for ajax, or the full page for normal requests.
Write a .click function for your pager that will grab the page # you want to view (from a rel tag, href tag, pretty much anything)
Within the .click function call $.ajax() with the url for your script, the data for the page, and a success function to handle the return (which should accept the returned data in the format you specify. I would guess 'html'. This function should clear out the current content and refill the section with the new content.
As an aside, one problem with your current filtering system is that you only filter the content from the page you're on, meaning you can end up with less than a full page of results even when there are more results. If you expand your function to also accept filter parameters, you can pass both the filter and page in the AJAX request to achieve a nicer user experience.

Refresh a table without refreshing entire page to show updated data

I wish to show newly added data to a listing page, which listed on the same page. My problem is that after adding data to my database I needed to reload entire page to see the new data. How can I view without reloading entire page?

If you only want to refresh the table, you can use this jQuery plugin: http://datatables.net
You can call table refresh functions whenever you want. The plugin works using AJAX. To work with you need to have little javascript knowledge as well.
You can find sort of example/demo from here.
http://editor.datatables.net/tutorials/api_manipulation
However if you really want to do this get the concept and you also can develop same thing. You just require to learn some AJAX.

in Button click after data saved to database you need to use following script. no need to go round trips to server to client instead manipulate client side.
$("#btnSubmit").click(function () {
$('#myForm').ajaxForm({
success: function(){
$('#myTable tr:first').after('<tr><td>' + $("#Name").val() + '</td></tr>');
}
});
});

reload div without reloading page using javascript

I am currently just working on simple and final UI changes for a website I am working on and was wondering if someone could help me figure something out.
I have a page that has three divs on it and I was wondering how I could use javascript to reload the content of these divs without reloading the page when someone clicked on a certain link?
Thanks!

Use AJAX. Watch here
Or as suggested in other answers - use a framework or a library like jQuery which makes element selection and AJAX as easy as possible

in case you need to go to the server to get the content: read about AJAX. there is a good jQuery framework making ajax calls very easy.
if you don't need to go to the server just select the element you need and change his innerHTML value. again - you can select elements via jQuery in a more easy way.

To reload this div you can use ajax call.
With your ajax call, your get your data, without reloading the page, and then replace your div content with the new data.
something like that
$.ajax({
type : 'get',
url : 'urltogetdata',
success : function(data){
$('#yourdiv').html(data);
}
});
this code is jquery code, but it work with other lib

AJAX - Reload a part of a webpage without the use of a separate file to load

Title might be a bit confusing, so let me explain.
I have a website that has a side-panel, which contains information about the user, things the user can do, etc. When the user is not logged in, this side-panel becomes the area for logging in or registration.
The code for this is:
<?php
if($user->loggedIn)
{
?>
<!-- side-panel for logged in users here -->
<?php
}
else
{
?>
<!-- login/registration etc -->
<?php
}
?>
What I want to do is load this snippet of code again when the user clicks login with AJAX, and use a jQuery effect (probably fade) that smoothly makes the side-panel transition from login/registration to the shiny users-only panel.
I know I could do this if I put that code in another file, and loaded it through AJAX into the div for the side-panel... but I would rather not make a separate file for the side-panel only. Is this possible?

You could load the page with an AJAX request and then strip out the data other than the side panel, but what would be the point? Your best option would be to simply separate the side panel into its own file.
Oh, and that would also be considered the proper way of doing it, so you can edit the sidebar without editing the pages it occurs on.

If i understand corectly what you neey, you may try this way:
$.ajax({
type: "GET",
url: "url", // replace 'url' with your url
cache: false,
success: function(data){
alert($(data).find('#sidebar').html());
}
});
Maybe will work with $.load() or $.get(), dunno.

Why are you opposed to keeping the side panel in its own file? Keeps things more modular and organized.
If you really are opposed to keeping the content in a file, you could put the content in a database and query for it when ever the AJAX call is made.

Could you pass a query string parameter to the page and then based on that only do a partial render(sidebar only) of the page?
Then just use your normal jquery/ajax method and include the query string paramater.
$.ajax(function(){
url: MyPage.php?sidebar_only=true
ect...
})

Assuming that you will be getting the actual user data through another call, you could use two divs. The div containing the html for the user panel starts hidden. When you get a successful login, hide the login div and show the user panel div. Using the data from the AJAX login, fill in the panel custom info. I assume the AJAX login call will return the necessary info to fill in the user name and what they can do. This just makes it so you don't have to pull in the html for the whole user panel.