jquery與對話框按鈕的數據表

-1

我想利用一個按鈕，將打開一個對話框基於該按鈕位於特定的行。我已附加我的代碼如下。jquery與對話框按鈕的數據表

該按鈕類DLG-outletpart-BTN：

這裏是jquery的JavaScript的部分：

<script> /*datatables script function below */ 
$(document).ready(function() { 
$('#table_id_outlets').DataTable(); 
}); 
</script> 
<script> /*jquery dialog controls for project detail */ 
$(function() { 
$(".dlgoutletpart").dialog({ 
    autoOpen: false, 
    show: { 
    effect: "blind", 
    duration: 500 
    }, 
    hide: { 
    effect: "fade", 
    duration: 700 
    }, 

}); 

$(".dlg-outletpart-btn").click(function() { 
    var outletID = $(this).attr("data-dlg-outletparts"); 
    $("#dialog-" + outletID).dialog("open") 
}); 
}); 
</script>

這裏是用PHP的HTML：

<body> 
<div> 
<p> 
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a> 
</p> 
</div> 
<div> 
<?php 

session_start(); 

require_once('./includes/php/include_master.php'); 

if ($_SESSION['authenticated'] == "true") { 

$id_account = $_SESSION['ID_Account']; 

$q = $protoFM['EMGSV'] -> newFindCommand('web_outlets'); 
$q -> addFindCriterion('id_account', '=='.$id_account); 

$r = $q->execute(); 

if(FileMaker::isError($r)){ 

    if($r->code == 401){ 
     echo "No outlets found."; 
    }else{ 
     echo "Unknown Error:".$r->code; 
    } 

}else{ 


} 

} else { 
echo "You are not logged in."; 
} 

?> 
<?php 

foreach ($r->getRecords() as $parts){ 
$outletID = $parts->getField('ID_Outlet'); 
$outletData1 = $parts->getField('Image_Data'); 
$outletData2 = $parts->getField('Image_Data2'); 
$outletData3 = $parts->getField('Image_Data3'); 
$outletPart1 = $parts->getField('part1'); 
$outletPart2 = $parts->getField('part2'); 
$outletPart3 = $parts->getField('part3'); 
$outletPart4 = $parts->getField('part4'); 
$outletPart5 = $parts->getField('part5'); 
$outletPart6 = $parts->getField('part6'); 
$outletPart7 = $parts->getField('part7'); 
$outletPart8 = $parts->getField('part8'); 
$outletPart9 = $parts->getField('part9'); 
$outletPart10 = $parts->getField('part10'); 

     echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">'; 
     echo '<p>'; 
     echo '1. &nbsp;'.$outletPart1.'<br>'; 
     echo '2. &nbsp;'.$outletPart2.'<br>'; 
     echo '3. &nbsp;'.$outletPart3.'<br>'; 
     echo '4. &nbsp;'.$outletPart4.'<br>'; 
     echo '5. &nbsp;'.$outletPart5.'<br>'; 
     echo '6. &nbsp;'.$outletPart6.'<br>'; 
     echo '7. &nbsp;'.$outletPart7.'<br>'; 
     echo '8. &nbsp;'.$outletPart8.'<br>'; 
     echo '9. &nbsp;'.$outletPart9.'<br>'; 
     echo '10. &nbsp;'.$outletPart10.'<br>'; 
     echo '</p>'; 
     echo '</div>'; 
} 
?> 
<table id="table_id_outlets" class="display"> 
<thead> 
    <tr> 
     <th>Floor</th> 
     <th>Area Served</th> 
     <th>Room Number</th> 
     <th>Outlet Number</th> 
     <th>Outlet Gas</th> 
     <th>Outlet Manufacturer</th> 
     <th>Outlet Model</th> 
     <th>Outlet Parts</th> 
    </tr> 
</thead> 
<tbody> 
<?php 
foreach ($r->getRecords() as $outlet){ 
$outletFloor = $outlet->getField('Outet_Floor'); 
$outletAreaServed = $outlet->getField('Outlet_Area_Served'); 
$outletRoomNumber = $outlet->getField('Outet_Room_Number'); 
$outletNumber = $outlet->getField('Outlet_Number_In_Room'); 
$outletGas = $outlet->getField('Outlet_Gas_Type'); 
$outletManufacturer = $outlet->getField('Outlet_Manufacturer'); 
$outletModel = $outlet->getField('Outlet_Model'); 

     echo "<tr>"; 
     echo '<td>' .$outletFloor. '</td>'; 
     echo '<td>' .$outletAreaServed. '</td>'; 
     echo '<td>' .$outletRoomNumber. '</td>'; 
     echo '<td>' .$outletNumber. '</td>'; 
     echo '<td>' .$outletGas. '</td>'; 
     echo '<td>' .$outletManufacturer. '</td>'; 
     echo '<td>' .$outletModel. '</td>'; 
     echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>'; 
    } 
?> 
</tbody> 
</table> 

</div> 
<?php $outlet->getfields('Outlet_Room_Number')?> 
</body>

來源

2015-01-27 caryd12

我沒有」試着測試這個，並且有一個很多的清理需要所以採取這一粒鹽，而不是確切的解決方案。

在我進入的解釋，有需要作出一些意見：

留在你的縮進級別的頂部
- 不佳縮進代碼更難打造甚至更難以排除故障。在您發佈StackOverflow或任何其他網站之前，您應該首先清理您的代碼（實際上，您應該在編碼時執行此操作）。這可能是你得到了投票的原因，也是你對我的問題沒有得到滿意的原因。然而，如果你回去編輯你的答案，正確地縮進一切，我會給你的問題upvote。
- 請記住：你在網上發佈的內容反映了你作爲一名程序員。
請勿使用單個字母變量。
- 給你的變量適當的和描述性的名字。單個字母的名字也使得難以編碼和難以排除故障。
如果你不需要它，不寫它
- 如果你要張貼在計算器上尋求幫助，這是尤其如此。你有一個沒有任何代碼的條款的地方應該被剝離你的問題，真的應該被剝離出你的代碼。如果您沒有任何要在子句中執行的任務，請不要添加它。添加它回來時，你實際上需要它。這用於關閉並立即打開php元素。如果你打算立即打開另一個php元素，那麼沒有理由關閉一個php元素。如果這是因爲您將兩個不同的部分針對該問題編織在一起，然後在提交之前將其清理乾淨。

我不想摘下來的罵，但說實話，如果你交的格式化並寫入代碼，計算器沒有人會回答它，你會得到下降票甚少。你通過格式化代碼幾乎讓我失去了一部分，但我決定完成它。

所以，這裏是你可以嘗試的代碼。關注我在javascript中評論的部分。其基本思路是：

使表格成爲您的主選擇器。
- 你可以使tr元素的主要選擇，它仍然會給你的tr的索引表中，但加入選擇表本身就意味着對DOM已經呈現後，如果您以編程方式添加新行jquery方法也適用於他們。
使用this關鍵字作爲起點。
- 這將是按鈕被點擊，這將允許您導航。

利用jQuery的導航方法，在這種情況下，closest()。

<html> 
<head> 
    <script> /*datatables script function below */ 
     $(document).ready(function() { 
      $('#table_id_outlets').DataTable(); 
     }); 
    </script> 

    <script> /*jquery dialog controls for project detail */ 
     $(function() { 
      $(".dlgoutletpart").dialog({ 
       autoOpen: false, 
       show: { 
       effect: "blind", 
       duration: 500 
       }, 
       hide: { 
       effect: "fade", 
       duration: 700 
       }, 

      }); 

      // I changed the element selector to the id of the table element. 
      // This allows you to specify the selector for the 'on' method to apply to all 
      // tr elements within the given table and then reference their index relative 
      // to the overall table. 
      // I'm using `button` for the method's selector because you have only have 
      // on button in your table so it de-couples your selector from your class name. 
      $("#table_id_outlets").on('click', 'button', function() { 
       debugger; 
       // this: refers to the button that was clicked 
       // closest: walks up the node hierarchy till it finds a `tr` 
       // index(): gives you the index of the `tr` within the table. 
       // Use the index number however you need. 
       console.log($(this).closest('tr').index()); 

       var outletID = $(this).attr("data-dlg-outletparts"); 
       $("#dialog-" + outletID).dialog("open") 
      }); 
     }); 
    </script> 
</head> 

    <body> 
    <div> 
    <p> 
    <a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a> 
    </p> 
    </div> 
    <div> 
    <?php 

    session_start(); 

    require_once('./includes/php/include_master.php'); 

    if ($_SESSION['authenticated'] == "true") { 

     $id_account = $_SESSION['ID_Account']; 

     // Note: you can't put a space between your 
     $query = $protoFM['EMGSV']->newFindCommand('web_outlets'); 
     $query->addFindCriterion('id_account', '==' . $id_account); 

     $result = $query->execute(); 

     if(FileMaker::isError($result)){ 
      if($result->code == 401){ 
       echo "No outlets found."; 
      }else{ 
       echo "Unknown Error:".$result->code; 
      } 
     } 

    } else { 
    echo "You are not logged in."; 
    } 

    foreach ($result->getRecords() as $parts){ 
     $outletID  = $parts->getField('ID_Outlet'); 
     $outletData1 = $parts->getField('Image_Data'); 
     $outletData2 = $parts->getField('Image_Data2'); 
     $outletData3 = $parts->getField('Image_Data3'); 
     $outletPart1 = $parts->getField('part1'); 
     $outletPart2 = $parts->getField('part2'); 
     $outletPart3 = $parts->getField('part3'); 
     $outletPart4 = $parts->getField('part4'); 
     $outletPart5 = $parts->getField('part5'); 
     $outletPart6 = $parts->getField('part6'); 
     $outletPart7 = $parts->getField('part7'); 
     $outletPart8 = $parts->getField('part8'); 
     $outletPart9 = $parts->getField('part9'); 
     $outletPart10 = $parts->getField('part10'); 

     echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">'; 
     echo '<p>'; 
     // Use an unordered list here 
     echo '1. &nbsp;'.$outletPart1.'<br>'; 
     echo '2. &nbsp;'.$outletPart2.'<br>'; 
     echo '3. &nbsp;'.$outletPart3.'<br>'; 
     echo '4. &nbsp;'.$outletPart4.'<br>'; 
     echo '5. &nbsp;'.$outletPart5.'<br>'; 
     echo '6. &nbsp;'.$outletPart6.'<br>'; 
     echo '7. &nbsp;'.$outletPart7.'<br>'; 
     echo '8. &nbsp;'.$outletPart8.'<br>'; 
     echo '9. &nbsp;'.$outletPart9.'<br>'; 
     echo '10. &nbsp;'.$outletPart10.'<br>'; 
     echo '</p>'; 
     echo '</div>'; 
    } 
    ?> 
    <table id="table_id_outlets" class="display"> 
     <thead> 
      <tr> 
       <th>Floor</th> 
       <th>Area Served</th> 
       <th>Room Number</th> 
       <th>Outlet Number</th> 
       <th>Outlet Gas</th> 
       <th>Outlet Manufacturer</th> 
       <th>Outlet Model</th> 
       <th>Outlet Parts</th> 
      </tr> 
     </thead> 
     <tbody> 
     <?php 
     foreach ($result->getRecords() as $outlet){ 
      $outletFloor  = $outlet->getField('Outet_Floor'); 
      $outletAreaServed = $outlet->getField('Outlet_Area_Served'); 
      $outletRoomNumber = $outlet->getField('Outet_Room_Number'); 
      $outletNumber  = $outlet->getField('Outlet_Number_In_Room'); 
      $outletGas   = $outlet->getField('Outlet_Gas_Type'); 
      $outletManufacturer = $outlet->getField('Outlet_Manufacturer'); 
      $outletModel  = $outlet->getField('Outlet_Model'); 

      echo "<tr>"; 
      echo '<td>' .$outletFloor. '</td>'; 
      echo '<td>' .$outletAreaServed. '</td>'; 
      echo '<td>' .$outletRoomNumber. '</td>'; 
      echo '<td>' .$outletNumber. '</td>'; 
      echo '<td>' .$outletGas. '</td>'; 
      echo '<td>' .$outletManufacturer. '</td>'; 
      echo '<td>' .$outletModel. '</td>'; 
      echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>'; 
      } 
     ?> 
     </tbody> 
    </table> 

    </div> 
    <?php $outlet->getfields('Outlet_Room_Number')?> 
    </body> 
</html>

我沒有測試PHP部分，但是jQuery的肯定能行。

來源

2015-01-29 00:54:22

jquery與對話框按鈕的數據表

回答

相關問題