Dynamically Create Multiple Jquery UI Modal Dialogs, php

Question

Using Jquery UI "dialog" widget I am trying to dynamically create multiple modal windows.

Inside a php loop I am dynamically creating the buttons that will trigger the modal to open, as well as the div that will be the modal window. Inside the same loop I am doing an echo and writing the javascript to handle the modal windows. My problem is I do not know exactly how to handle writing the javascript. Currently I am not getting any of my modals to work. Should I create a function and call it through each loop iteration or should I publish the entire document.ready routine each iteration?

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



                   }
                }



                ?>

metti · Accepted Answer · 2012-02-01 22:22:40Z

1

As fare as I can see you don't need to mix JavaScript with PHP to do what you want. You just need to give the "printable$1" divs the same class names (eg. "printable") and do the rest with JS/jQuery. Add sth. like this after the markup (untested):

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

answered Feb 1, 2012 at 22:22

metti

2662 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JDV590 Over a year ago

unfortunately this didnt work. thanks for the help though. I just scrapped it all together and used JQModal

Community · Accepted Answer · 2017-05-23 11:59:49Z

0

I could not get the multiple modals to work using jquery ui. Instead i used JQModal and followed this posts solution

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Feb 2, 2012 at 19:47

JDV590

6493 gold badges15 silver badges34 bronze badges

Collectives™ on Stack Overflow

Dynamically Create Multiple Jquery UI Modal Dialogs, php

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related