javascript - jquery dialog widget not work with onclick button in row table -
i have table image bellow create query databases, each row have button want when onclick prompt dialog box (i use jquery dialog widget)
this php code create table
while ($fetch_dbsi_mhsw=mysql_fetch_array($query_dbsi_mhsw)) { $no++; echo" <tr> <td>$no</td> <td>$fetch_dbsi_mhsw[nim]</td> <td>$fetch_dbsi_mhsw[name]</td> <td style=\"text-align: center;\"><input name=\"bt_tambah_calon_wisudawan\" id=\"bt_tambah_calon_wisudawan\" type=\"image\" src=\"buttontambah.png\" alt=\"tambah\" align=\"middle\" width=\"20\" height=\"20\" /></td> </tr>";}
and jquery code
$(document).ready(function(){ $("#bt_tambah_calon_wisudawan").click(function(){ var value1 = $(this).closest('tr').find('td:eq(1)').text(); var value2 = $(this).closest('tr').find('td:eq(2)').text(); // here's text of dialog box var dialog = $("<div style='display: none'><p>anda akan menambahkan "+value1 + " " + value2 + " sebagai calon wisudawan?</p></div>").appendto("body"); // button on form var form = $("#form_tambah_cl_wisudawan") // form button pressed - open dialog $(dialog).dialog( { title: "konvirmasi penambahan data", dialogclass: "no-close", width: 600, modal: true, buttons: { "tambah": function () { // invoke form's action - putatively deleting resources on server $(form).submit(); $(this).dialog("close"); }, "cancel": function() { // don't invoke action, close dialog $(this).dialog("close"); } } }); return false; });
});
my problem when click plus button in row number 1 dialog box appear (like image 2)
but why when click plus button in row dialog box not appear, page reload , table gone.i want prompt dialog box whenever click 1 of pluss button. help?
the problem occurs when use duplicate identifiers, identifiers must unique. can add common css class can use class selector $('.classname')
html(simplified here)
<input class="bt_tambah_calon_wisudawan" />
script
$(".bt_tambah_calon_wisudawan").click(function(){ var tr = $(this).closest('tr'), value1 = tr.find('td:eq(1)').text(), value2 = tr.find('td:eq(2)').text(); //rest of code });
Comments
Post a Comment