Jquery-UI タブを使用するページを作成しています。各タブは異なる php ページを呼び出します。
各 php タブ ページは、php include() 関数を使用して、ロード時に別の php ページに戻ります。各phpタブページには、ページの上部にjqueryがあり、mysqlレコードをナビゲートするボタンを制御しています。ボタンが押されると、Jquery は最初にタブに読み込まれた同じ php スクリプトに投稿します。
最初に含まれていて、ナビゲーション ボタンに添付された Jquery に投稿されたスクリプトは、mysql db からテーブルを保持するフォームを返します。
操作中、ユーザーがタブをクリックすると、ロード時にフォームが含まれます。ユーザーは、左右の矢印を使用してデータベース内の値をスクロールできます。矢印を押すたびに、Jquery ポストがフォームに送信され、同じ php スクリプトが含まれますが、mysql 値が更新されます。
これまでのところこれでうまくいきますが、問題はタブを切り替えるときです。タブは、異なるフォームと異なるテーブルへの mysql クエリを含むという意味でのみ異なります。それ以外は同じように動作します。
ユーザーがナビゲーション ボタンを押すと、データベースに次の値を問い合わせるために、主キーの値を含むフィールドが送信されます。Jquery は、フォーム入力で name オプションを使用して主キー値を保持しています。
最初は、ページが読み込まれず、Jquery が間違った値を渡すという問題があるかもしれませんが、フォームの入力名に各タブで同じ名前を付けようとしましたが、タブごとに異なる名前を付けようとしましたが、どちらの方法でも同じ結果になります。
何が起こるかというと、ページの読み込み時に、タブをクリックするとナビゲートが正常に機能します。ただし、別のタブをクリックすると、ナビゲーションが機能しなくなります。
含まれているデータベース フォーム スクリプトに echo ステートメントを配置した後、新しいタブを選択した後、ナビゲーション ボタンがナビゲーション ボタンで php データベース スクリプトを呼び出さなくなったことに気付きました。フォームの「ページ読み込み時」バージョンでスタックしているようです。
長い説明、アイデアはありますか？
1. Index.html page (Jquery Tabs)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Some Title</title>
<link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" href="css/mainstyle.css" />
<link rel="stylesheet" href="css/newstyle.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.custom.js"></script>
<script src="js/cookie.js"></script>
<script>
$(function() {
var index = 'key';
var dataStore = window.sessionStorage;
try {
var oldIndex = dataStore.getItem(index);
} catch(e) {
var oldIndex = 0;
}
$('#tabs').tabs({
active : oldIndex,
activate : function( event, ui ){
var newIndex = ui.newTab.parent().children().index(ui.newTab);
dataStore.setItem( index, newIndex )
}
});
});
</script>
</head>
<body>
<div id="top"><img id="headimg" src="css/images/header.gif" alt="heading"/></div>
<div id="middle">
<div id="tabs">
<ul>
<li><a href="#tabs-1" class="button">Site Home</a></li>
<li><a href="php/page1.php" class="button">First Tab</a></li>
<li><a href="php/page2.php" class="button">Second Tab</a></li>
<li><a href="php/page3.php" class="button">Third Tab</a></li>
<li><a href="php/page4.php" class="button">Forth Tab</a></li>
<li><a href="php/page5.php" class="button">Fifth Tab</a></li>
</ul>
<div id="tabs-1" class="content">
</div>
</div>
</div>
<div id="footer" class="smaller">
</div>
</body>
</html>
2. page1.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" href="css/newstyle.css" />
<script src="js/jquery-ui-1.10.2.custom.js"></script>
</head>
<script>
$(document).ready(function() {
$(".prev span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{pn:id},function(data){$("#dbform").html(data);});});
$(".next span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{nn:id},function(data){$("#dbform").html(data);});});
$(".first span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{fn:id},function(data){$("#dbform").html(data);});});
$(".last span").live("click",function(){
var id = $('input[name="contactid"]').val();
$.post("php/aec_database.php",
{ln:id},function(data){$("#dbform").html(data);});});
});
</script>
<body>
<div id="alerts_main" class="content">
<div id="dbform">
Original
<?php include 'aec_database.php'; ?>
</div>
</div>
</body>
</html>
3. aec_database.php
<?php
include("conf.php");
if(isset($_POST['pn'])){$prev = $_POST["pn"];}
if(isset($_POST['nn'])){$next = $_POST["nn"];}
if(isset($_POST['ln'])){$last = $_POST["ln"];}
if(isset($_POST['fn'])){$first = $_POST["fn"];}
$firstvalue = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID ASC LIMIT 1");
while($row = mysqli_fetch_array($firstvalue))
{
$fvalue = $row['System_ID'];
}
$lastvalue = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID DESC LIMIT 1");
while($row = mysqli_fetch_array($lastvalue))
{
$lvalue = $row['System_ID'];
}
if ($prev == $fvalue){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$prev'");
}
elseif($next == $lvalue){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$next'");
}
elseif(isset($prev)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID < '$prev' ORDER by System_ID DESC LIMIT 1");
}
elseif(isset($next)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID > '$next' ORDER by System_ID ASC LIMIT 1");
}
elseif(isset($first)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$fvalue'");
}
elseif(isset($last)){
$result = mysqli_query($con, "SELECT * FROM `Systems` WHERE System_ID = '$lvalue'");
}
else{
$result = mysqli_query($con, "SELECT * FROM `Systems` ORDER by System_ID ASC LIMIT 1");
}
while($row = mysqli_fetch_array($result))
{
$si = $row['System_ID'];
$ai = $row['Additional_Information'];
}
echo "
<form>
<div id='sites_sec2' class='sites_sec_class'>
<div id='a2' class='sites_sub_sec_class'>
<div class='field'>
<label for='contactid'>System ID:</label>
<div class='field-subject'><input type='text' name='contactid' value='".$si."' /></div>
</div>
<div class='field'>
<label for='ai'>Add Info:</label>
<div class='field-subject'><input type='text' name='ai' value='".$ai."' /></div>
</div>
</div>
</div>
<div id='hrsep'><hr></div>
<div id='buttons'>
<div class='first'><span><a href='#'><img src='css/images/icons/leftend.png' /></a></span></div>
<div class='prev'><span><a href='#'><img src='css/images/icons/leftarrow.png' /></a></span></div>
<div class='next'><span><a href='#'><img src='css/images/icons/rightarrow.png' /></a></span></div>
<div class='last'><span><a href='#'><img src='css/images/icons/rightend.png' /></a></span></div>
</div>
</form>";
?>
4. conf file
<?php
global $mysqli;
//server info
//server info
$server = 'localhost';
$user = 'xx';
$pass = 'xx';
$db = 'xx';
//connect to db
$con = mysqli_connect($server, $user, $pass, $db);
//mysqli_query('SET NAMES UTF8;');
//mysqli_query('SET COLLATION_CONNECTION=utf8_general_ci;');
//mysqli_client_encoding($con);// where $conn is your connection
if(mysqli_connect_errno()){
printf("Connect failed: %s\n", mysqli_connect_error());
}
//show errors
mysqli_report(MYSQLI_REPORT_ERROR);
?>