load contents without reloading the page

Question

I am using the following code, for loading contents without loading the page !

index.html

<html>

    <head>
        <script type="text/javascript">
            // <![CDATA[
            document.observe('dom:loaded', function () {
                    var newsCat = document.getElementsByClassName('newsCat');
                    for(var i = 0; i < newsCat.length; i++) {
                        $(newsCat[i].id).onclick = function () {
                            getCatPage(this.id);
                        }
                    }
                });

            function getCatPage(id) {
                var url = 'load-content.php';
                var rand = Math.random(9999);
                var pars = 'id=' + id + '&rand=' + rand;
                var myAjax = new Ajax.Request(url, {
                        method: 'get',
                        parameters: pars,
                        onLoading: showLoad,
                        onComplete: showResponse
                    });
            }

            function showLoad() {
                $('newsContent').style.display = 'none';
                $('newsLoading').style.display = 'block';
            }

            function showResponse(originalRequest) {
                var newData = originalRequest.responseText;
                $('newsLoading').style.display = 'none';
                $('newsContent').style.display = 'block';
                $('newsContent').innerHTML = newData;
            }
             // ]]>
        </script>
    </head>

    <body>
        <div class="newsCat" id="newsCat1">Politics</div>
        <div class="newsCat" id="newsCat2">Sports</div>
        <div class="newsCat" id="newsCat3">Lifestyle</div>
        <div id="newsLoading">Loading
            <img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" />
        </div>
        <div id="newsContent"></div>
        </div>
    </body>

</html>

this page is for including the desired page in the index.php !

content-load.php

<?php

function stringForJavascript($in_string) {
$str = preg_replace("# [\r\n] #", " \\n\\\n", $in_string);
$str = preg_replace('#"#', '\\"', $str);
return $str;

$user = $_SESSION['userName'];

}
switch($_GET['id']) {
    case 'newsCat1':
    $content = include("politics.php");
    break;
case 'newsCat2':
    $content = include("sports.php");
    break;
case 'newsCat3':
    $content = include("lifestyle.php");
    break;
default:
    $content = 'There was an error.';

} 
print stringForJavascript($content);
usleep(600000);
?>

PROBLEM FACING

it works fine, but when i am refreshing the page or submitting a form, the code refreshes, i mean the page which was include before refreshing, doesnot exists......

and i am really sorry about my ENGLISH, i know its horrible ! :)

pls help me php masters, i need ur help...

Answer 1

There are two ways to slove that problem.

You could do that on the client site with an hashtag what is curriently loaded and rebuild the page with that data or:
use the pushState API to manipulate the shown url in the address bar. Then you need to return the right data from the server after a reload.

Answer 2

This is behaviour by design. The Reload button will really reload the page - this includes resetting the page state.

In a freshly loaded page, you do not display a category - this is triggered only by user interaction after the page has finished loading.

A common workaraound is to store the chosen category in a cookie, auto-trigger the category load after the page has initialized.

load contents without reloading the page

Question

2 answers

solution1
1 2013-05-31 05:00:42

solution2
0 ACCPTED 2013-05-31 05:00:01

load contents without reloading the page

Question

2 answers

solution1 1 2013-05-31 05:00:42

solution2 0 ACCPTED 2013-05-31 05:00:01

solution1
1 2013-05-31 05:00:42

solution2
0 ACCPTED 2013-05-31 05:00:01