CODEWITHSUNDEEP
phpjqueryrefresh
user5146960
user5146960

Reputation:

jQuery loads external php file to a div but does not stay still after page refresh

When I click a link in my menu so I load a specific php page with content in a div named "adminPage" but does not stay still after page refresh?

jQuery(function(){
    jQuery('#page1').click(function(){
        jQuery('.adminPage').load('page1.php'
        );
    });

    jQuery('#page2').click(function(){
        jQuery('.adminPage').load('page2.php'
        );
    });
})


<ul class="menu-items">         
    <li class="link">
        <a href="javascript:void(0)" id="page1">
            <i class="fa fa-edit"></i> <span>Page 1</span>
        </a>
    </li>
    <li class="link">
        <a href="javascript:void(0)" id="pag2">
             <i class="fa fa-edit"></i> <span>Page 2</span>
        </a>
    </li>
</ul>

<div class="adminPage"></div>

Upvotes: 0

Views: 445

Answers (2)

Kristian Vitozev
Kristian Vitozev

Reputation: 5971

That's the idea of AJAX.

With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

Using HTML5 History API, you can push state into history.

Make sure that when you attempt to load http://example.com/page1.php, the page will be loaded.

Then, you can use something like this:

jQuery('#page1').click(function(){
    jQuery('.adminPage').load('page1.php', function() {
         var stateObj = { foo: "bar" };
         history.pushState(stateObj, "page 1", "page1.php");
    });
});

Using pushState, the history entry will be updated, but your browser will not make request to page1.php.

1) pushState: what exactly is the state object for?

Upvotes: 1

Pupil
Pupil

Reputation: 23958

You can do it with jQuery's hashchange plugin.

http://benalman.com/projects/jquery-hashchange-plugin/

The idea is onclick, just change the hash of the page.

And on hashchange event, load the content.

Even you refresh the page, get the hash and do the needful (loading of content etc...)

Gmail does it, for loading any page it changes hash.

And even after page refresh, the AJAX loaded content gets loaded.

Hence, your requirement gets fulfilled.

Upvotes: 0

Related Questions