javascript - 分页表格不出现弹出窗口

Question

我有分页表和输入字段。我想允许用户创建新进程。创建的表允许用户查看已经存在的进程。 hmtl代码:

<div class="inner">
<center><table class="paginated">
    <?php
        $result = getProcessData();

        if (mysqli_num_rows($result) > 0)
        {
            echo '
            <thead>
                <tr>
                    <th>Process</th>
                    <th>Created By</th>
                </tr>
            </thead>';                      
        }
            $count = 0;
        if (mysqli_num_rows($result) > 0)
            while($row = mysqli_fetch_array($result))
            {   
                    $process = $row['theme_name'];
                    $createdBy = $row['createby'];

            echo '
            <tbody>
                <tr valign="top">
                    <td>' .$process. '</td>
                    <td>' .$createdBy. '</td>
                </tr>
            </tbody>';

            $count++;
            }       
    ?>
    </table></center>       
    <form id="reguserform" method="post" action="process.php#err" style="margin-top:40px;">
            <?php
                $res = verifyFormFields();
            ?>
                        <!-- Username field -->
                <input type="text" class="input name" placeholder="Process name (required)" name="process" required/> 
                <!--<label class="tooll tool1">- No special Characters except _<br>- Character Limit: 4 to 20<br>- Username must be Unique</label>-->

                <center><input type="submit" class="button small" name="submit" value="Create Process"/></center>

                <div id="registerModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
                    <h2 id="modalTitle">Success!</h2>
                    <div>
                        <div id="testRegister" style="font-weight: 400;font-size: 1.5em; font-family: 'Raleway', Arial, sans-serif;"></div>
                        <div class="right">
                            <a href="#" id="closebtn" onclick="popUpNo()" class="button">Ok</a>
                        </div>
                    </div>
                </div>
            <?php   
                if($count == 1) 
                {                               
                    if($res=="")
                    { 
                        registerProcess();
                        echo"<script>document.getElementById('testRegister').innerHTML=registerStr;callShowAlert();</script>";
                    }
                    else{
                        echo "
                            <a style='color:red';> 
                                $res
                                </a>
                                ";
                        }
                }
            ?>                  
</form>
</div>

我验证该字段以及将过程插入数据库:

function registerProcess(){
    $con = mysqli_connect(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD, DATABASE_NAME);
    global $process;
    // To protect MySQL injection (more detail about MySQL injection)
    $process = cleanInputData($process);
    $process = mysqli_real_escape_string($con, $process);

    //query result
    $result = insertNewProcess(NULL,$process,$_SESSION['login_user'],1);
    // Check result
    if (!$result) {
        $msg2= "Process is already added. You cannot add same process twice!";
        echo $msg2;
        die('Invalid queryyyy: ' . mysqli_error($con));
    }
    // the message
    $msg = "Process is added!";

    // use wordwrap() if lines are longer than 70 characters
    echo "<script>var registerStr = 'Process Is Added';</script>";      
    //echo "<meta http-equiv='refresh' content='0'>";
}

function verifyFormFields(){
    global $process;

    if(empty($process)){
        return "<p id ='err'>Please Input Process</p>";
    }

    else return "";
}

我还使用javascript来调用弹出窗口并使表格分页:

<script type="text/javascript">
    (function() {
        $(document).foundation();
    });
    function callShowAlert()
    {
        $('#registerModal').foundation('reveal', 'open');
    }
    function popUpNo()
    {
        $('#registerModal').foundation('reveal', 'close');
        location.href = 'process.php';
    }
    var testVal = 0;
</script>

<script>
    $(document).ready(function() {
        $('table.paginated').each(function() {
            var currentPage = 0;
            var numPerPage = 5;
            var $table = $(this);
            $table.bind('repaginate', function() {
                $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
            });
            $table.trigger('repaginate');
            var numRows = $table.find('tbody tr').length;
            var numPages = Math.ceil(numRows / numPerPage);
            var $pager = $('<div class="pager"></div>');
            for (var page = 0; page < numPages; page++) {
                $('<span class="page-number"></span>').text(page + 1).bind('click', {
                    newPage: page
                }, function(event) {
                    currentPage = event.data['newPage'];
                    $table.trigger('repaginate');
                    $(this).addClass('active').siblings().removeClass('active');
                }).appendTo($pager).addClass('clickable');
            }
            $pager.insertBefore($table).find('span.page-number:first').addClass('active');
        });
    } );    
</script>

它工作完美，我弹出窗口，系统将记录插入数据库，但前提是只有输入字段和提交按钮。当我放置 table 时它不起作用。系统不会重新加载，也不会将记录插入数据库。为什么？

Answer 1

所以我通过简单地将表格放在表格后解决了这个问题:

<div class="inner">    
<form id="reguserform" method="post" action="process.php#err" style="margin-top:40px;">
        <?php
            $res = verifyFormFields();
        ?>
                    <!-- Username field -->
            <input type="text" class="input name" placeholder="Process name (required)" name="process" required/> 
            <!--<label class="tooll tool1">- No special Characters except _<br>- Character Limit: 4 to 20<br>- Username must be Unique</label>-->

            <center><input type="submit" class="button small" name="submit" value="Create Process"/></center>

            <div id="registerModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
                <h2 id="modalTitle">Success!</h2>
                <div>
                    <div id="testRegister" style="font-weight: 400;font-size: 1.5em; font-family: 'Raleway', Arial, sans-serif;"></div>
                    <div class="right">
                        <a href="#" id="closebtn" onclick="popUpNo()" class="button">Ok</a>
                    </div>
                </div>
            </div>
        <?php   
            if($count == 1) 
            {                               
                if($res=="")
                { 
                    registerProcess();
                    echo"<script>document.getElementById('testRegister').innerHTML=registerStr;callShowAlert();</script>";
                }
                else{
                    echo "
                        <a style='color:red';> 
                            $res
                            </a>
                            ";
                    }
            }
        ?>                  
</form>
<center><table class="paginated">
<?php
    $result = getProcessData();

    if (mysqli_num_rows($result) > 0)
    {
        echo '
        <thead>
            <tr>
                <th>Process</th>
                <th>Created By</th>
            </tr>
        </thead>';                      
    }
        $count = 0;
    if (mysqli_num_rows($result) > 0)
        while($row = mysqli_fetch_array($result))
        {   
                $process = $row['theme_name'];
                $createdBy = $row['createby'];

        echo '
        <tbody>
            <tr valign="top">
                <td>' .$process. '</td>
                <td>' .$createdBy. '</td>
            </tr>
        </tbody>';

        $count++;
        }       
?>
</table></center>  
</div>

据我所知，表格之前无法更新。