بروز شدن قسمتی از صفحه (div خاصی از صفحه) با jquery

[h.rezaee]

سلام. بدون مقدمه وارد سوالم میشم تا شما اساتید بنده رو راهنمایی بفرمایید. ببینید بنده یک فرمی طراحی کردم که اطلاعات رو از کاربر میگیره و به صورت ajax در DB ذخیره میکنه و در قسمت دیگر یک جدولی هست که اطلاعات ثبت شده در DB رو نشان میده. تا اینجای کار درسته اما بنده میخواهم تغییری در کد ایجاد بشه که به محض ثبت اطلاعات فرم در DB ، بدون رفرش یا لود شدن مجدد صفحه اطلاعات جدید ثبت شده در DB در همون جدول نمایش داده بشه. راه های مختلف و سایت های مختلف (انگلیسی-فارسیو ....) رو هم مطالعه کردم منتها به جواب منطقی و درست درمونی نرسیدم. ممنون میشم راهنمایی بفرمایید. این کد هم مربوط به قسمت ثبت در DB هستش:

function registerProduct()
{
$('div.offDiv').fadeTo('slow', 0.7);
title = $('#txtcate').val();
parent = $('#parenttxtll').val();
//show();
$.post('../business/ajaxFunctions.php',
{
txtcate:title,
parenttxt:parent
}
,function(data)
{

$('#message').html(data);
alert('رکورد با موفقیت اضافه شد.');

$('div.offDiv').fadeOut('slow');


}

);



}

[***BiDaK***]

سلام.تا اونجایی که فهمیدم شما یک جدول نمایش اطلاعات در همون صفحه ی insert اطلاعات دارید و میخواید به محض اینکه یک فیلد اینسرت شد در جدول نمایش بدون رفرش صفحه ظاهر بشه.
من اینکارو بعنوان مثال با table انجام داد.
فرض میکنیم table از دیتابیس پر شده:


<table class="tbl" border="1">
<tr>
<td>name1</td>
<td>family1</td>
</tr>
<tr>
<td>name2</td>
<td>family2</td>
</tr>
</table>
<br><br>
<form method="post">
<input type="text" id="name">
<input type="text" id="family">
<input id='btn' type="button" value="click me">
</form>

اطلاعات با جی کوئری گرفته میشه و به سمت صفحه ی مورد نظر فرستاده میشه و جوابی بر میگرده که اگر با موفقیت عمل اینسرت انجام شده بود با کد زیر گفتم یک سطر با اطلاعات فرستاده شده به انتهای جدول نمایش اضافه کنه:

$('.tbl tr').last().after(createRow(name, family));
این هم کل کد جی کوری:

$(document).ready(function () {
$('#btn').click(function () {
/******Ajax - Click ********/
name = $('#name').val();
family = $('#family').val();


sendData = 'name=' + name + '&family=' + family;


$.ajax({
url: "ins.php",
type: "POST",
data: sendData,
async: true,
success: function (msg) {
if (msg == '1')
{
$('.tbl tr').last().after(createRow(name, family));
}
},
error: function () {
alert("ERROR!!");
}
});
});
});
و اینم فانکشن createRow که یک سطر رو دزست میکنه:

function createRow(name, family)
{
Html = '<tr><td>'+ name +'</td><td>'+ family +'</td></tr>';
return Html;
}

[h.rezaee]

ممنون . فقط یک سوال؟؟؟؟؟؟؟؟؟؟؟ و اون هم اینکه اگه بخواهیم edit کنیم باید به همین صورت عمل کنیم. و این که جدول در قالب paginate هست که این قسمت رو خودم حل میکنم. تنها مشکل و سوال در قسمت ویرایش هستش اگه امکانش هست بیشتر راهنمایی بفرمایید. ممنون.

[***BiDaK***]

یعنی با کلیک کردن روی ویرایش همون سطر بره توو مد ویرایش و مقادیر در تکست باکس به نمایش در بیان؟

[h.rezaee]

یعنی با کلیک کردن روی ویرایش همون سطر بره توو مد ویرایش و مقادیر در تکست باکس به نمایش در بیان؟
ممنون از توجه شما و کمکتون. ببینید بنده تمامی مطالبی که ذخیره میشه در DB رو در قسمتی به صورت جدول نمایش میدم که یک قسمتی به نام edit داره که وقتی کاربر روی اون کلیک میکنه امکان ویرایش رکورد مورد نظر رو داره ، بعد از اینکه تغییرات رو اعمال کرد میتونه مقادیر جدید رو ذخیره کنه در DB . تا اینجا هیچ مشکلی ندارم ولی میخوام وقتی کاربر ویرایش رو انجام داد مقدار جدید در جای رکورد مورد نظر بعد از بسته شدن صفحه ویرایش که بصورت popup هستش جایگزین بشه.یعنی اینطوری در نظر بگیرید که مقدار اولیه " علی محمدی" هستش، که وقتی کلید ویرایش زده شد و مقدار مورد نظر که "محمد احمدی" هستش وارد شد کلید ذخیره زده میشه و به صورت خودکار در جدول نمایشی به کاربر این مقدار نمایش داده بشه.
باز هم ممنون.

[***BiDaK***]

میتونی آیدی هر فیلدت رو به هر سطر بدی (زمانی که سطر هارو چاپ میکنی برای نمایش) و با سلکتور زیر html داخل اون tr رو تغییر بدی زمانی که کلیک ویرایش زده شد و با موفقیت ثبت شد:
$('#tbl tr[id = "1"]').html('<td>name1</td><td>family1</td>');

[h.rezaee]

ممنون، د.ست عزیز برای Del چه جوری عمل کنم ؟

[***BiDaK***]

به روش های مختلف میتونی اینکارو کنی.دیکمه ی دلیت هر کدوم آیدی رکوردو در خودش باید داشته باشه و بعداز دلیت بصورت ajax شما بصورت نمایشی از صفحه اون سطر رو حذف میکنی و در اولین رفرش اون سطر در page source هم دسگه نمایش داده نمیشه و کامل حذف شده.
شما با بدست اوردن اون tr میتنید اون سطر رو حذف کنید.
یکی از روش هاش اینجوریه:
$(".del").click(function () { $(this).parent().parent().remove();
});
parent اول اشاره میکنه به خود دکمه و parent دوم اشاره میکنه به اون tr.
میتونید آلرت بگیرید و html رو ببینید:
$(".del").click(function () { alert($(this).parent().parent().html());
});
راه دیگه مشخص کردن tr در parents:
$(".del").click(function () { $(this).parents('tr').remove();
});
و ....
اینم دمو (http://jsfiddle.net/EC7ge/).

[h.rezaee]

دوست عزیز مشکل بنده اینه که زمانی که دارم نمایش میدم نمی تونم id رو هم به همراه اونا نمایش بدم.
همچنین یکی دیگه از دلایل این خطه که نمی دونم چرا مقادیر وارد تابع delformrecordscategory مربوطه نمیشه:

function createRow($name, $parent)
{
del = '<a href="javascript:void(0)" onclick="delformrecordscategory('+$name+','+$parent+')" id="commands_del" class="tipped" data-title="حذف دسته"></a>';
//edit = '<a href="javascript:void(0)" onclick="showPopUpedit()" id="commands_show" class="tipped" data-title="ویرایش دسته"></a>';
Html = '<tr><td>'+ $name +'</td><td>'+ $parent +'</td><td>'+ del + '</td></tr>';
return Html;

}

این ارروری که firebug میده :

ReferenceError: \u0637\u0626\u062F\u0632\u0630 is not defined
onclick(event=click clientX=386, clientY=256)onclick (line 2)





delformrecordscategory(سلام,2)

[***BiDaK***]

سلام.شما در داخل جاوا اسکریپت از متغیر php استفاده نکنید.با :
$(this).atrr....
در داخل رویداد مربوطه تک تک مقادیری که لازم داریدو در متغیر بریزید.مثلا برای parent یا یک صفت parent به تگ اضافه کنید و در داخل اون مقدار رو بریزید یا در صفت آیدی و .....
توو گرفتن parent مشکل دارین؟
*****************
شما بجای اینکه رویداد onclick در خود تگ بذارید میتونید از جی کوئری برای اینکار استفاده کنید مثلا برای delete:
$('.tbl').on('click', '.del', function () { $(this).parent().parent().remove();
});

[h.rezaee]

$('.tbl').on('click', '.del', function () { $(this).parent().parent().remove();
});
ممنون. این خط رو میتونید بیشتر توضیح بدین؟

الان ببینید کد رو اضافه کردم ولی میدونم 100% اشتباه هستش؟!!!!

function createRow($name, $parent)
{
del = $('.tbl').on('click', '.del', function () {$(this).parent().remove();});

Html = '<tr><td>'+ $name +'</td><td>'+ $parent +'</td><td>'+ del + '</td></tr>';
return Html;

}

[***BiDaK***]

نه.این قسمت که فقط یه سطر درست میکنه که سطرهای ما بر فرض که کمترین امکاناتو داشته باشه الان فقط یک دلیت داره که اونهم یک اینپوت هست.
شما جزئیات کامل تری از جدولتون بدید تا بگم.مثلا این جدول واسه منو اه یا چیز دیگه؟ قضیه ی parent چیه و اگر ویرایش یا دلیت بشه براساس آیدیه یا چیز دیگه؟؟؟

[h.rezaee]

این جدول برای مدیریت دسته های سایت هستش که هر دسته میتونه زیر مجموعه دیگه باشه. بر اساس id کار می کنه و کلیه ارسالی-دریافتی ها به صورت jquery & Ajax هستش. بنده به این صورت عمل می کنم که مقداری که جدید ثبت میشه در داخل یک جدولی که با همین دستور tbl در همون صفحه هست نمایش داده میشه:
کد HTML:

نام دسته : <input type="text" id="txtcate" />
زیر دسته : <select name="ddlCmsCategroeis" id="parenttxtll">
<option value="0" id="option">مادر</option>
{section name=j loop=$obj->allcategory}
<option value="{$obj->allcategory[j].id}" id="option">{$obj->allcategory[j].title}</option>
{/section}
</select>
<a style="color:#000;" href="javascript:void(0)" onclick="registerProduct()"><button id="savebtn">ثبت</button></a>


<div id="messsage"></div>

بعد از زدن کلید ثبت بالا یک پیغام در قسمت message نمایش داده میشه و رکورد در جدول زیر نمایش داده میشه :

<table class="tbl" border="1">
<tr>
<td id="maincel">عنوان دسته</td>
<td id="maincel">زیر دسته</td>
<td style="border-left:none;" id="maincel">دستورات</td>
</tr>

</table>

با کلیک روی دکمه ثبت ، مقادیر به صفحه js مربوطه ارسال میشه :

function registerProduct()
{
$('div.offDiv').fadeTo('slow', 0.7);
title = $('#txtcate').val();
parent = $('#parenttxtll').val();
//show();
$.post('../business/ajaxFunctions.php',
{
txtcate:title,
parenttxt:parent
}
,function(data)
{

$('#message').html(data);
alert('رکورد با موفقیت اضافه شد.');
// $("#showpage").load("index.php .showcategory");
// location.reload();
$('.tbl tr').last().after(createRow(title, parent));
$('div.offDiv').fadeOut('slow');


}

);



}
function createRow($name, $parent)
{
//del = '<a href="javascript:void(0)" onclick="delformrecordscategory('+ $name +','+ $parent +')" id="commands_del" class="tipped" data-title="حذف دسته">' + $name +'</a>';
//edit = '<a href="javascript:void(0)" onclick="showPopUpedit()" id="commands_show" class="tipped" data-title="ویرایش دسته"></a>';
Html = '<tr><td>'+ $name +'</td><td>'+ $parent +'</td><td id="commands_del"></td></tr>';
return Html;

}




که این کد مقادیر رو به فایل ajaxfunction.php می بره و اون مقادیر رو در DB ذخیره میکنه اگه این عمل ( افزودن یا ویرایش یا حذف ) با موفقیت انجام شد پیغامی نشون میده که در قسمت message به کاربر نمایش داده میشه. بعد هم رکورد مورد نظر ساخته میشه و در کنار همون قسمتی که داریم دسته ها رو اضافه میکنیم در آنه واحد (همان لحظه) نشون داده میشه. حالا میخوام داخل همون جدول یک قسمت del باشه که رکورد هایی که کاربر اشتباهی وارد کرده بود رو حذف کنم منتها چون نمی تونم id رو از db بخونم و به کاربر در همون جا نشون بدم نمیدونم چه جوری حذف یا ویرایش براش قرار بدم.

[***BiDaK***]

مثلا سطرهای جدول شما برای نمایش به این شکله:

<tr>
<td><?php echo $row['name'] ?></td>
<td><?php echo $row['family'] ?></td>
<td><input type="button" value="delete" rowID="<?php echo $row['id'] ?>" class="del"></td>
</tr>

در قسمت امکانات ویرایش رو در نظر نگرفتم.اون هم به همین ترتیب مثل دکمه ی دلیت اضافه میشه.
زمانی که صفحه لود میشه خب شما چون آیدی هارو از دیتابیس چاپ میکنید مشکلی ندارید.مشکل واسه آیدی هایی میشه که شما با ajax سطریرو بوجود میارید.پس همونطور که گفتید نیاز به بدست اوردن این آیدی ها هم دارید.
طبق همون مثال اولی که برای ثبت زدم شما نام و فامیل یا در مثال خودتون نام و پرنت دسته رو بوسیله جی کوئری میگیرید و به صفحه ی insert میفرستید.زمانی که یک سطر به دیتابیس اضافه شد بعد از کوئری های صفحه ی insert شما میتونید با mysql_insert_id اگر و یا .... آیدی رکودی که ثبت شده رو بگیرید و چاپش کنید.
echo mysql_insert_id();
البته حتما میدونید که در این صفحه اگر پیغام دیگه ای بجر mysql_insert_id چاپ میشه سمت جی کوئری رشته ای که رسیده رو با توابع جدا کنید.اگر پیغام های بیشتری چاپ میکنید با علامت خاصی مثل ";" رشته رو جدا کنید و در success رشته رو split کنید.
و مقداری که مخصوص last id ایه رو در یک متغیر بریزید و متغیر رو در createRow بذار:
$('#btn').click(function () { /******Ajax Code********/
name = $('#name').val();
family = $('#family').val();
sendData = 'name=' + name + '&family=' + family;


$.ajax({
url: "ins.php",
type: "POST",
data: sendData,
async: true,
success: function (msg) {
if (msg != '')
{
lastID = msg;
$('.tbl tr').last().after(createRow(name, family, lastID));
}
},
error: function () {
alert("ERROR!!");
}
});
در صفحه ی ins.php فقط مقدار last id چاپ شده و msg در قسمت success فقط عدد آیدی آخرین رکورد رو میده.
اینم فانکشن createRow:
function createRow(name, family, lastID) {
Html = '<tr><td>'+ name +'</td><td>'+ family +'</td><td><input type="button" class="del" value="delete" rowID="'+ lastID +'"></td></tr>';
return Html;
}
حالا کدهای دلیت رو میذارم:

$('.tbl').on('click', '.del', function () {
id = $(this).attr('rowID');
mode = 'delete';
sendData = 'id=' + id + '&mode=' + mode;
thisRow = $(this);
// here comes ajax code for deleting
$.ajax({
url: "ins.php",
type: "POST",
data: sendData,
async: true,
success: function (msg) {
if (msg == 'deleted')
{
$(thisRow).parent().parent().remove();
}
},
error: function () {
alert("ERROR!!");
}
});
});

متغیر mode واسه اینه که همه ی کدها در یک صفحه هست و با mode میشه چک کرد برای اجرای دستورات.
چون در success هستیم this به سطر مورد نظر اشاره نمیکنه واسه همین به یک متغیر دادم و از اون متغیر در success استفاده کردم.
ویرایش هم به همین صورت ....

[h.rezaee]

ممنون ولی این کد echo mysql_insert_id()مشکل امنیتی ایجاد میکنه.راه دیگه ای هست؟

[sadegh1362]

سلام
دوست عزیز از نام تاپیک فهمیدم که می خواید راهی پیدا کنید که به جایی که به صفحه دیگری برید در همون صفحه عملیات رو انجام بدید . یعنی ارتباط با php از طریقajax . را بسیار ساده هست برای این کار اون اینکه پردازش صفحات رو چه del چه update وچه insert می تونید به php بسپورید و تنها div مورد نظر در صفحه رو refresh کنید . با این دستور :
$('your_div_id').load('your_url');

هر عملی که می خواید انجام بدید . میتونید فایل php تون رو در عبارت your_url قرار بدین تا div به صورت یک صفحه php در div شما مانند یک صفحه جدید refresh بشه . و خودتون رو درگیر کدهای اضافه نکنید. امتحان کنید روش خیلی کاربردی هستش.

[h.rezaee]

سلام
دوست عزیز از نام تاپیک فهمیدم که می خواید راهی پیدا کنید که به جایی که به صفحه دیگری برید در همون صفحه عملیات رو انجام بدید . یعنی ارتباط با php از طریقajax . را بسیار ساده هست برای این کار اون اینکه پردازش صفحات رو چه del چه update وچه insert می تونید به php بسپورید و تنها div مورد نظر در صفحه رو refresh کنید . با این دستور :
$('your_div_id').load('your_url');

هر عملی که می خواید انجام بدید . میتونید فایل php تون رو در عبارت your_url قرار بدین تا div به صورت یک صفحه php در div شما مانند یک صفحه جدید refresh بشه . و خودتون رو درگیر کدهای اضافه نکنید. امتحان کنید روش خیلی کاربردی هستش.
ممنون. درسته اما یک مشکلی هست؟!؟!؟!؟!
وقتی که قصد داریم این کار را با load انجام بدیم قسمت هایی که با js کار می کنند مثل paginate، ToolTip, valid form by jquery و بسیاری از قسمت های دیگه چون در اون load سرفایل های مربوط به js فراخوانی نمی شه از کار می افتند.
البته در نسخه 1 این پنل مدیریتی از این کاری که شما گفتید استفاده کرده بودم. منتها بابت زیباتر کردن و کاربردی کردن و آسانی کار و بروز رسانی دارم با آخرین تکنولوژی های معرفی شده تغییرش میدم.
باز هم از شما دوست عزیز بسیار ممنونم که به این تاپیک توجه کردی.

[sadegh1362]

دلیل اینکه از فایل هایی که گفتید نمی تونید استفاده کنید یا بهتر بگم نمی تونید اونا رو در div لود کنید اینه که تگ های اسکریبت شما در صفحه دیگه ای هستن ،اینه که شما در اون صفحه کدهای paginate، ToolTip, valid form by jquery v رونمی تونید لود کنید . اینم تکنیک هایی داره که از طریق شی گرایی میشه حلش کرد . مثلا اینکه شما هدر رو به صورت یک فانکشن در دیو لود کنید . و روش های حرفه ای تری هم هست مثلا اینکه هدری بسازید که با متغیری که بهش میدید اون تگهای اسکریپتی که لازم دارید در صفحه ای که می خواید برتون لود کنه . انو وقت دستتون بازه . و همه فایل هایی که گفتید در دیو کار می کنن . اگر تمایل داشتید باز توضیح می دم .
موفق باشید .

[h.rezaee]

دوست عزیز این پنل کاملا mvc هستش.کلیه فایل ها یکبار فراخونده میشن و میشه ازشون در هر کجا که بخوای فقط با یک فراخوانی دو کلمه ای صدا بزنی و استفاده کنی. تکنیک mvc پنج لایه نمی دونم شنیدی یا نه؟ اگر با اقای کرامتی فر کار کرده باشی میدونی چه چیزی هستش.باز هم ممنون . فعلا به همون روش قدیمی خودم load() کار کردم جواب داده تا مشکلش رو اساسی بر طرف کنم. از شما دوستان و اساتید میخوام که بنده رو راهنمایی بفرمائید. با تشکر از همه شما

[sadegh1362]

سلام
بله پکیج آموزشی MVC ایران نهاد کار خودم هستش .لینک پکیج MVC (http://barnamenevis.org/showthread.php?441640-%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%DB%8C-MVC) . اگر تمایل داشتید روش لود java script اختصاصی در هر controller در MVC رو براتون توضیح بدم .

شما میتونید header و footer رو برای صفحاتی که می خواید تگ های اسکریپت لود شن و هدرهای دیگه مثل css ها لود نشن رو جدا تعریف کنین . یا در کلاس کنترلر پایه به صورت جدا لود کنید . تا به این مشکل ها بر نخورید . فریم ورک هایی مثل yii و laravel هم به همین صورت کار می کنن .

[***BiDaK***]

ممنون ولی این کد echo mysql_insert_id()مشکل امنیتی ایجاد میکنه.راه دیگه ای هست؟
این مثال بود.
mysql_insert_id کلا deprecate شده.
از mysqli یا pdo استفاده میکریدین یا select می زدید و last id رو بدست می اوردید.

[h.rezaee]

این مثال بود.
mysql_insert_id کلا deprecate شده.
از mysqli یا pdo استفاده میکریدین یا select می زدید و last id رو بدست می اوردید.
بنده از pdo استفاده می کنم . منتها نمیدونم چه جوری؟

[***BiDaK***]

http://www.php.net/manual/fr/pdo.lastinsertid.php

[h.rezaee]

سلام
بله پکیج آموزشی MVC ایران نهاد کار خودم هستش .لینک پکیج MVC (http://barnamenevis.org/showthread.php?441640-%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%DB%8C-MVC) . اگر تمایل داشتید روش لود java script اختصاصی در هر controller در MVC رو براتون توضیح بدم .

شما میتونید header و footer رو برای صفحاتی که می خواید تگ های اسکریپت لود شن و هدرهای دیگه مثل css ها لود نشن رو جدا تعریف کنین . یا در کلاس کنترلر پایه به صورت جدا لود کنید . تا به این مشکل ها بر نخورید . فریم ورک هایی مثل yii و laravel هم به همین صورت کار می کنن .

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