Question

我有一个HTML，通过AJAX从php文件中获取数据，并显示一个包含数据库内容的表。

在另一个文件中，我尝试将load（initial.html）调用到div并且代码显示正常，但是当我点击按钮来检索表时，将会写出tabce的div的元素样式自动显示“display：none; opacity：0”。而且在那张桌子里我有一个tableorter，它不起作用。

但如果我进入原始页面一切正常，但如果我将html加载到另一个文件，我就无法工作。

任何人都可以帮助我？

非常感谢

编辑：

我尝试了其他方式，但现在（“#teste”）。on（'submit'）不起作用。如果我把代码放在主页面并忘记load（）它工作正常。这是为什么？

感谢您的帮助

以下是代码：

主页面，当点击link_1时我调用load（）来填充div id =“principal”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Teste </title>
    </head>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/procura.css" />
    <link rel="stylesheet" href="css/theme.blue.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="js/procura.js"></script>
    <script type="text/javascript" src="js/jquery.metadata.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.widgets.js"></script>
    <body>

        <div id="banner-image">
            <img src="images/logo.jpg" />
        </div>
        <div id="banner-content">
            <a id="link_1" href="">Procurar Colaborador</a>
            <a id="link_2" href="">Confirmação de Colaboradores</a>
        </div>

        <div id="principal">

        </div>
    </body>
</html>

我称之为procura.html的Html

<form action="" id="teste" method="post" enctype="multipart/form-data">
    <div id="itemRows">
        <p>
            <select name="tipo_procura[]" >
                <option value="" selected></option>
                <option value="loja_integracao">Loja de Integração</option>
                <option value="nome_completo">Nome</option>
            </select>
            <input name="valor_procura[]" type="text" maxlength="255" size="50" />
            <input onclick="addRow(this.form);" class="form_button" type="button" value="Adicionar Procura" />
        </p>
    </div>
    <input id="submit_button" type="submit" value="Procurar" />
</form>
<div class="result" id="result">

</div>

JS文件procura.js

$(document).ready(function() {



    $("#link_1").click(function(event) {
        $("#principal").load("procura.html");
        event.preventDefault();
    });

    $('#teste').on('submit', function(event) {

        $.ajax({
            url : 'procura_colaborador.php',
            data : $(this).serialize(),
            type : 'POST',
            success : function(data) {
                console.log(data);
                $("#result").fadeOut('slow', function() {
                    $(this).html(data);
                }).fadeIn("slow");

            }
        });
        event.preventDefault();

    });

});

var rowNum = 0;
function addRow(frm) {
    rowNum++;
    var row = '<p id="rowNum' + rowNum + '"><select name="tipo_procura[]" ><option value="" selected></option><option value="loja_integracao">Loja de Integração</option><option value="nome_completo">Nome</option></select><input name="valor_procura[]" type="text" maxlength="255" size="50" /><input type="button" value="Remover Procura" class="form_button" onclick="removeRow(' + rowNum + ');"></p>';
    jQuery('#itemRows').append(row);

}

function removeRow(rnum) {
    jQuery('#rowNum' + rnum).remove();
}

和PHP文件

$query = "SELECT * FROM colaboradores";

$result = mysqli_query($con, $query) or die(mysqli_error($con));

echo '<table id="tabela_resultados" class="tablesorter-blue">';
echo '<thead><tr><th>Loja de Integração</th><th>Nome</th><th>Telemóvel</th><th>NIF</th><th>Data de Nascimento<th>Nacionalidade</th><th>Acção</th></tr></thead><tbody>';

while ($gear = mysqli_fetch_array($result)) {

    echo "<tr><td>";
    echo $gear['loja_integracao'];
    echo "</td><td>";
    echo $gear['nome_completo'];
    echo "</td><td>";
    echo $gear['num_tlm'];
    echo "</td><td>";
    echo $gear['num_nif'];
    echo "</td><td>";
    echo $gear['data_nascimento'];
    echo "</td><td>";
    echo $gear['nacionalidade'];
    echo "</td><td><a href=''>Contrato</a></td></tr>";

}


echo '</tbody></table>';
echo '<script type="text/javascript">$("#tabela_resultados").tablesorter();</script>';

Answer 1

如果我理解正确的话尝试将您的json函数更改为检索html数据，因为当您执行时无法检索json 如果你想要检索你的表，你必须添加到json函数，{php = 1}}

dataType: "html"

Jquery load（）将显示和不透明度放在元素样式中

1 个答案: