troubleshooting Question

Ajax is not reloading the content of DIVs

Avatar of Ashraf Hassanein
Ashraf Hassanein asked on
4 Comments1 Solution757 ViewsLast Modified:
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?

        <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>
 <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  id="status-block">
   <label id="logged-username">Username:</label>
   <span id="logged-username-value" class="username"  >
   <label id="logged-userIP">Client IP:</label>
   <span id="logged-userIP-value" class="userIP"  >
   <label id="logged-priviliges">Role:</label>
   <span id="logged-priviliges-value" class="priviliges"  >
   <label id="logged-sesssionDate">Logged On:</label>
   <span id="logged-sesssionDate-value" class="sesssionDate"  >
   <label id="logged-sesssionTime">Logged At:</label>
   <span id="-logged-sesssionTime-value" class="sesssionTime"  >
<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>
  <ul id="toolbar-menu" >
    <li><a href="#">Open...</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>

                 $(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() {
                $ {
                                              url: 'logout.php', 
                                              type: 'POST',
                                              data: {}, 
                                              success: function(response){

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


                $menu.hover(function() {
                }, function() {
                        if($(this).hasClass("overme")) {

                $ {
                $.post("check_session.php", {}, function(response){
                     var username= "ashraf";
                     var userIP= "";
                     var priviliges= "administrator";
                     var sesssionDate= "2013\/12\/31";
                     var sesssionTime= "13:30:01";
                     } else {
<div id="bottom"> 
 <div class="menu-frame" name="menu" id="menu">
 <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" />

                <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" />

		<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();" >
	<!-- End Page Content -->
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

    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){
                                             } else {

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros