ใช้ ajax ทำ code ได้แล้ว แต่ click link ได้แค่ครั้งเดียว
สวัสดีครับ
ผมใช้ ajax ลองทำ link ในส่วน login กับ logout member แต่ปัญหาคือ click link ได้ครั้งแรกแค่ครั้งเดียว click อีกครั้งจะไม่ทำงาน
เช่น
click login ได้แล้ว => โชว์ member
click logout ได้แล้ว => กลับมาโชว์ login member
click login อีกครั้ง ไม่ทำงาน เป็นทั้ง Mozilla และ IE(6.0.2)
ไม่ทราบว่าต้องแก้ปัญหายังไงครับ
ขอบคุณครับ
ผมใช้ ajax ลองทำ link ในส่วน login กับ logout member แต่ปัญหาคือ click link ได้ครั้งแรกแค่ครั้งเดียว click อีกครั้งจะไม่ทำงาน
เช่น
click login ได้แล้ว => โชว์ member
click logout ได้แล้ว => กลับมาโชว์ login member
click login อีกครั้ง ไม่ทำงาน เป็นทั้ง Mozilla และ IE(6.0.2)
ไม่ทราบว่าต้องแก้ปัญหายังไงครับ
ขอบคุณครับ
ว่าแต่ ยังมี ie6 อยู่อีกเหรอ
======
Javascript
======
var HttPRequest = false;
function doCallAjax() {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
}
function memberlogin(action) {
if (action == 'login')
{
var url = '../content/include/memberlogin.php';
var pmeters = 'txt_username='+document.getElementById("txt_username").value+'&txt_password='+document.getElementById("txt_password").value;
HttPRequest.open('POST',url);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
}
if (action == 'logout')
{
var url = '../content/include/memberlogin.php';
var pmeters = 'member_user='+document.getElementById("member_user").value;
HttPRequest.open('POST',url);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
}
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("member").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById("member").innerHTML = HttPRequest.responseText;
}
}
}
=======
memberlogin.php
=======
<?
session_start();
/*
echo "user = " . $_POST["txt_username"] . "<br />";
echo "pass = " . $_POST["txt_password"] . "<br />";
*/
include("../include/connect_db.php");
if ($_POST["txt_username"] != '' and $_POST["txt_password"] != '')
{
$strSQL = "SELECT * ";
$strSQL .= "FROM member ";
$strSQL .= "Where username='" . $_POST["txt_username"] . "' and password='" . $_POST["txt_password"] . "'";
$db_query = mysql_query($strSQL) or die ("Error = [$strSQL] <b>" . mysql_error() . "</b>");
$db_result = mysql_fetch_array($db_query);
if ($db_result)
{
$_SESSION["member_user"] = $db_result['username'];
$_SESSION["member_firstname"] = $db_result['firstname'];
$_SESSION["member_lastname"] = $db_result['lastname'];
?>
<div style="padding: 4px 0px 0px 18px;float:left"><img src="images/member.png" alt="Member"></div>
<div style="padding: 7px 0px 0px 5px;float:left" class="txt1" style="font-weight:normal;">สวัสดี คุณ<?=$_SESSION["member_firstname"] . '  ' . $_SESSION["member_lastname"]?></div>
<div style="padding: 7px 0px 0px 12px;float:left" class="txt1">ล็อคอินครั้งสุดท้าย <?=$_SESSION["lastlogin"]?></div>
<div style="padding: 7px 0px 0px 14px;float:left"><a href="#" title="Profile" class="link1">Profile</a></div>
<div style="padding: 7px 0px 0px 24px;float:left"><a href="#" title="Logout" class="link1" onClick="JavaScript:memberlogin('logout');">Logout</a></div>
<div><input type="hidden" value="<?=$_SESSION['member_user']?>" id="member_user"></div>
<?
}
}
else
{
session_unset();
session_destroy();
mysql_close($db_connect);
?>
<div style="padding: 4px 0px 0px 18px;float:left"><img src="images/member.png" alt="Member"></div>
<div style="padding: 7px 0px 0px 5px;float:left" class="txt1">Username</div>
<div style="padding: 4px 0px 0px 3px;float:left"><input type="textbox" value="" class="textbox1" id="txt_username" name="txt_username"></div>
<div style="padding: 7px 0px 0px 12px;float:left" class="txt1">Password</div>
<div style="padding: 4px 0px 0px 3px;float:left"><input type="password" value="" class="textbox1" id="txt_password" name="txt_password"></div>
<div style="padding: 7px 0px 0px 14px;float:left"><a href="#" title="Login" class="link1" onClick="JavaScript:memberlogin();">Login</a></div>
<div style="padding: 7px 0px 0px 24px;float:left"><a href="#" title="Forgot Password" class="link1" onClick="JavaScript:forgotpassword('forgotpassword',205,140);">Forgot Password?</a></div>
<div style="padding: 7px 0px 0px 24px;float:left"><a href="Register.php" title="Register" class="link1"><font color="#262626">[</font>Register<font color="#262626">]</font></a></div>
<?
}
?>
=============
member_content.php
=============
<body onload="javascript:doCallAjax();">
<div id="member">
<?
if ($_SESSION["member_user"] == '')
{
?>
<div style="padding: 4px 0px 0px 18px;float:left"><img src="images/member.png" alt="Member"></div>
<div style="padding: 7px 0px 0px 5px;float:left" class="txt1">Username</div>
<div style="padding: 4px 0px 0px 3px;float:left"><input type="textbox" value="" class="textbox1" id="txt_username" name="txt_username"></div>
<div style="padding: 7px 0px 0px 12px;float:left" class="txt1">Password</div>
<div style="padding: 4px 0px 0px 3px;float:left"><input type="password" value="" class="textbox1" id="txt_password" name="txt_password"></div>
<div style="padding: 7px 0px 0px 14px;float:left"><a href="#" title="Login" class="link1" onClick="JavaScript:memberlogin('login');">Login</a></div>
<div style="padding: 7px 0px 0px 24px;float:left"><a href="#" title="Forgot Password" class="link1" onClick="JavaScript:forgotpassword('forgotpassword',205,140);">Forgot Password?</a></div>
<div style="padding: 7px 0px 0px 24px;float:left"><a href="Register.php" title="Register" class="link1"><font color="#262626">[</font>Register<font color="#262626">]</font></a></div>
<?
}
else
{
?>
<div style="padding: 4px 0px 0px 18px;float:left"><img src="images/member.png" alt="Member"></div>
<div style="padding: 7px 0px 0px 5px;float:left" class="txt1" style="font-weight:normal;">สวัสดี คุณ<?=$_SESSION["member_firstname"] . '  ' . $_SESSION["member_lastname"]?></div>
<div style="padding: 7px 0px 0px 12px;float:left" class="txt1">ล็อคอินครั้งสุดท้าย <?=$_SESSION["lastlogin"]?></div>
<div style="padding: 7px 0px 0px 14px;float:left"><a href="#" title="Profile" class="link1">Profile</a></div>
<div style="padding: 7px 0px 0px 24px;float:left"><a href="#" title="Logout" class="link1" onClick="JavaScript:memberlogin('logout');">Logout</a></div>
<div><input type="hidden" value="<?=$_SESSION['member_user']?>" id="member_user"></div>
<?
}
?>
</div>
เรื่องของเรื่องคือ Javascript จะไม่ทำงานในหน้าที่ถูก Ajax เรียก
รายละเอียด และการแก้ไข แนะนำให้อ่านบทความบนเว็บประกอบครับ
ตามบทความ "การใช้งาน Javascript ในหน้าที่ถูก Ajax เรียก"
แต่ Script ของผมถูกโหลดโดย <script type="text/javascript" src="/js/js.js"></script> ตรง <head> แล้วครับ onclick ก็เรียก Function ที่อยู่ในนั้นทั้งหมดก็ยังไม่ได้
ลองย้าย function memberlogin(action) ออกมาก็ไม่ได้อีกครับ
onclick="memberlogin('logout')"
ลองตรวจดูครับ
ทำได้แล้วครับ น่าจะเป็นเพราะลืมใส่คำว่า 'logout' ไว้ในไฟล์ที่ ajax เรียกครับ (แต่จำได้ว่า copy มา paste ทั้งดุ้นแล้วนี่)
ขอบคุณครับ