0

This is the code for index.php, with 3 divs:

<body>
    <div class="div_header" id="div_header">
    </div>
    <div class="div_left" id="div_left">
        <ul>
          <li>Patienten
            <ul>
              <li><a href="#" id="patienten_anlegen">Patienten anlegen</a></li>
              <li><a href="#" id="patienten_bearbeiten">Patienten bearbeiten</a></li>
              <li><a href="#" id="patienten_loeschen">Patienten loeschen</a></li>
            </ul>
          </li>
          <li>Termine
            <ul>
              <li>Termine anlegen</li>
              <li>Termine bearbeiten</li>
              <li>Termine löschen</li>
            </ul>
        </ul>
    </div>
    <div class="div_main" id="div_main">
    </div>
    <div class="div_right" id="div_right">
    </div>
</body>

And menue.js:

$(document).ready(function(){
    $("#patienten_anlegen").click(function(){
        $("#div_main").load("templates/patienten/patienten_anlegen.php");
    });
    $("#patienten_bearbeiten").click(function(){
        $("#div_main").load("templates/patienten/patienten_bearbeiten.php");
    });
    $("#patienten_loeschen").click(function(){
        $("#div_main").load("templates/patienten/patienten_loeschen.php");
    });
});

If I click on the "Patienten anlegen" I want to change the content of the "div_main". This works, but I want, if I press F5 (reload) to be on the same site, not at the index.php, and I don't want to see the "#" in the address bar at the browser (like: localhost/patientenverwaltung/#)

Sorry for my English, I hope you understand what I want ;)

display-name-is-missing
  • 4,424
  • 5
  • 28
  • 41
user3140252
  • 101
  • 9
  • If you are clear with the concept of `asynchronous`, you will realize why that happens when you hit `F5`. Also, this has got nothing to do with `PHP` – asprin Feb 09 '14 at 14:56
  • So you want, when reloading the page, still have the content loaded before reloading, am I right? – Madnx Feb 09 '14 at 14:59
  • yes, i want to be on the same site, before I press F5! – user3140252 Feb 09 '14 at 15:02
  • In patienten_anlegen.php set a session variable let's $_SESSION['page']=1; then in index.php test if session page = 1 – CodeBird Feb 09 '14 at 15:03

7 Answers7

2

you could use hashed navigation with ajax, so next time you click reload/back/next buttons, the navigation would work as expected. the property you need to lookup is: location.hash

suppose you changed your html like this:

          <li><a href="#anlegen" id="patienten_anlegen">Patienten anlegen</a></li>
          <li><a href="#bearbeiten" id="patienten_bearbeiten">Patienten bearbeiten</a></li>
          <li><a href="#loeshen" id="patienten_loeschen">Patienten loeschen</a></li>

and in javascript:

$(document).ready(function(){
    if(location.hash.substring(1))
    {
    var initialPageToLoad= "patienten_" + location.hash.substring(1);
    $("#div_main").load("templates/patienten/" + initialPageToLoad);
    }
});

this will ensure loading the last content as soon as the document is ready.

Volkan Ulukut
  • 4,230
  • 1
  • 20
  • 38
0

I guess you want to maintain the state of your site. If this is the case then you can so that with cookies.

i.e. on click of each div change the value of cookie and on load check it and trigger the click of respective div.

Snehal S
  • 865
  • 4
  • 13
0

Hitting f5 will reload the page and you will reset any page data loaded in during use of the application.

The hash in the url is because you have <a href="#"></a>

To prevent this , in your click handler add -

$("#patienten_loeschen").click(function(e){
   e.preventDefault();
...

As the link is a javascript 'link' - and if you are concerned about accessibility and search index crawlers, use another element instead of the anchor tag 

<div id="patienten_loeschen"> ...

and with css you can make this 'feel' like a link.

#patienten_loeschen { cursor:pointer; text-decoration:underline; }
Rob Sedgwick
  • 5,216
  • 4
  • 20
  • 36
0

If you simply want to get rid of "#", you can specify in HTML:

<li><a href="javascript:void(0);" id="patienten_anlegen">Patienten anlegen</a></li>

Wayne Ye
  • 2,464
  • 3
  • 25
  • 29
0

First, about the # in the url: you must remove the href="#" from the tag. But this will also remove the link cursor when you hover over it. To fix that, add a class to each element (such as "link") and add some css to fix it up.

<li><a class="link" id="patienten_anlegen">Patienten anlegen</a></li>
<li><a class="link" id="patienten_bearbeiten">Patienten bearbeiten</a></li>
<li><a class="link" id="patienten_loeschen">Patienten loeschen</a></li>

css:

.link {
    cursor: pointer;
}

Next, to preserve the original state you have two options: store it in local storage (HTML5 only) or add a query string when you click each link so that your URL has '?previousview=anlegen' or similar.

Since you wanted to get rid of the # in the url I will go through the local storage method.

$('.link').on('click', function (e) {
    sessionStorage.setItem("previousView", this.id);
});

and then to reload the view

if (sessionStorage.getItem("previousView")) {
    $("div-main").load("templates/patienten/"+sessionStorage.getItem("previousView")+".php");
}
cbreezier
  • 1,188
  • 1
  • 9
  • 17
0

If you are asking to retain data on reload.

If you want it that way, you must query data from your database upon loading your page. Ex.

    <html>
    <body>
    <?php
you must query here, the data you want to display, 
if (no data yet) then
 do some codes here
else display the data
end if
?>

Then you can perform the ajax here.
    </body>
    </html>
Ulysses
  • 187
  • 2
  • 17
0

You want to make ajax navigation in your website;

for that you should change the div's content and then some part of url of your website. for that many ajax navigation schemes are available one or popular is hash based navigation. take a look at,

REFERENCE

Community
  • 1
  • 1
Bhavesh G
  • 3,000
  • 4
  • 39
  • 66