Динамически создавать несколько JQuery UI модальные диалоги, PHP - PullRequest
Новая
       3

Динамически создавать несколько JQuery UI модальные диалоги, PHP

1 голос
/ 02 февраля 2012

Использование виджета «Диалог» в пользовательском интерфейсе Jquery. Я пытаюсь динамически создать несколько модальных окон.

Внутри цикла php я динамически создаю кнопки, которые будут запускать модальное окно, а также div, который будет модальным окном. Внутри того же цикла я делаю эхо и пишу javascript для обработки модальных окон. Моя проблема в том, что я не знаю точно, как справиться с написанием JavaScript. В настоящее время я не работаю ни с одним из моих модалов. Должен ли я создать функцию и вызывать ее через каждую итерацию цикла, или я должен публиковать весь документ. 

    <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>';



                   }
                }



                ?>

Ответы [ 2 ]

1 голос
/ 02 февраля 2012

Как я понимаю, вам не нужно смешивать 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>
0 голосов
/ 02 февраля 2012

Я не смог заставить работать несколько модалов, используя jquery ui. Вместо этого я использовал JQModal и следовал это сообщение решение

...