Javascript弹出框，每个php语句都有一个

时间：2013-09-21 18:46:18

标签： javascript php database

我不知道这是否可行，但似乎应该......

我在每个语句的php上都运行了一个javascript弹出框。该应用程序是座位图类的东西。数据库表中有50个宴会桌，每个宴会桌有10个座位和一个表id。

我查询数据库并询问表活动字段设置为yes的所有字段。然后，对于每个表格，我想显示一个弹出窗体，以便用户可以输入每个座位的名称。问题是这个。当我打开表单的第一个实例时，它将表id显示为1.当我打开表单的第二个实例时，我希望它显示表id 2 - 但它显示表id 1.如何获取表单的每个实例显示'下一个'表？

以下是我正在使用的代码：

     global $wpdb;
$seatings = $wpdb->get_results("SELECT * FROM bb_cl_seating WHERE table_active='yes' ");

    if (count($seatings)===0){
    echo "<h2>There are no tables - Would you like to add one?</a>"; 
    } else  {
    foreach($seatings as $seating){
?>

    <!-- link that opens popup -->

<a class="popup-with-form" href="#table-form" onclick="jQuery('#table-form-<?php echo $seating->table_id; ?>').show(); return false;">Open form</a><br />
<!-- form itself -->
<form method="post" id="table-form-<?php echo $seating->table_id; ?>" class="white-popup-block mfp-hide">
    <h1>Celebrity Luncheon Seating</h1>
    <fieldset style="border:0;">

        <ol>
            <li>
            Table Number: <?php echo $seating->table_id; ?>
            </li>
            <li>
                <label for="seat_one">Seat One</label>
                <input name="seat_one" type="text" id="seat_one" value="<?php echo $seating->seat_one; ?>" size="50" />
            </li>
            <li>
                <label for="seat_two">Seat Two</label>
                <input name="seat_two" type="text" id="seat_two" value="<?php echo $seating->seat_two; ?>" size="50" />
            </li>
            <li>
                <label for="seat_three">Seat Three</label>
                <input name="seat_three" type="text" id="seat_three" value="<?php echo $seating->seat_three; ?>" size="50" />
            </li>
            <li>
                <label for="seat_four">Seat Four</label>
                <input name="seat_four" type="text" id="seat_four" value="<?php echo $seating->seat_four; ?>" size="50" />
            </li>
            <li>
                <label for="seat_five">Seat Five</label>
                <input name="seat_five" type="text" id="seat_five" value="<?php echo $seating->seat_five; ?>" size="50" />
            </li>
            <li>
            <input name='table_id' type='hidden' id='table_id' value='<?php echo $seating->table_id; ?>' /><input name='table_active' type='hidden' id='table_active' value='<?php echo $seating->table_active; ?>' /><input name="update" type="submit" id="Submit" value="update" />
        </ol>
    </fieldset>
</form>

<?php   } // closes for each ?>

    <script type="text/javascript">
    jQuery(document).ready(function( $ ) {

    $('.popup-with-form').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#seat_one',

        // When elemened is focused, some mobile browsers in some cases zoom in
        // It looks not nice, so we disable it:
        callbacks: {
            beforeOpen: function() {
                if($(window).width() < 700) {
                    this.st.focus = false;
                } else {
                    this.st.focus = '#name';
                }
            }
        }
    });
});

</script>

2 个答案:

答案 0 :(得分：0)

你做了大错误，你把jQuery函数$（'。popup-with-form'）放在循环中，为你生成很多函数，当你尝试点击它会调用all来收集其他不会为你工作。

因此在使用时不要将jquery函数放在循环中。 [点]运算符。

请尝试以下代码

  global $wpdb;
$seatings = $wpdb->get_results("SELECT * FROM bb_cl_seating WHERE table_active='yes' ");

if (count($seatings)===0){
echo "<h2>There are no tables - Would you like to add one?</a>"; 
} else  {
foreach($seatings as $seating){  ?>

 <!-- link that opens popup -->
<a class="popup-with-form" href="#table-form">Open form</a><br />

<?php  } } ?>


<!-- form itself -->
<form id="table-form" class="white-popup-block mfp-hide">
<h1>Celebrity Luncheon Seating</h1>
<fieldset style="border:0;">

    <ol>
        <li>
        Table Number: <?php echo $seating->table_id; ?>
        </li>

    </ol>
</fieldset>


jQuery(document).ready(function( $ ) {
// pop up form script
$('.popup-with-form').magnificPopup({
    type: 'inline',
    preloader: false,
    focus: '#name',

    // When elemened is focused, some mobile browsers in some cases zoom in
    // It looks not nice, so we disable it:
    callbacks: {
        beforeOpen: function() {
            if($(window).width() < 700) {
                this.st.focus = false;
            } else {
                this.st.focus = '#name';
            }
        }
    }
});

}）; 

</script>

答案 1 :(得分：0)

我找到了答案 - 在javascript调用中我需要让它知道有多个...并且还需要为每个实例调用javascript，而不像之前给出的提示

<!-- link that opens popup -->
<script type="text/javascript">
    jQuery(document).ready(function( $ ) {

    $('.popup-with-form-<?php echo $seating->table_id; ?>').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#seat_one',




        // When elemened is focused, some mobile browsers in some cases zoom in
        // It looks not nice, so we disable it:
        callbacks: {
            beforeOpen: function() {
                if($(window).width() < 700) {
                    this.st.focus = false;
                } else {
                    this.st.focus = '#name';
                }
            }
        }
    });
});

</script>   


<a href="#popup-with-form-<?php echo $seating->table_id; ?>" class="popup-with-form-<?php echo $seating->table_id; ?>">Open popup</a><br />


<!-- form itself -->
<div id="popup-with-form-<?php echo $seating->table_id; ?>" class="mfp-hide white-popup">

<form method="post" >
    <h1>Celebrity Luncheon Seating</h1>
    <fieldset style="border:0;">

        <ul>
            <li>
            Table Sponsor: <?php echo $seating->sponsor; ?>
            </li>
            <li>
                <label for="seat_one">Seat 1</label>
                <input name="seat_one" type="text" id="seat_one" value="<?php echo $seating->seat_one; ?>" size="50" />
            </li>
            <li>
                <label for="seat_two">Seat 2</label>
                <input name="seat_two" type="text" id="seat_two" value="<?php echo $seating->seat_two; ?>" size="50" />
            </li>
            <li>
                <label for="seat_three">Seat 3</label>
                <input name="seat_three" type="text" id="seat_three" value="<?php echo $seating->seat_three; ?>" size="50" />
            </li>
            <li>
                <label for="seat_four">Seat 4</label>
                <input name="seat_four" type="text" id="seat_four" value="<?php echo $seating->seat_four; ?>" size="50" />
            </li>
            <li>
                <label for="seat_five">Seat 5</label>
                <input name="seat_five" type="text" id="seat_five" value="<?php echo $seating->seat_five; ?>" size="50" />
            </li>

        </ul>
    </fieldset>
    <fieldset style="border:0;">

        <ul>
            <li>
            Table Celebrity: <?php echo $seating->celebrity; ?>
            <li>
                <label for="seat_six">Seat 6</label>
                <input name="seat_six" type="text" id="seat_six" value="<?php echo $seating->seat_six; ?>" size="50" />
            </li>
            <li>
                <label for="seat_seven">Seat 7</label>
                <input name="seat_seven" type="text" id="seat_seven" value="<?php echo $seating->seat_seven; ?>" size="50" />
            </li>
            <li>
                <label for="seat_eight">Seat 8</label>
                <input name="seat_eight" type="text" id="seat_eight" value="<?php echo $seating->seat_eight; ?>" size="50" />
            </li>
            <li>
                <label for="seat_nine">Seat 9</label>
                <input name="seat_nine" type="text" id="seat_nine" value="<?php echo $seating->seat_nine; ?>" size="50" />
            </li>
            <li>
                <label for="seat_ten">Seat 10</label>
                <input name="seat_ten" type="text" id="seat_ten" value="<?php echo $seating->seat_ten; ?>" size="50" />
            </li>
            <li>
            <input name='table_id' type='hidden' id='table_id' value='<?php echo $seating->table_id; ?>' /><input name='table_active' type='hidden' id='table_active' value='<?php echo $seating->table_active; ?>' /><input name="update" type="submit" id="Submit" value="update" />
            </li>
        </ul>
    </fieldset>
</form>
</div>
相关问题
最新问题