Search jQuery

jQuery Forum

bjoern.ka..

Correct usage for navbar (page refresh?)

in jQuery Mobile • 8 years ago

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

<?php
// ob_start();
include_once('services/session.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page" data-role="page">
<div id="header" data-role="header">
<h1>
Fahrtenliste
</h1>
</div>
<div id="content" data-role="content">
<p>
This is index
<?php
echo $_SESSION['user_email']." <-> ";
if(!isset($_SESSION['user_email']))
{
echo "Die session hatja nix";
}
?>
</p>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="login.php" data-icon="grid">List rides</a></li>
<li><a href="login.php#add_ride" data-icon="plus" data-rel="dialog">Add ride</a></li>
<li><a href="login.php#list_users" data-icon="grid">List users</a></li>
<li><a href="login.php#add_user" data-icon="plus">Add user</a></li>
</ul>
</div>
</div>
</div>
<div id="add_ride" data-role="dialog">
<div id="header" data-role="header">
<h1>
Add ride
</h1>
</div>
<div id="content" data-role="content">
<div id="rideForm">
<label for="fahrtUserName">Ride creator <?php echo $_SESSION['user_email']; ?></label>
<div id="fahrtUserName" data-role="field_contain">
<input type="text" name="fahrt_username" value="<?php
echo $_SESSION['user_email']." <-> ";
if(!isset($_SESSION['user_email']))
{
echo "Die session hatja nix";
}
?>" readonly="readonly" id="fahrt_username" />
</div>
</div>
</div>
</div>
<div id="list_users" data-role="page">
<div id="header" data-role="header">
<h1>
List users
</h1>
</div>
<div id="content" data-role="content">
<p>
List users
</p>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="login.php" data-icon="grid">List rides</a></li>
<li><a href="login.php#add_ride" data-icon="plus">Add ride</a></li>
<li><a href="login.php#list_users" data-icon="grid">List users</a></li>
<li><a href="login.php#add_user" data-icon="plus">Add user</a></li>
</ul>
</div>
</div>
</div>
<div id="add_user" data-role="page">
<div id="header" data-role="header">
<h1>
Add user
</h1>
</div>
<div id="content" data-role="content">
<p>
Add user
</p>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="login.php" data-icon="grid">List rides</a></li>
<li><a href="login.php#add_ride" data-icon="plus">Add ride</a></li>
<li><a href="login.php#list_users" data-icon="grid">List users</a></li>
<li><a href="login.php#add_user" data-icon="plus">Add user</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Replies(1)

watusiware

Re: Correct usage for navbar (page refresh?)

8 years ago

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

No, you have four pages. One of them is a dialog, which is just a special kind of page. You haves no popups. If you want a popup, use a popup.

You should stop using Dialog, in any case, since it is deprecated and will be removed in JQM 1.5:

http://demos.jquerymobile.com/1.4.5/pages-dialog/

http://demos.jquerymobile.com/1.4.5/popup/

Content divs are irrelevant, they are just an optional part of a page.

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.

Which is it? Highlighted or not highlighted?

The navbar does not keep track of your pages for you. It's just a bunch of buttons. They highlight when you press them. They should not be highlighted when you are not pressing them. If you want one button highlighted to indicated which page the user is on, you have to do that yourself. You can add class ui-btn-active .

Top Reply

Response title

Attachments

jQuery Forum

Correct usage for navbar (page refresh?)

Replies(1)

Re: Correct usage for navbar (page refresh?)

Statistics

Tags

Actions