Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Ajax is not reloading the content of DIVs

Posted on 2013-12-31
4
Medium Priority
?
627 Views
Last Modified: 2013-12-31
I have a web page, with an input form and toolbar at the header section (Code below).
 I want upon pressing the login button the request is sent to a php login script for login credentials to be verified, if :
    1- Login is accepted the script returns back true, and the divs of the main page is reloaded with different contents.
    2- If login is not granted a failure alert is displayed and divs are not reloaded.
   
   In the same page in the header section there is a logout button where when you press it, it post a php script which destroys the session and send back true and based on this response the divs of the main page is reloaded with different content.
   
    I tested this on chrome, and IE11, and it is not working at all in chrome, and malfunctioning on IE11, can someone please guide me where is the the mistake?

<HTML>
<HEAD>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css">
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
</HEAD>
<BODY>
 <div class="header-frame" name="header" id="header">
   <div class="ribbon" id="ribbon">
<strong class="ribbon-content" id="ribbon-content"><img src="../images/logo.gif" alt="mysite" width="150" height="75"></strong>
</div>
<div  id="status-block">
   <label id="logged-username">Username:</label>
   <span id="logged-username-value" class="username"  >
   <br>
   <label id="logged-userIP">Client IP:</label>
   <span id="logged-userIP-value" class="userIP"  >
   <br>
   <label id="logged-priviliges">Role:</label>
   <span id="logged-priviliges-value" class="priviliges"  >
   <br>
   <label id="logged-sesssionDate">Logged On:</label>
   <span id="logged-sesssionDate-value" class="sesssionDate"  >
   <br>
   <label id="logged-sesssionTime">Logged At:</label>
   <span id="-logged-sesssionTime-value" class="sesssionTime"  >
   <br>
</div>
<div id="toolbar-block">
<div id="header-toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
  <ul id="toolbar-menu" >
    <li><a href="#">Open...</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

                <script>
                 $(function() {
                        var $logout = $("#logout").button({ text: false, icons: { primary: "ui-icon-key" } });
                        var $settings = $("#settings").button({ text: false, icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
                        var $menu = $("#settings").parent().next().show();

                $(document).click(function() {
                        $menu.hide();
                $settings.removeClass("active");
                });
                $logout.click(function() {
                                      $.ajax({
                                              url: 'logout.php', 
                                              type: 'POST',
                                              data: {}, 
                                              success: function(response){
                                             if(response=="true"){
                                               $(this).load("header.php");
                                               $("#menu").load("menu.php");
                                               $("#main").load("login.php");
                                               }
                                      }
                                      });

                        });
                $settings.click(function(evt) {
                        evt.stopImmediatePropagation();
                        $(this).toggleClass("active")
                        $menu.css("display", $(this).hasClass("active")?"block":"none");
                        $menu.position({ my: "left top", at: "left bottom", of: this });
                        });

                $settings.parent().buttonset().next().hide().menu();

                $menu.hover(function() {
                $(this).addClass("overme");
                }, function() {
                        if($(this).hasClass("overme")) {
                                $(this).hide();
                                $(this).removeClass("overme");
                                $settings.removeClass("active");
                                }
                        });

                $menu.click(function(evt) {
                        alert($(evt.target).text());
                        });
                });
                $.post("check_session.php", {}, function(response){
                    if(response=="true"){
                     var username= "ashraf";
                     var userIP= "81.68.69.22";
                     var priviliges= "administrator";
                     var sesssionDate= "2013\/12\/31";
                     var sesssionTime= "13:30:01";
                      $("#logged-username-value").html(username);
                      $("#logged-userIP-value").html(userIP);
                      $("#logged-priviliges-value").html(priviliges);
                      $("#logged-sesssionDate-value").html(sesssionDate);
                      $("#logged-sesssionTime-value").html(sesssionTime);
                      $("#status-block").show('show');
                      $("#toolbar-block").show('show');
                     $("#logged-username-value").html(response);
                     } else {
                      $("#status-block").hide();
                      $("#toolbar-block").hide();
                          }
                });
                </script>
</div>
<div id="bottom"> 
 <div class="menu-frame" name="menu" id="menu">
   menu
 </div>
 <div class="main-frame" name="main" id="main">
   	<div id="upper-login-window">
		
		<form autocomplete="off" name="loginForm" action="" method="POST">
		
		<label for="name" id="login-username">Username:</label>
		
		<input type="name" name="username" id="username-login" onclick="this.value=''" />
		
		<label for="username" id="login-password">Password:</label>
		
		<p><a id="forgetPassword" href="#">Forgot your password?</a>
		
		<input type="password" name="password" id="password-login" onclick="this.value=''" />

                <img id="siimage" style="border: 1px solid #000; margin-right: 15px" src="securimage/securimage_show.php?sid=8ddf10d308767798ac7839b0958eb7e9" alt="CAPTCHA Image" align="center" onclick="this.blur()" />

                <object type="application/x-shockwave-flash" data="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" width="20" height="20">
                <param name="movie" value="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" />
                </object>


                <a id="refresh-captcha" href="#" title="Refresh Image" onclick="document.getElementById('siimage').src = 'securimage/securimage_show.php?sid=' + Math.random(); this.blur(); return false"> 
	 
                <img src="images/refresh.png" alt="Reload Image" height="20" width="20" onclick="this.blur()" align="bottom" border="0" />
  
                </a>

		<input type="captcha" name="captcha_code" id="captcha_code" onclick="this.value=''" placeholder="Enter Code" />
	
		<div id="lower-login-window">
		
		<input type="checkbox" name="keepMe" id="keepMe" value="true" ><label class="check" for="checkbox" id="login-keepMe">Keep me logged in</label>
		
		<input type="submit" id="button-login" value="Login" onclick="javascript:loginaction();" >
		
		</div>
		
		</form>
		
	</div>
	
	<!-- End Page Content -->
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $.noConflict();

    function reloadCaptcha()
    {
        jQuery('#siimage').src = 'securimage/securimage_show.php?sid=' + Math.random();
    }
    function loginaction() {
              $.post("check_login.php", {
                                          username: $('#username-login').val(),
				          password: $('#password-login').val(),
            				  captcha_code: $('#captcha_code').val(),
            				  keepMe: $('#keepMe').val(),
          				  }, function(response){
                                             if(response=="true"){
                                               $("#header").load("header.php");
                                               $("#menu").load("menu.php");
                                               $("#main").load("content.php");
                                             } else {
                                             alert(response); 
                                             }
           							});
    }
    
</script>
 </div>
 </div>
</BODY>
</HTML>

Open in new window

0
Comment
Question by:Ashraf Hassanein
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 35

Accepted Solution

by:
gr8gonzo earned 2000 total points
ID: 39748314
1. I would suggest using console.log (better with Firebug) to see the data coming back so you can be sure that it's coming back with the expected response and there are no other errors. I use Firebug all the time for Javascript debugging - makes life a lot easier!

2. Saying it's "not working" or "malfunctioning" doesn't give much information. Can you describe what IS happening?
0
 

Author Comment

by:Ashraf Hassanein
ID: 39748668
What a new year eve, I spent out the entire evening to figure out what is the problem, and I finally found that my submit function was totally wrong, I fixed it to the following  code:

 <input type="submit" id="button-login" value="Login"> 

Open in new window



And

      $(function () {
        $('#loginForm').on('submit', function (e) {
          $.ajax({
            type: 'post',
            url: 'check_login.php',
            data: $('#loginForm').serialize(),
            success: function (response) {
               if(response=="true"){
                   $("#main").load("content.php");
                   $("#menu").load("menu.php");
                   $("#header").load("header.php");
               } else {
                   alert(response);
                   $("#main").load("login.php");
               }
            }
          });
          e.preventDefault();
        });
      });

Open in new window



Finally I can enjoy the new year :-)
0
 

Author Comment

by:Ashraf Hassanein
ID: 39749489
I've requested that this question be closed as follows:

Accepted answer: 0 points for AshrafHassanein's comment #a39748668

for the following reason:

This is the correct code
0
 

Author Comment

by:Ashraf Hassanein
ID: 39749486
I figure out what is the problem.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

609 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