›

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

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

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

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

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

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

希望各位前輩提供一些寶貴的建議或方向，感恩！
Share on Facebook Share on Twitter

評論

  • cokellencokellen
    1. 將資料存在hidden Tag, 透過jQuery取值, 顯示在小視窗
    2. submit後, 由PHP將資料處理為Array
    3. 小視窗修改的值, 按下確認後, 塞到指定的hidden Tag內
    Share on Facebook Share on Twitter
  • PHPNewbiePHPNewbie
    小弟我土法煉鋼的產生了大概的樣式： 
    <!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] 只有一個。)
    謝謝！
    Share on Facebook Share on Twitter
  • cokellencokellen
    你的程式碼有點亂, 原始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>
    Share on Facebook Share on Twitter
  • PHPNewbiePHPNewbie
    感謝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>
    Share on Facebook Share on Twitter
  • PHPNewbiePHPNewbie
    一直解不出來的我，
    將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>
    Share on Facebook Share on Twitter
Sign In or Register to comment.