asked on
Ajax is not reloading the content of DIVs
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?
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&icon_file=securimage/images/audio_icon.png&audio_file=securimage/securimage_play.php" width="20" height="20">
<param name="movie" value="securimage/securimage_play.swf?bgcol=#ffffff&icon_file=securimage/images/audio_icon.png&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>
AJAXjQueryJavaScript
Last Comment
Ashraf Hassanein
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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
Accepted answer: 0 points for AshrafHassanein's comment #a39748668
for the following reason:
This is the correct code
ASKER
I figure out what is the problem.
Open in new window
And
Open in new window
Finally I can enjoy the new year :-)