Question

我正在构建一个使用Jquery-UI标签的页面。每个标签调用一个不同的php页面。

每个php标签页在加载时使用php include（）函数返回另一个php页面。在每个php选项卡页面中，页面顶部都有一些jquery来控制按钮浏览mysql记录。当按下按钮时，Jquery会发布到最初加载在选项卡上的同一个php脚本。

最初包含然后发布到附加到导航按钮的Jquery的脚本返回一个表单，该表单包含来自mysql数据库的表。

在操作中，用户可以单击选项卡，表单将包含在加载中。然后，用户可以使用左箭头和右箭头滚动数据库中的值。每个箭头按下发送一个Jquery帖子到表单，并包含相同的PHP脚本，但具有更新的mysql值。

到目前为止这项工作，但问题是切换标签时。这些选项卡只是它们包含不同的表单和对不同表的mysql查询的意义上的不同。除此之外，他们的运作方式相同。

当用户按下导航按钮时，将发送包含主键值的字段，以便在数据库中查询下一个值。 Jquery使用表单输入上的name选项来保存主键值。

首先，我可能会出现未加载页面的问题，因此Jquery传递了错误的值，因此我尝试在每个选项卡上将表单输入名称命名为相同，并在每个选项卡上也不同，但我两种方式都得到了相同的结果。

在页面加载时，mnavigation在单击选项卡时工作正常。但是当您单击另一个选项卡时，导航将不再有效。

在包含的数据库表单脚本上放置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);
?>

Jquery-UI选项卡/ PHP / MySql - 更改选项卡后不调用PHP POST

0 个答案: