Correct usage for navbar (page refresh?)

Correct usage for navbar (page refresh?)

Hello!

I made a PHP Application according to a tutorial.

As you can see in the code below, have a page, dialog and two content DIVs.

I noticed, that the navbar is highlighted when not doing a navigation with a link target. From now it looks like that the page refreshes every time i press a button and the button itself looses the focus after clicking an navigation link.

When i open a popup (like in the code below) it is like i open a complete new page. Is it possible to show popups without loading a new page?

Am i using it correctly?

With best regards,
Bjoern

  1. <?php
  2.     // ob_start();
  3.     include_once('services/session.php');
  4. ?>
  5. <!DOCTYPE html>
  6. <html lang="en">
  7.     <head>
  8.         <meta charset="utf-8">
  9.         <!-- Ohne den viewort ist es wie ne Desktopanwendung -->
  10.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  11.         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  12.         <link rel="stylesheet" href="css/custom.css" />
  13.         <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  14.         <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  15.     </head>   
  16.     <body>
  17.         <div id="page" data-role="page">
  18.             <div id="header" data-role="header">
  19.                 <h1>
  20.                     Fahrtenliste
  21.                 </h1>
  22.             </div>
  23.             <div id="content" data-role="content">
  24.                 <p>
  25.                     This is index
  26.                    
  27.                     <?php
  28.                                 echo $_SESSION['user_email']." <-> ";
  29.                                 if(!isset($_SESSION['user_email']))
  30.                                 {
  31.                                     echo "Die session hatja nix";
  32.                                 }
  33.                         ?>
  34.                 </p>
  35.             </div>
  36.             <div id="footer" data-role="footer" data-position="fixed">
  37.                 <div data-role="navbar">
  38.                     <ul>
  39.                         <li><a href="login.php" data-icon="grid">List rides</a></li>
  40.                         <li><a href="login.php#add_ride" data-icon="plus" data-rel="dialog">Add ride</a></li>
  41.                         <li><a href="login.php#list_users" data-icon="grid">List users</a></li>
  42.                         <li><a href="login.php#add_user" data-icon="plus">Add user</a></li>                       
  43.                     </ul>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.        
  48.         <div id="add_ride" data-role="dialog">
  49.             <div id="header" data-role="header">
  50.                 <h1>
  51.                     Add ride
  52.                 </h1>
  53.             </div>
  54.             <div id="content" data-role="content">
  55.                 <div id="rideForm">
  56.                     <label for="fahrtUserName">Ride creator <?php echo $_SESSION['user_email']; ?></label>
  57.                     <div id="fahrtUserName" data-role="field_contain">
  58.                         <input type="text" name="fahrt_username" value="<?php
  59.                                 echo $_SESSION['user_email']." <-> ";
  60.                                 if(!isset($_SESSION['user_email']))
  61.                                 {
  62.                                     echo "Die session hatja nix";
  63.                                 }
  64.                         ?>" readonly="readonly" id="fahrt_username" />
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.         </div>   
  69.        
  70.         <div id="list_users" data-role="page">
  71.             <div id="header" data-role="header">
  72.                 <h1>
  73.                     List users
  74.                 </h1>
  75.             </div>
  76.             <div id="content" data-role="content">
  77.                 <p>
  78.                     List users
  79.                 </p>
  80.             </div>
  81.             <div id="footer" data-role="footer" data-position="fixed">
  82.                 <div data-role="navbar">
  83.                     <ul>
  84.                         <li><a href="login.php" data-icon="grid">List rides</a></li>
  85.                         <li><a href="login.php#add_ride" data-icon="plus">Add ride</a></li>
  86.                         <li><a href="login.php#list_users" data-icon="grid">List users</a></li>
  87.                         <li><a href="login.php#add_user" data-icon="plus">Add user</a></li>   
  88.                     </ul>
  89.                 </div>
  90.             </div>
  91.         </div>   
  92.        
  93.         <div id="add_user" data-role="page">
  94.             <div id="header" data-role="header">
  95.                 <h1>
  96.                     Add user
  97.                 </h1>
  98.             </div>
  99.             <div id="content" data-role="content">
  100.                 <p>
  101.                     Add user
  102.                 </p>
  103.             </div>
  104.             <div id="footer" data-role="footer" data-position="fixed">
  105.                 <div data-role="navbar">
  106.                     <ul>
  107.                         <li><a href="login.php" data-icon="grid">List rides</a></li>
  108.                         <li><a href="login.php#add_ride" data-icon="plus">Add ride</a></li>
  109.                         <li><a href="login.php#list_users" data-icon="grid">List users</a></li>
  110.                         <li><a href="login.php#add_user" data-icon="plus">Add user</a></li>   
  111.                     </ul>
  112.                 </div>
  113.             </div>
  114.         </div>           
  115.        
  116.     </body>
  117. </html>