0

我在我的网页上安装了一个 jquery UI 选项卡系统，但是我遇到了一系列问题，其中一个是：我可以在同一页面上向我的 PhP 提出表单请求，然后自行处理结果。换句话说：我想将相关表单的操作设置为同一个选项卡，通过 ajax 从另一个文件加载，该选项卡首先包含表单，因此它可以读取并显示带有搜索结果的表格。

下面是一些代码，希望对你有帮助。

索引（作为#tabs div）：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="maskMoney.js"></script>

        <title>Financeiro</title>
    </head>

    <body>
        <script>
            $(function() {
                $( "#tabs" ).tabs({
                    ajaxOptions: {
                        error: function( xhr, status, index, anchor ) {
                            $( anchor.hash ).html(
                            "A tab não pode ser carregada ou está sob manutenção, desculpe o transtorno." );
                        }
                    }
                });
            });

        </script>


        <div>
            <div id="tabs">
                <ul>
                    <li><a href="financeiro_ver.php">Buscar saída</a></li>
                    <li><a href="financeiro_criar.php">Criar saída</a></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript" src="create.js"></script>
    </body>
</html>

这是我放在选项卡下的一种形式（financeiro_ver.php 文件）：

<?php
include 'all.php';

if (isset($_POST['efetuar'])) {
    $saida = new Saida();
    if (isset($_POST['situacao'])) {
        $saida->situacao = $_POST['situacao'];
    } else {
        $saida->situacao = 'npago';
    }
    $sql = "UPDATE financeiro SET situacao = '".$saida->situacao."' WHERE id = '".$_POST['saidaId']."'";
     mysql_query($sql);
}

if (!isset($_SESSION)) {
    session_start();
}
$_SESSION['ID_FUNCIONARIO'] = 46;
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <title>Financeiro</title>
    </head>

    <body>
        <form id="form0" name="form0" method="post" action="financeiro_ver.php"> <!--action="http://sim.medgoldman.com.br/financeiro/financeiro_ver.php" style="background-color:#EEEEEE"> -->
              <table border="0" align="center" cellpadding="10" cellspacing="0">
                <tr>
                    <td align="center">GRUPO:
                        <select name="categoria" id="produto">
                            <option value="adm">Despesas Administrativas</option>
                            <option value="imp">Importações</option>
                            <option value="ban">Bancos</option>
                            <option value="matriz">Despesas Matriz</option>
                            <option value="outros">Outros</option>                            
                        </select></td>
                    <td align="center">PERÍODO:
                    <td>de: <input name="data1" id="data1" value=""></input></td>
                    <td>até: <input name="data2" id="data2" value=""></input></td>
                    </select></td>
                    <td align="center"><input name="buscar" type="submit" id="buscar" value="   Buscar   " /></td>
                </tr>
            </table>
        </form>
        <?php
        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
            echo '<form name="form2" method="post" <!--action="http://sim.medgoldman.com.br/financeiro/financeiro_ver.php" --> style="background-color:#EEEEEE">';
        }
        ?>
        <table  class ="viewTable" align="center">
            <?php
            if (isset($session->message)) {

                $mens ="<th>" . $session->message . "</th>";
                echo utf8_encode($mens);
            }

            if (isset($_POST['buscar'])) {

                $query = "SELECT * FROM financeiro " .
                        "WHERE categoria = '" . $_POST['categoria'] .
                        "' AND data >= '" . $_POST['data1'] .
                        "' AND data <= '" . $_POST['data2'] . "'";

                if (mysql_query($query, $database->connection)) {
                    $categoriaSel = mysql_query($query, $database->connection);

                    $output = '<tr><th colspan="3">Categoria ';
                    if ($_POST['categoria'] === 'adm') {
                        $output .= "Despesas administrativas";
                    } elseif ($_POST['categoria'] === 'imp') {
                        $output .= "Importações";
                    } elseif ($_POST['categoria'] === 'ban') {
                        $output .= "Bancos";
                    } elseif ($_POST['categoria'] === 'outros') {
                        $output .= "Outros";
                    } elseif ($_POST['categoria'] === 'matriz') {
                        $output .= "Despesas Matriz";
                    }
                    $output .= "</th>";
                    $output .= "<tr><th>Data</th><th>Descrição</th><th>Valor</th></tr>";

                    $valorSomaUS = 0;
                    $valorSomaRS = 0;

                    while ($saidasSel = mysql_fetch_array($categoriaSel)) {
                        $valorDisplay = number_format($saidasSel['valor'], '2', ',', '.');
                        $output .= "<tr";
                        if ($saidasSel['situacao'] === 'pago') {
                            $output .= ' class="pago"';
                        } else if ($saidasSel['situacao'] === 'npago') {
                            $output .= ' class="npago"';
                        }
                        $output .= ">";
                        $output .= "<td class=\"datout\">" . $saidasSel['data'] . "</td>";
                        $output .= "<td class=\"desout\">" . $saidasSel['descricao'] . "</td>";
                        if ($saidasSel['cambio'] === "us") {
                            $output .= "<td class=\"valout\"> U$ " . $valorDisplay . "</td>";
                            $valorSomaUS += $saidasSel['valor'];
                        } else {
                            $output .= "<td class=\"valout\"> R$ " . $valorDisplay . "</td>";
                            $valorSomaRS += $saidasSel['valor'];
                        }

                        //VERIFICA USUARIO PARA ADICIONAR PAGO/NPAGO:
                        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
                            $output .= '<td><input name="situacao" type="checkbox" value="pago"';
                            if ($saidasSel['situacao'] === 'pago') {
                                $output .= ' checked';
                            }
                            $output .=">Pago</input></td>";
                        }

                        //VERIFICA USUARIO PARA VER PAGO/NPAGO:
                        if ($_SESSION['ID_FUNCIONARIO'] == '46') {
                            if ($saidasSel['situacao'] === 'pago') {
                                $output .= '<td>pago</td>';
                            } else {
                                $output .= '<td>não pago</td>';
                            }
                        }
                        if ($_SESSION['ID_FUNCIONARIO'] == '30' && $saidasSel['categoria'] === "imp") {
                            if ($saidasSel['situacao'] === 'pago') {
                                $output .= '<td>pago</td>';
                            } else {
                                $output .= '<td>não pago</td>';
                            }
                        }

                        //VERIFICA USUARIO PARA ADICIONAR DELETAR:                   
                        if (($_SESSION['ID_FUNCIONARIO'] == '46') && ($saidasSel['categoria'] === 'adm' || $saidasSel['categoria'] === 'outros' || $saidasSel['categoria'] === 'matriz')) {

                            $output .= "<td><button class=\"deletar\" href=\"financeiro_deletar.php?id=" . $saidasSel['id'] . "\">Deletar</button>";
                        } elseif (( $_SESSION['ID_FUNCIONARIO'] == '30' || $_SESSION['ID_FUNCIONARIO'] == '46' ) && $saidasSel['categoria'] === 'imp') {

                            $output .= "<td><button class=\"deletar\" href=\"financeiro_deletar.php?id=" . $saidasSel['id'] . "\">Deletar</button></td>";
                        }

                        $output .="</tr>";

//SOMA DOS VALORES DO PERIODO:                                  
                        $valorSomaUS = number_format($valorSomaUS, '2', ',', '.');
                        $valorSomaRS = number_format($valorSomaRS, '2', ',', '.');
                        $output .= "<tr> <td class=\"valsoma\" colspan=\"3\"> Soma do período = R$ " . $valorSomaRS . " e U$ " . $valorSomaUS . "</td></tr>";
                        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
                            $output .= '<tr><td><input id="efetuar" type="submit" value=" Efetuar " name="efetuar"></input></td><td><input type="hidden" value="' . $saidasSel['id'] . '" name="saidaId"></input></td></tr>';
                        }
                    }
                    echo utf8_encode($output);
                } else {
                    $session->message("Nenhuma saída para este período.");
                }
            }
            ?>
        </table>
        <?php
        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
            echo '</form>';
        }
        ?>
    </body>
</html>
4

1 回答 1

0

http://jsfiddle.net/mZLDk/

$(document).ready(function() {
// Tab initialization
// This is setup for two tab groups and is not needed
$('#tabs, #fragment-1').tabs({
    select: function(event, ui){
        var tabNumber = ui.index;
        var tabName = $(ui.tab).text();
        //Here I setup an event for each change this changes some inner html 
        //of a tag but can be applied  in your situation
        if(tabNumber = 1 ) {
            document.getElementById('fragment-1a').innerHTML = "changed";
        } else {
        }
        //This was just some debuging code for me
        console.log('Tab number ' + tabNumber + ' - ' + tabName + ' - clicked');
    }
    });
});

您将替换该行

            document.getElementById('fragment-1a').innerHTML = "changed";

和

        document.forms[0].action = "An Action";

我真的很兴奋，因为这是我在这个网站上的第一个工作答案，所以请告诉我它是否有效

一个完整的 JAVASCRIPT 菜鸟如何找到您的答案的长篇故事

作为一个想法，您可以尝试制作它，以便选项卡事件更改设置 IE

jQuery - 捕获选项卡选择事件

但这对你有什么好处我在这里找到了其他东西

http://www.tek-tips.com/viewthread.cfm?qid=1235640

这讨论了基于事件的表单操作，您可以更改 onlcick。

但现在一个将两者结合在一起的例子

http://jsfiddle.net/mZLDk/

于 2012-06-18T05:23:10.727 回答