每个PHP语句的Java弹出框

Question

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

我为每个语句在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>

Answer 1

您大错特错了，那就是将jQuery函数$（'。popup-with-form'）放入循环中，这将为您生成很多功能，当您尝试单击时，将调用所有函数以收集所有对您不起作用的函数。

因此，在使用时，请勿将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>

Answer 2

我找到了答案-在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>