jQuery的模式對話框與表格行的編輯/刪除

這是我的目標：有一個數據表與編輯/刪除按鈕。編輯按鈕打開一個模式對話框，其中預先填寫了相應行的詳細信息。我很難讓ajax工作來實際填寫表格，所以我只是在模態內打開編輯頁面並傳遞id。它對於第一個編輯按鈕非常有用。隨後的編輯按鈕什麼都不會發生。我很茫然。我不是javascript或jquery專家，但已經Google搜索，並沒有找到任何處理我的情況（或我可以成功適應）。我很確定它涉及.each和/或.sibilngs，但我不知道如何實現。這裏是所有的代碼，因爲它的立場，除了風格和一些PHP用於驗證用戶：jQuery的模式對話框與表格行的編輯/刪除

<link type="text/css" href="js/css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />  
<!--<script type="text/javascript" src="js/js/jquery-1.4.4.min.js"></script>--> 
<script type="text/javascript" src="js/jquery-1.5.1rc1.js"></script> 
<script type="text/javascript" src="js/js/jquery-ui-1.8.9.custom.min.js"></script> 

<script type="text/javascript"> 
//table highlights & such 
$(document).ready(function() { 
$(".striped tr").mouseover(function() { 
$(this).addClass("highlight"); 
}); 
$(".striped tr").mouseout(function() { 
$(this).removeClass("highlight"); 
}); 
$(".striped tr").toggle(function() { 
$(this).addClass("selected"); 
}, function() { 
$(this).removeClass("selected"); 
}); 
$(".striped tr:nth-child(odd)").addClass("odd"); 
}); 

$(function(){ 
    $('#edit_number').dialog({ autoOpen: false,width: 400,height: 500, modal:true, open: function() { 
     var editqs = 'process.php?action=edit_num_form&id=' + $(this).data('num_id') + '&rep_id=<?php echo $rep_id ?>'; 
     $("#edit_number").load(editqs); 
     } 
    }); 

$('.edit_number_link').live('click', function() { 
    var id = $(this).closest('tr').data('id'); 
    $("#edit_number").data('num_id', id).dialog('open'); 
    return false; 
}); 


}); 

</script> 
</head> 

<body> 
<table style="border: 1px solid #000;" border=1 cellpadding=0 cellspacing=0 class="striped"> 
    <thead> 
    <tr style="background-color: #ccc;"> 
     <th align=left width=100>Name</th> 
     <th align=left width=100>External</th> 
     <th align=left width=100>Internal</th> 
     <th align=left width=50>Options</th> 
     <th align=left width=50>Hours</th> 
     <th align=left width=150>Notes</th> 
     <th colspan=2>&nbsp;</th> 
    </tr> 
    </thead> 
<?php 
//db connection stuff  
while($row = mysql_fetch_array($result)) 
    { 
    $name = $row['name']; 
    $external = $row['external']; 
    $internal = $row['internal']; 
    if ($internal == "") 
     $internal = "&nbsp;"; 
    $options = $row['options']; 
    if ($options == "") 
     $options = "&nbsp;"; 
    $hours = $row['hours']; 
    if ($hours == "") 
     $hours = "&nbsp;"; 
    $comments = $row['comments']; 
    if ($comments == "") 
     $comments = "&nbsp;"; 
    $id = $row['id']; 

    echo "<tr data-id=".$id."><td>" . $name . "</td>"; 
    echo "<td>" . build_link($external,$rep_id, "ext", $userfound) . "</td>"; 
    echo "<td>" . $internal . "</td>"; 
    echo "<td>" . $options . "</td>"; 
    echo "<td>" . $hours . "</td>"; 
    echo "<td>" . $comments . "</td>"; 
    //echo "<td><a href='process.php?action=edit_num_form&id=" . $id . "&rep_id=".$rep_id."' title='Edit'><img src='edit.png' alt='Edit' border='0'></a></td>"; 
    echo "<td><a href='#' title='Edit' class='edit_number_link'><img src='edit.png' alt='Edit' border='0'></a></td>"; 
    echo "<td><a href='process.php?action=delete_num&id=" . $id . "&rep_id=".$rep_id."' title='Delete'><img src='delete.png' alt='Delete' border='0'></a></td>"; 
    //echo "<td><a href='?action=delete' class='delete'>Delete</a></td>"; 
    echo "</tr>"; 
    } 
echo "</table>"; 
mysql_close($con); 
?> 

<div id="edit_number" title="Edit Number"> 
</div> 
</body> 

</html>

因此理想情況下，我可以檢索每個編輯按鈕，我的數據加載形式在真實模式（不包括外部頁面），但至少需要額外的實例才能工作。

任何幫助，將不勝感激。謝謝！

來源

2011-03-01 jayhawkjoe

頁面上有腳本錯誤嗎？ – 2011-03-01 16:53:37

我希望。這至少會給我一個方向去尋找。但不，沒有腳本錯誤。 – jayhawkjoe 2011-03-01 17:13:47

既然不能看到整個代碼集...是#edit_number_link內。 #edit_number？如果是這樣，你需要使用jQuery的live（）方法來綁定事件，因爲DOM在初始頁面加載後正在更新。

此外，您現在不需要attr('data-id')作爲jQuery將這些屬性映射到.data()方法。您需要.data('id')來檢索此值。

另一件事是，你應該使用一個ID，當你應該使用一個類。假設ID是唯一的並且僅使用一次。您應該將#edit_number_link更改爲類.edit_number_link。我不確定哪個容器是#edit_number，但我假設只有一個容器。

$('.edit_number_link').bind('click', function() { 
    var id = $(this).closest('tr').data('id'); 
    $("#edit_number").data('num_id', id).dialog('close').dialog('open'); 
    return false; 
});

UPDATE Aftering看到代碼，實際上是想出來的的jsfiddle，我發現正在發生的事情是，當你點擊其他編輯鏈接，對話框窗口已經打開，並且不激發它是開放的回調。你需要做什麼來更新代碼，以便在打開對話框之前關閉對話框。我上面的代碼更新爲包含.dialog('close')。此外，我已將live更改回bind，因爲在這種情況下不需要它。

來源

2011-03-01 16:58:35 McHerbie

感謝attr的信息，但是您的更改現在使第一個鏈接無法運行。我要更新我原來的帖子，幷包括所有相關的代碼... – jayhawkjoe 2011-03-01 17:16:28

@jayhawkjoe，檢查我更新的答案。在打開它之前，你需要鏈接'''.dialog（'close'）'''。 – McHerbie 2011-03-01 17:58:36

喜歡它！就是這樣。謝謝@mcherbie – jayhawkjoe 2011-03-01 18:14:18

當你得到了相同的ID「edit_number_link」你應該嘗試：

$("#edit_number_link").each(function() { 
    $(this).click(function(){ 
      var id = $(this).closest('tr').attr('data-id'); 
      $("#edit_number").data('num_id', id).dialog('open'); 
     return false; 
    }); 
});

或類似的東西

來源

2011-03-01 16:54:04

感謝Louskan，但你的改變沒有任何區別。它仍然表現相同的方式。 – jayhawkjoe 2011-03-01 17:21:47

jQuery的模式對話框與表格行的編輯/刪除

回答

相關問題