حذف سطرها در دیتابیس توسط jquery clickable

[binboy]

سلام
من می خوام توسط clickable تو jquery و بعد از کلیک روی دکمه حذف سطرهایی از دیتابیس را حذف کنم. اما مشکل اینجاست که اگر در html برای تگ <tr> آیدی بکار ببرم اولین سطر جدول را بدون در نظر گرفتن انتخاب سطر حتی بدون انتخاب حذف میکنه نه سطری که توسط clickable انتخاب میشه. اگر هم تگ <tr> را کلاس بگیرم کل جدول و سطرها را حذف میکنه. تمام اینها حذف موقت است، با رفرش دوباره اطلاعات میاد یعنی از دیتابیس حذف نمیشه.
حال من می خوام مقدار سطری که کلیک میشه را بگیرم و بدمش به کد php و همون سطر انتخاب شده هم تو دیتابیس و هم تو جدول حذف بشه.
ممنون میشم اگر راهنماییم کنید.
کد jquery:

$(".tableeven tr")
.mouseover(function()
{
$(this).addClass("over");
})
.mouseout(function()
{
$(this).removeClass("over");
})
.click(function()
{
$(this).toggleClass("click");
});
$('.delete_i').click(function(){
var checkbox = $("input#checkbox").val();
var dataString = 'checkbox=' + checkbox;
$.ajax
({
type:"POST",
url: 'http://localhost/parsdiba/index.php/admin/customer_size/delete',
data: dataString,
cache: false,
success: function()
{
$('.delete_i').hide(600,function(){
$(this).parent().remove();
})
}
});
return false;
});


کدهای html:


<form action="" method="post" accept-charset="utf-8">
<div class="main_indexadmin">
<div class="top_mainindexadmin">
<div class="home_i"></div>
<div class="print_i"></div>
<div class="edit_i"></div>
<input type="submit" name="delete" value="" class="delete_i" />
<a href="<?php echo base_url();?>index.php/admin/customer_size/add" class="add_i"></a>
</div>

<div class="line_right"></div>
<div class="line_left"></div>
<div id="delet_row">
<div class="table_show">
<div class="tableshow_head">نام و نام خانوادگی</div>
<div class="tableshow_head">پست الکترونیکی</div>
<div class="tableshow_head">شماره تماس</div>
<div class="tableshow_head">تاریخ ثبت</div>
<div class="tableshow_head">نوع سفارش</div>
<div class="tableshow_head">کد رهگیری</div>

<?php
$query = $this->db->get('customer');
foreach ($query->result() as $row)
{

echo '<table class="tableeven" border="0" cellpadding="0" cellspacing="0">';
echo '<tr class="delete_ii"><td><input name="checkbox" type="checkbox" class="checkbox" value="'.$row->code.'"></td>';
echo '<td class="tableshow_in">'.$row->name.'</td>';
echo '<td class="tableshow_in">' .$row->mail. '</td>';
echo '<td class="tableshow_in">' .$row->tel. '</td>';
echo '<td class="tableshow_in">' .$row->date_added. '</td>';
echo '<td class="tableshow_in">' .$row->order. '</td>';
echo '<td class="tableshow_in">' .$row->code. '</td></tr>';
echo '</table>';
}
?>
</div>
</div>
<div class="bottom_mainindexadmin"></div>
</div>
</form>

[alismith]

سلام دوست عزیز اولا شما اینجا چند تا اشتباه داری اولی:



<tr class="delete_ii">

و

$('.delete_i')


اشتباه دوم شما انتخاب نوع selector هستش اگه شما می خواین با کلیک روی chackbox سطری یاtr اون input رو پاک کنید باید این گونه عمل کنید:


$('.checkbox').click(function(){

$(this).parent().parent().fadeOut("slow");

});


و برای رویداد mouseover و mouseout این گونه عمل کنید:


$(".tableeven tr").hover(function(){
$(this).addClass("over");
},function(){

$(this).removeClass("over");

}).click(function() {
$(this).toggleClass("click");
});



و در نهایت برای مقدار دهی متغییر dataString می تونید اینگونه متغییر checkbox رو در رویداد click تنظیم کنید:


$('.checkbox').click(function(){

$(this).parent().parent().fadeOut("slow");

var checkbox = $(this).val();
var dataString = 'checkbox=' + checkbox;

});



و در آخر اطلاعات رو به صورت ajax به سرور بفرستید و با یک query ساده اطلاعات مورد نظر رو حذف کنید

موفق باشید

[binboy]

سلام
درسته اینو $('.delete_i') اشتباه زده بودم دستت درد نکنه اما کد بالا با کلاس $('.checkbox') را جایگزین کردم ولی مشکل اینجاست که با کلیک روی چک باکس نه ذکمه حذف، اون سطر حذف میشه نه تو دیتابیس.
در حقیقت در جدول من چک باکسی وجود نداره اون بصورت display: none; است. و با کلیک روی سطر، و زدن دکنه حذف مقدار چک باکس پنهان شده ای که روش کلیک شده را میدم به کد php تا تو دیتابیس حذفش کنه و jquery هم تو جدول حذف کنه، که مشکل مطلب پست اولی را دارد. یک تصویر میزارم تا واضع تر بشه:
http://www.pic.iran-forum.ir/images/0xvwa84j8qepcfra1riz.gif

[alismith]

سلام

این کد ها رو در یک nodepad کپی کنید و با پسوند html ذخیره نمایید البته برای اجرا باید به اینترنت متصل باشید :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Delete Rows</title>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery","1.5")</script>
<script language="javascript">

$(document).ready(function(){

$("tr").click(function(){

$(this).find("td").css('background','red');
$(this).find("input").attr('checked','checked')

});

$("#btn").click(function(){


$(".chk").each(function(){

if($(this).attr('checked')){

$(this).parent().parent().fadeOut("slow");

}

});


});

});

</script>
</head>

<body>
<table>
<tr><td style="width: 40px; border: 1px solid #000;">1</td><td style="width: 40px; border: 1px solid #000;">2</td><td style="width: 40px; border: 1px solid #000;"><input type="checkbox" class="chk"/></td></tr>
<tr><td style="width: 40px; border: 1px solid #000;">3</td><td style="width: 40px; border: 1px solid #000;">4</td><td style="width: 40px; border: 1px solid #000;"><input type="checkbox" class="chk"/></td></tr>
</table>
<input type="button" value="Del" id="btn"/>
</body>
</html>



فقط کافیه روی یک td روی هر کدوم که خواستید کلیک کنید بعد نتیجه را ببینید

موفق باشید

[binboy]

دستت درد نکنه. حلش کردم. فقط برام یک سوال و یک مشکل پیش امد.
سوال: اگر در $.ajax() برای success: function() مقداری در نظر نگیریم و این عمل $(this).parent().parent().fadeOut("slow"); را ابتدا کد انجام دهیم اشکالی دارد؟
مشکل: فرض بر اینکه ما روی سطری کلیک کردیم و قصد حذف آن را داشتیم و بعد منصرف شدیم. یعنی چک باکس را کلیک می کنیم تا حذف کنیم منصرف میشیم و چک باکس را بر میداریم. در این کد همچین قابلیتی نیست شما وقتی روی چک باکس کلیک می کنی دیگه نمی تونی از کلیک کردنت انصراف بدی یا چک باکس را برداریش تا اینکه صحفه را رفرش کنی.
من کد $(this).find("td").toggleClass("click"); را جایگزین کد $(this).find("td").addClass("click");کردم، با کلیک روی سطر یا همون چک باکس در ظاهر برداشته میشه ولی در اصل بعد از برذاشتن و کلیک روی دکمه حذف اون موردی که سطرش برداشته شده و ما از حذفش منصرف شدیم حذف میشه. چجوری باید رفع عیب بشه. تشکر

[alismith]

سلام

این گونه عمل کنید ببینید مشکل حل میشه:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Delete Rows</title>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery","1.5")</script>
<script language="javascript">

$(document).ready(function(){

$("tr").click(function(){
var check = confirm('Are You Sure!');
if(check){
$(this).find("td").css('background','red');
$(this).find("input").attr('checked','checked');
var id = $(this).attr('id');

//ajax:

var dataString = 'checkbox=' + $(this).find("input").val();

$.ajax({
type:"POST",
url: 'http://localhost/parsdiba/index.php/admin/customer_size/delete',
data: dataString,
cache: false,
success: function(data)
{
$(document).ajaxComplete(function(evt,request,sett ings){
$("#"+id).fadeOut("slow");
});
},

error: function(){

$(document).ajaxComplete(function(evt,request,sett ings){

alert('Error: '+ settings.url);


});

}

});
return false;

}
});
});

</script>
</head>

<body>
<table>
<tr id="tr1"><td style="width: 40px; border: 1px solid #000;">1</td><td style="width: 40px; border: 1px solid #000;">2</td><td style="width: 40px; border: 1px solid #000;"><input type="checkbox" class="chk"/></td></tr>
<tr id="tr2"><td style="width: 40px; border: 1px solid #000;">3</td><td style="width: 40px; border: 1px solid #000;">4</td><td style="width: 40px; border: 1px solid #000;"><input type="checkbox" class="chk"/></td></tr>
</table>
</body>
</html>



در اینجا کاربر با تایید کلیک خود بر روی سطر (فرقی نمی کنه روی کدام td یا عنصر از آن کلیک کرده) اطلاعات به صورت ajax به سرور ارسال میشه و با ارسال موفق اطلاعات به سرور سطر مورد نظر پاک یا پنهان میشه

فقط شما باید برای هر سطر یا tr یک id اختصاص بدید که این کار هم وقتی دارید سطر ها رو با php چاپ می کنید و ایجاد یک متغییر و افزایش مقدار آن در هر بار چاپ سطر می تونید این کا رو انجام دهید


موفق باشید

[binboy]

سلام، متاسفانه این کدها اصلا کار نمی کنه. اگر بشه همان پست بالایی(#4) با توجه به توضیحات پست #5، رفع عیب کرد بهتر است.
البته این نظر منه حالا خودتون استادید. تشکر

[alismith]

سلام
دوست عزیز اگه توجه کرده باشید در این کد میان کلمه settings فاصله افتاده اون رو درست کنید
درضمن در اینجا فقط با ارسال درست داده به سرور سطر مورد نظر پاک میشه
حالا اگه سرور مشکل داشت شما می تونی بعد از پیام خطا class عناصر رو بطور پیشفرض قرار بدی تا از اون حالت قرمز و چک شده بیرون بیان


موفق باشید

[binboy]

کد ها را در فایل js استفاده می کنم و خط زیر ارور میده:
$(document).ajaxComplete(function(evt,request,sett ings){
نمی دونم قضیه جیه که کار نمیکنه خودتون تست کنید پی میبرید.
شما در این کد دکمه قرار ندادید و clickable نیز نیست.
با پوزش

[alismith]

سلام
این فایل چک شده و صحیح کار میکنه و دقیقا تغییراتی که لازم بود رو اعمال کردم
فقط کافیه فایل index را اجرا کنید (برای این کار نیاز است تا به اینترنت متصل باشید)
در اینجا اگه اطلاعات صحیح به سرور ارسال شود (از طریق ajax) سطر مورد نظر از صفحه پاک می شود
در غیر این صورت با پیغام خطایی که آدرس سرور را برمی گرداند روبرو می شوید که بعد از تایید آن تغییرات اعمال شده روی سطر و چک باکس به حالت اول برمی گردد

فایل ضمیمه :

70289

موفق باشید

[binboy]

ضمن تشکر.
حلش کردم ولی به درست بودن کارم شک دارم. تایید می کنید که کد های زیر طرز نوشتنش درسته؟

$('.tableeven tr').hover(function(){
$(this).addClass('over');
}, function(){
$(this).removeClass('over');
}).click(function(){
checkBox = $(this).find("input").attr('checkbox', 'checked');
$id = $('input:checkbox:checked').val();
if (checkBox.attr('checked')) {
$(this).css('backgroundColor', "");
checkBox.attr('checked', '');
}
else {
checkBox.attr('checked', 'checked');
$(this).css('backgroundColor', "#140d01");
}
});
$('#delete_i').click(function(){
$('.chk').each(function(){
if ($(this).attr('checked')) {
var dataString = 'checkbox=' + $('input:checkbox:checked').val();
$(this).parent().parent().fadeOut("slow");
var self = this;
$.ajax({
type: "POST",
url: "http://localhost/parsdiba/index.php/admin/customer_size/delete",
data: dataString,
cache: false,
success: function(){
},
error: function(data){
alert('Load was performed.');
}
})

}
})
});

[alismith]

سلام
دوست عزیز شما خودت امتحان بکن ببین اصلا می تونی با این روش چند تا مقدار رو با یک بار استفاده از ajax ارسال کنی یا نه
و به نظر من اون فایلی که ضمیمه کردم کامل بود و با کلیک رو هر سطر از کاربر تایید می گرفت و بعد به صورت ajax اون سطر رو هم از db (دستوراتی که باید با php بنویسید) و هم از روی صفحه نمایش پاک می کرد
حالا باز بستگی به نیاز شما داره !

موفق باشید

[binboy]

سلام و تشکر
تو این روشی که شما گفتی فقط یک سطر را میشه پاک کرد، چطوری با jquery چندتا id انتخابی را بفرستم برای کد php؟(یا چطوری چندین سطر را با هم پاک کنم)

[alismith]

سلام
می تونید از json و تابع serialize() استفاده کنید

موفق باشید