是否可產生多個jQuery Dialog,並對應到個別按鈕?

edited 十月 2014 in PHP新手區
各位前輩大家好!
小弟我這幾天碰到了一個難題,一直沒辦法實行。
這個難題的構想是:
假設有一個班級學生的填寫網頁,網頁內有一張表格,這張表格共有10列,
每一列代表一位學生(EX:第一列學生一,第二列學生二....),而每一列中有一個按鈕。

只要按這個按鈕,就會打開一個小視窗(jQuery Dialog),所以總共會有十個Dialog,
而每一個Dialog都共同的擁有一些可輸入的輸入框(EX:姓名、學號、住址....等等),
例如我點選第一列的按鈕,跳出小頁面後,輸入完學生的基本資料,輸入完並關閉後,
第一列就會顯示我剛剛所輸入的資料,接著我可以接下去的輸入其他學生資料。

但這幾天我試了很久,試來試去反倒出現幾個問題:
1.例如第一列要怎麼與第一列的小頁面?(EX:點第一列按鈕出現A小頁面、第二列按鈕出現B小頁面,且互不干擾)

2.小頁面的資料如何存置陣列?
(EX:第一列學生資料的姓名:王小明、學號:A001、住址:台北市=>存到Array_A[]中
第二列學生資料=>存到Array_B[]中.....等等)

3.輸入完資料並送出後,一直無法取得那些資料,也無法顯示資料。

希望各位前輩提供一些寶貴的建議或方向,感恩!

評論

  • 1. 將資料存在hidden Tag, 透過jQuery取值, 顯示在小視窗
    2. submit後, 由PHP將資料處理為Array
    3. 小視窗修改的值, 按下確認後, 塞到指定的hidden Tag內
  • 小弟我土法煉鋼的產生了大概的樣式:
    <!DOCTYPE html>
    <html>
        <title>table_dialog.php</title>
        <head>
            <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>;
            <script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>;
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">;
            <link rel="stylesheet" href="/resources/demos/style.css">
            <style>
                body { font-size: 100%; }
                label, input { display:block; }
                input.text { margin-bottom:12px; width:95%; padding: .4em; }
                fieldset { padding:0; border:0; margin-top:25px; }
                h1 { font-size: 1.2em; margin: .6em 0; }
                div#users-contain { width: 650px; margin: 20px 0; }
                div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
                div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
                .ui-dialog .ui-state-error { padding: .3em; }
                .validateTips { border: 1px solid transparent; padding: 0.3em; }
            </style>
            <script>
                $(function() {
                    var dialog, form,
                        name = $( "#name" ),
                        email = $( "#email" ),
                        password = $( "#password" ),
                        allFields = $( [] ).add( name ).add( email ).add( password ),
                        tips = $( ".validateTips" );
                    function updateTips( t ) {
                        tips.text( t ).addClass( "ui-state-highlight" );
                        setTimeout(function() {
                            tips.removeClass( "ui-state-highlight", 1500 );
                        }, 500 );
                    }
                    function addUser() {
                        //表格欄位內容
                        var tb=document.getElementById("users");
                        var arrlist = [tb.rows[1].cells[0].innerHTML ,
                                        tb.rows[1].cells[1].innerHTML ,
                                        tb.rows[1].cells[2].innerHTML];
                        //欄位為空白則新增
                        if( arrlist[0] == 0 && arrlist[1] == 0 && arrlist[2] == 0 ){
                            allFields.removeClass( "ui-state-error" );
                            $( "#users #nbsp_Name" ).append(name.val());
                            $( "#users #nbsp_Email" ).append(email.val());
                            $( "#users #nbsp_Password" ).append(password.val());
                            dialog.dialog( "close" );
                        }
                    } 
                    dialog = $( "#dialog-form" ).dialog({
                        autoOpen: false,height: 300,width: 350,modal: true,
                        buttons: {
                            "Create": addUser,
                            Cancel: function() {
                                dialog.dialog( "close" );
                            }
                        },
                        close: function() {
                            form[ 0 ].reset();
                            allFields.removeClass( "ui-state-error" );
                        }
                    });
                    form = dialog.find( "form" ).on( "submit", function( event ) {
                        event.preventDefault();
                        addUser();
                    });
                    $( "#create-user" ).button().on( "click", function() {
                        dialog.dialog( "open" );
                    });
                    //檢查陣列內容
                    $( "#check_array" ).button().on( "click", function() {
                        //表格欄位內容
                        var tb=document.getElementById("users");
                        var arrlist = [tb.rows[1].cells[0].innerHTML ,
                                        tb.rows[1].cells[1].innerHTML ,
                                        tb.rows[1].cells[2].innerHTML];
                        var contain = document.createElement("content");
                        var text = document.createTextNode(
                            '陣列[0]:' + arrlist[0] + ';' +
                            '陣列[1]:' + arrlist[1] + ';' +
                            '陣列[2]:' + arrlist[2]);
                        contain.appendChild(text);
                        document.body.appendChild(contain);
                    });
                    //欄位清空
                    $( "#tableReset" ).button().on( "click", function() {
                        $('#users #nbsp_Name').empty();
                        $('#users #nbsp_Email').empty();
                        $('#users #nbsp_Password').empty();
                    });
                    //檢查是否有空值
                    $( "#checkEmpty" ).button().on( "click", function() {
                        //表格欄位內容
                        var tb=document.getElementById("users");
                        var arrlist = [tb.rows[1].cells[0].innerHTML ,
                                        tb.rows[1].cells[1].innerHTML ,
                                        tb.rows[1].cells[2].innerHTML];
                            if( arrlist[0] == 0 || arrlist[1] == 0 || arrlist[2] == 0 ){
                                alert('其中一個為空值 !')
                            }
                    });
                });
            </script>
        </head>
        <body>
            <div id="dialog-form" title="Create new user">
                <p class="validateTips">All form fields are required.</p>
                <form><fieldset>
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" value="[email protected]" class="text ui-widget-content ui-corner-all">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                </fieldset></form>
            </div>
            <div id="users-contain" class="ui-widget" style="text-align:center;">
                <h1>Existing Users:</h1>
                <table id="users" class="ui-widget ui-widget-content">
                    <thead>
                        <tr class="ui-widget-header">
                            <th>Name</th>
                            <th>Email</th>
                            <th>Password</th>
                            <th>Create User</th>
                            <th>TableReset</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="nbsp_Name"></td>
                            <td id="nbsp_Email"></td>
                            <td id="nbsp_Password"></td>
                            <td><button id="create-user">Create</button></td>
                            <td><button id="tableReset">Reset</button></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button id="create-user">Create</button></td>
                            <td><button id="tableReset">Reset</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--檢查用按鈕-->
            檢查用按鈕<br>
            <button id="checkEmpty">檢查空值?</button><br>
            <button id="check_array">陣列內容:</button><div id="content"></div>
        </body>
    </html>
    
    依我現在的功力,如果要在第二列有相同的按鈕,
    我只能再產生一個Dialog 的JS,並採取不同命名,
    如第一個按鈕為id="create-user1"、第二個按鈕為id="create-user2"...
    然後複製整的JS.....等等。
    但這樣的話,會讓CODE整個就多到爆炸的地步.....
    不敢想像如果我需要10列的效果XD
    想請問是不是有甚麼方法,可以讓Dialog頁面的JS轉換為單一個物件,
    不管我有幾列的按鈕,點開來的JS都是同一個JS,但輸出的資料會對應不同列。
    (EX:
    按鈕1=>[Dialog JS]=>資料2、
    按鈕2=>[Dialog JS]=>資料2....
    其中的 [Dialog JS] 只有一個。)
    謝謝!
  • 你的程式碼有點亂, 原始Javascript跟jQuery混著用,
    @"

    純使用jQuery的範例, 每次打開編輯的小視窗, 會填入不同的資料,
    按下ok, 將修改後的資料寫回指定的tag
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<script src="http://code.jquery.com/jquery-latest.min.js"; type="text/javascript"></script>
    		
    		<script type="text/javascript">
    			$(function(){
    				$(".edit").click(function(){
    					var offset = $(this).offset(),
    						num = $(this).siblings("input[name=num]").val(),
    						phone = $("#phone" + num).val(),
    						address = $("#address" + num).val();
    					
    					$("#editNum").val(num);
    					$("#editPhone").val(phone);
    					$("#editAddress").val(address);
    					
    					$("#editTable").css({
    						"position": "absolute",
    						"top": (offset.top - 65) + "px",
    						"left": (offset.left + 40) + "px",
    						"display": "block"
    					});
    					
    				});
    				
    				$("#editTable .ok").click(function(){
    					var num = $("#editNum").val();
    					
    					$("#phone" + num).val($("#editPhone").val());
    					$("#address" + num).val($("#editAddress").val());
    					
    					$("#editTable").hide();
    				});
    			});
    		</script>
    		
    	</head>
    	<body>
    		<table width="200px;" style="margin-top:100px;">
    			<tr>
    				<td width="100px;">
    					小明	
    				</td>
    				<td>
    					<input type="button" value="edit" class="edit">
    					<input type="hidden" name="num" value="1">
    					<input type="hidden" name="phone1" id="phone1" value="0912345678">
    					<input type="hidden" name="address1" id="address1" value="taiwan">
    				</td>
    			</tr>
    			<tr>
    				<td>
    					小華	
    				</td>
    				<td>
    					<input type="button" value="edit" class="edit">
    					<input type="hidden" name="num" value="2">
    					<input type="hidden" name="phone1" id="phone2" value="0912312312">
    					<input type="hidden" name="address1" id="address2" value="macau">
    				</td>
    			</tr>
    		</table>
    		
    		<table id="editTable" cellpadding='1' cellspacing='1' style="border:1px 000000 solid; display:none;">
    			<tr>
    				<td>電話</td>
    				<td><input type="text" id="editPhone"></td>
    			</tr>
    			<tr>
    				<td>地址</td>
    				<td><input type="text" id="editAddress"></td>
    			</tr>
    			<tr>
    				<td><input type="hidden" id="editNum"></td>
    				<td><input type="button" class="ok" value="ok"></td>
    			</tr>
    		</table>
    	</body>
    </html>
    
  • 感謝cokellen提供的範例,
    我套用到Dialog(官網範例:http://jqueryui.com/dialog/#modal-form)後,小視窗的欄位可以取得表格預設的隱藏資料,
    但不知道為甚麼,無論按哪個按鈕,都是指向第一筆的紀錄,
    試了很久,依然沒辦法點第二個按鈕,
    <input type="text" id="edit_Num">
    
    就顯示2,
    我猜想是不是剛開始的
    num = $('input[name="num"]').val(),
    
    這一行的問題。
    如果能解決切換數值的小缺陷,就沒有問題了XD
    以下為所有code,為了方便觀察,所以將hidden的欄未改為text
    <!DOCTYPE html>
    <html>
      <title>table_dialog.php</title>
      <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
        <!--jQuery官方CDN服務-->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>;
        <script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>;
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">;
        <link rel="stylesheet" href="/resources/demos/style.css">
        <style>
          body { font-size: 100%; }
          label, input { display:block; }
          input.text { margin-bottom:12px; width:95%; padding: .4em; }
          fieldset { padding:0; border:0; margin-top:25px; }
          h1 { font-size: 1.2em; margin: .6em 0; }
          div#users-contain { width: 650px; margin: 20px 0; }
          div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
          div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
          .ui-dialog .ui-state-error { padding: .3em; }
          .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style>
        <script>
          $(function() {
            //判斷哪個按鈕
            var dialog, form,
              num = $('input[name="num"]').val(),
              name = $("#row_name" + num).val(),
              email = $("#row_email" + num).val(),
              allFields = $( [] ).add( name ).add( email ),
              tips = $( ".validateTips" );
              //將資料丟到小視窗
              $("#edit_Num").val(num);
              $("#edit_name").val(name);
              $("#edit_email").val(email);        
            dialog = $( "#dialog-form" ).dialog({
              autoOpen: false,height: 300,width: 350,modal: true,
              buttons: {
                Create: function() {
                  //按鈕按下後要將資料送至何處
                  var num = $("#edit_Num").val();          
                  $("#row_name" + num).val($("#edit_name").val());
                  $("#row_email" + num).val($("#edit_email").val());
                  allFields.removeClass( "ui-state-error" );
                  dialog.dialog( "close" );
                } ,
                Cancel: function() {
                  dialog.dialog( "close" );
                }
              },
              close: function() {
                allFields.removeClass( "ui-state-error" );
              }
            });
            form = dialog.find( "form" ).on( "button", function( event ) {
              event.preventDefault();
            });
            $( ".create-user" ).button().on( "click", function() {
              dialog.dialog( "open" );
            });
          });
        </script>
      </head>
      <body>
        <div id="dialog-form" title="Create new user">
          <p class="validateTips">All form fields are required.</p>
          <form><fieldset>
            <input type="text" id="edit_Num">
            <label for="name">Name</label>
            <input type="text" name="name" id="edit_name" class="text ui-widget-content ui-corner-all">
            <label for="email">Email</label>
            <input type="text" name="email" id="edit_email" class="text ui-widget-content ui-corner-all">
            <input type="button" class="ok" tabindex="-1" style="position:absolute; top:-1000px">
          </fieldset></form>
        </div>
        <div id="users-contain" class="ui-widget" style="text-align:center;">
          <h1>Existing Users:</h1>
          <table id="users" class="ui-widget ui-widget-content">
            <thead>
              <tr class="ui-widget-header">
                <th>Name</th>
                <th>Email</th>
                <th>Create User</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td><td></td>
                <td>
                  <input type="button" class="create-user" value="Create">
                  <input type="text" name="num" value="1">
                  <input type="text" name="row_name" id="row_name1" value="111">
                  <input type="text" name="row_email" id="row_email1" value="222">
                </td>
              </tr>
              <tr>
                <td></td><td></td>
                <td>
                  <input type="button" class="create-user" value="Create">
                  <input type="text" name="num" value="2">
                  <input type="text" name="row_name" id="row_name2" value="aaa">
                  <input type="text" name="row_email" id="row_email2" value="zzz">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>
    </html>
    
  • 一直解不出來的我,
    將DIALOG整個簡化後,
    並套上cokellen大大所提供的範例就可以了。

    結束耍了好多天的笨XD
    再次感謝cokellen 大大!
    <script>
          $(function() {
            $( "#dialog" ).dialog({
              autoOpen: false,height: 300,width: 350,modal: true,
              buttons: {
                Create: function() {
                  var num = $("#edit_Num").val();
                  $("#row_name" + num).val($("#edit_name").val());
                  $("#row_email" + num).val($("#edit_email").val());
                  $( "#dialog" ).dialog( "close" );                
                } ,
                Cancel: function() {
                  $( "#dialog" ).dialog( "close" );
                }
              }
            });
            $( ".create-user" ).click(function() {
              $( "#dialog" ).dialog( "open" );
              var offset = $(this).offset(),
                num = $(this).siblings("input[name=row_num]").val(),
                name = $("#row_name" + num).val(),
                email = $("#row_email" + num).val();
              $("#edit_Num").val(num);
              $("#edit_name").val(name);
              $("#edit_email").val(email);          
            });
          });
        </script>
    
Sign In or Register to comment.