2012-02-01 90 views
1

使用Jquery UI「對話框」小部件我試圖動態地創建多個模式窗口。動態創建多個Jquery UI模式對話框,php

在一個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>'; 



        } 
       } 



       ?> 

回答

1

正如我看到的,你不需要將JavaScript與PHP混合來做你想做的事情。你只需要給「可打印的$ 1」div賦予相同的類名(例如「可打印」),然後用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

不幸的是,這沒有奏效。感謝您的幫助。我只是一起報廢並使用[JQModal](http://dev.iceburg.net/jquery/jqModal/#how) – JDV590 2012-02-02 19:48:08