Solved

jquery login page - need to load new nagivation

Posted on 2008-06-16
6
2,469 Views
Last Modified: 2010-04-21
I'm using php and jquery for a login page - this works well.  However, after I check to see if the user has entered a correct userid and password, I want to replace my current navigation with a new one (with extra items).  Below is the code - everything works until the part where I load a new nagivation panel into my left column.  Can anyone see where I have messed up?  And is this the easiest/best way to accomplish what I am trying to do (give logged in users extra choices?).  


$("#login_form").submit(function()

	{	$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);

		//check the username exists or not from ajax

		$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)

        {

		  if (jQuery.trim(data) =='yes') //if correct login detail

		  {

		  	$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox

			{ 

			 //add message and change the class of the box and start fading

			$(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,				

			function()

			{ 

			  	$("#leftcolumn").load('secure-index.php'); 	// this does not work - 		   

			}); // end function

			.......
 

Here is secure-index.php:
 

	<div class="innertube"></div>

	<div class="arrowlistmenu">

	<h3 class="menuheader expandable">Parents and Fans</h3>

	<ul class="categoryitems">

		<li><a id="imp-dates" href="#">Important Dates</a></li>

		<li><a id="btn-slide" href="#">Game Schedules</a></li>

         .....

	</ul>
 

	
 

	<h3 class="menuheader expandable">Football Program</h3>

	<ul class="categoryitems">

		<li><a id="field-nav" href="#">Purchase an Ad</a></li>

		<li><a id="field-nav" href="#">Purchase a Player Ad</a></li>

	</ul>
 

		<h3 class="menuheader expandable">Admin</h3>

	<ul class="categoryitems">

		<li><a id="admin_one" href="#">Admin One</a></li>

		<li><a id="update_news" href="#">Update News</a></li>

	</ul>

	</div> <!-- end arrowlistmenu -->

Open in new window

0
Comment
Question by:kathys39
  • 3
  • 3
6 Comments
 
LVL 14

Expert Comment

by:Tchuki
ID: 21799303
Have you closed off all the braces correctly or have you just excluded them from the code example for speed?

As for is this the best method, I think that is a matter of opinion.  Mine would be to say no.

The way I do it (and a few other mainstream apps) is to have a single file with all my menu items in it.  When a user views a page my PHP determines if the user is authenticated and if so displays the additional items, if not they are ignored:
<ul>

<li>item 1</li>

<li>item 2</li>

<?PHP

// if user is authenticated and only if

if ( isset ( $_SESSION['authed'] ) )

{

?>

<li>Admin</li>

<?PHP

}

?>

</ul>

Open in new window

0
 

Author Comment

by:kathys39
ID: 21837510
I haven't closed off braces just to save space.

Your solution makes much more sense.  However, I have a question.  My navigation is in a div called "leftcolumn".    When the user logs in successfully I want other options to appear in the navigation div ("leftcolumn".  this is what I have when the user is successful:

        $(this).html('Logging in.....').addClass('messagebook').fadeTo(900,1,                        
      function()
      {
      $("#leftcolumn").load('secure.php');

This is secure.php:

How do I get it to reload my index.php page, which inside it has your code:

            <?php
            // if user is authenticated and only if
            if ( isset ( $_SESSION['u_name'] ) )
            {
                  ?>
                  <li><a id="add_news" href="#">Add News</a></li>
                  <li><a id="admin_three" href="#">View Player Data</a></li>
                  <?php
            }
            ?>

<?php session_start();

// if session is not set redirect the user

if(empty($_SESSION['u_name']))

	header("Location:index.php");	
 

//if logout then destroy the session and redirect the user

if(isset($_GET['logout']))

{

	session_destroy();

	header("Location:index.php");

}	
 

echo "<a href='secure.php?logout'><b>Logout<b></a>";

echo "<div align='center'>You Are inside secured Page</a>";
 

?>

Open in new window

0
 
LVL 14

Expert Comment

by:Tchuki
ID: 21837689
Rather than having a function to load the new list items when the user logs in, have the left col already loaded but only showing the "non admin" list items.  When they do log in, you login script redirects the users back to your index page where the session test script returns true and displays all list items.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:kathys39
ID: 21840934
That is what I tried originally and I cannot get the new/admin items to load.  

Here is what I have in my login.html file (see below).

In the ajax_login.php file, if the userid and passwd are ok I set this:
    $_SESSION['u_name']=$user_name;

Now in my index.php file I check to see if this is set correctly (it is as I've echo'd it out), and if so I display the new items.  Problem is the new items don't display!!

       <?php
      $session_name = $_GET["session"];
      writeLog ("session name is ");
      writeLog ($session_name);
      ?>
.....
    if ( isset ( $session_name) )
            {
                  writeLog("adding extras");
                  ?>
                  <li><a id="add_news" href="#">Add News</a></li>
                  <li><a id="admin_three" href="#">View Player Data</a></li>
                  <?php
            }
            ?>      


I can't figure out if the problem is the jquery accordian menu....
login.html file:
 

$().ready(function() {

	$("#login_form").submit(function()

	{

		//remove all the class add the messagebox classes and start fading

		$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);

		//check the username exists or not from ajax

		$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)

        {

		  if (jQuery.trim(data) =='yes') //if correct login detail

		  {

		  	$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox

			{ 

			 //add message and change the class of the box and start fading

			$(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,				

			function()

			{ 

			$(this).text('loading...');

			// sessions stuff

	 		$(this).text('loading...');

			document.location='index.php?'; 

Open in new window

0
 
LVL 14

Accepted Solution

by:
Tchuki earned 125 total points
ID: 21842105
I've never used jquery I'm afraid so can't comment on the code.

Why not just do something like:
<?PHP
 

// login.php

session_start();
 

if ( $_POST )

{

	$user = $_POST['username'];

	$pass = $_POST['password'];

	

	$sql = mysql_query ( "SELECT * FROM users WHERE username = '$user' AND password = '$pass'" );

	

	if ( mysql_num_rows ( $sql ) === 1 )

	{

		$_SESSION['u_name'] = $user;

		header ( "Location: index.php" );

	}

}
 

?>
 

<?PHP
 

// index.php

session_start();

?>
 

<ul>

	<li>List Item 1</li>

    <li>List Item 2</li>

    <li>List Item 3</li>

    <?PHP

	if ( isset ( $_SESSION['u_name'] ) )

	{

	?>

    <li>Admin List Item 1</li>

    <li>Admin List Item 1</li>

    <?PHP

	}

	?>

</ul>

Open in new window

0
 

Author Closing Comment

by:kathys39
ID: 31467706
sounds good to me - I'll use jquery elsewhere. thanks for the help.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
what is best version of php to use 6 44
html input type 3 21
Having problem getting this to work 2 18
two layers of simple javascript validation 2 21
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now