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

Question

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>

score 1 · Answer 1 · edited May 23 '17 at 10:27

1

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?}

edited May 23 '17 at 10:27

Community

1
1

answered Jul 23 '15 at 08:22

Kristian Vitozev

5,791
6
36
56

there is no easy way to do it with jQuery? – Jul 23 '15 at 08:35
I like this option, but when you reload the page, visible only to the loaded file and nothing else. this can change? – Jul 23 '15 at 09:17
Well, you need to update your layout a bit. If `.adminPage` is content wrapper (incl. header, body, footer, etc.) it should works. – Kristian Vitozev Jul 23 '15 at 09:23
I can not just add a hase or ID? – Jul 23 '15 at 10:16
What's the code of `page1.php`? You can use `pastebin` to share it. – Kristian Vitozev Jul 23 '15 at 12:51

score 0 · Answer 2 · answered Jul 23 '15 at 08:36

0

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.

answered Jul 23 '15 at 08:36

Pupil

23,834
6
44
66

this sounds interesting, it is possible to implement with my script or do I do something else? – Jul 23 '15 at 08:40
Just add jquery plugin with ` – Pupil Jul 23 '15 at 08:41

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

2 Answers2