动态创建多个 Jquery UI 模态对话框，php答案

【问题标题】：Dynamically Create Multiple Jquery UI Modal Dialogs, php动态创建多个 Jquery UI 模态对话框，php
【发布时间】：2012-02-03 03:47:07
【问题描述】：

我正在尝试使用 Jquery UI“对话框”小部件动态创建多个模式窗口。

在 php 循环中，我动态地创建将触发模式打开的按钮，以及将成为模式窗口的 div。在同一个循环中，我正在做一个回显并编写 javascript 来处理模态窗口。我的问题是我不确切知道如何处理编写 javascript。目前我没有让我的任何模态工作。我应该创建一个函数并在每次循环迭代中调用它，还是应该在每次迭代中发布整个 document.ready 例程？

    <script type="text/javascript">

            function uiready(a){
   $( "#" + a ).dialog({
            autoOpen: false,
            height: 650,
            width: 625,
            modal: true
 });
 $( "#Button" + a )

            .click(function() {
                $( "#" + a ).dialog( "open" );
            });

          };
        </script> 




     <?php


                //This area should build details buttons if there is a program with an amount greater than $0

               for ($i=1; $i<17; $i++){
                   $ID= $_POST["textfield" . $i];

                   if ($ID!=""){

                        echo '<script type="text/javascript">

                           uiready(' . $i . ');
                    </script>';

                   //build a button with the ID equal the post value
                   echo "<input type=\"button\" value=\" $ID \" id=\"Button" . $i . "\"            class=\"btnmargin\" />";

                   //next build the actual div
                   echo '<div class="printable' . $i . '" id="' . $i . '">
                <table cellspacing="0" cellpadding="10" border="2px">
                //for the sake of space I have not included the entire table markup
                </table>
        </div>';



                   }
                }



                ?>

【问题讨论】：

标签： php jquery-ui jquery-ui-dialog

【解决方案1】：

据我所知，您不需要将 JavaScript 与 PHP 混合来做您想做的事。您只需为“printable$1”div 赋予相同的类名（例如“printable”），然后使用 JS/jQuery 完成剩下的工作。添加某物。在标记之后像这样（未经测试）：

<script type="text/javascript">
$('.printable').each(function() {
    var dialog = $(this);
    dialog.dialog({
        autoOpen: false,
        height: 650,
        width: 625,
        modal: true
    });
    dialog.prev().click(function() { 
        dialog.dialog("open");
    });
}
</script>

【讨论】：

不幸的是，这不起作用。感谢您的帮助。我只是将它们全部废弃并使用JQModal

【解决方案2】：

我无法使用 jquery ui 让多个模式工作。相反，我使用JQModal 并关注this posts solution

【讨论】：