نمایش پیغام به یک کادر به صورت fade in

[kablayi]

سلام...
من این کد رو برای درج در پایگاه داده استفاده میکنم و میخوام از jquery برای نمایش پیغام تایید به کاربر استفاده کنم ولی نمیدونم چطوری؟
میخوام جای Alert یه کادر به صورت fade in باز بشه و به کاربر موفقیت عملیات رو اعلام کنه...

function senddata() {
var JName = document.getElementById("txtname").value;
var JFamily = document.getElementById("txtfamily").value;
$.ajax(
{
type: "POST",
url: "Default.aspx/Insert",
data: "{'name':'" + JName + "','family':'" + JFamily + "'}",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function () { alert("success"); },
error: function () { alert("error" ) }
}
);
}

اگه ممکنه راهنماییم کنید چطور این کار رو انجام بدم...

[mehdi.mousavi]

سلام...
من این کد رو برای درج در پایگاه داده استفاده میکنم و میخوام از jquery برای نمایش پیغام تایید به کاربر استفاده کنم ولی نمیدونم چطوری؟
میخوام جای Alert یه کادر به صورت fade in باز بشه و به کاربر موفقیت عملیات رو اعلام کنه...
اگه ممکنه راهنماییم کنید چطور این کار رو انجام بدم...

سلام.
از اونجاییکه دارید از jQuery استفاده می کنید، می تونید دو خط اول کد رو با کد زیر جایگزین کنید:

var JName = $('#txtname").val();
var JFamily = $('#txtfamily').val();

همینطور برای پاس کردن داده ها بصورت JSON، نیازی نیست تا مثل خط 8 در کد فوق، بصورت دستی اون string رو بسازید و میتونید از stringify استفاده کنید. بدین ترتیب فرضا:

JSON.stringify({name: 'ali'});

باعث میشه تا string زیر ساخته بشه:


"{"name":"ali"}"

یا از اون مهمتر، فرض کنیم کد name حاوی ' یا " باشه:

JSON.stringify({name: 'This isn\'t another "Test"!'});

که باعث میشه JSON زیر ایجاد بشه:


"{"name":"This isn't another \"Test\"!"}"

که همونطوریکه مشاهده می کنید، کاراکترهای مورد نظر بدرستی Escape شدن.

اما در نهایت سوال اصلی شما، اینکه چطور Box ای ایجاد کنیم که جای Alert رو بگیره و User رو از انجام یا عدم انجام صحیح عمل مورد نظر آگاه کنه. برای اینکار کافیه تا جستجویی برای صدها، یا شاید هزارها jQuery Plugin ای که برای این منظور توسط افراد مختلف نوشته شده، کنید. بطور مثال، Twitter Bootstrap Notifications (http://nijikokun.github.com/bootstrap-notify/) نام Plugin ای هستش که اینکارو بر اساس Bootstrap Framework انجام میده. بدین ترتیب کافیه تا جای alert، چنین Plugin ای رو instantiate کنید و با متود show پیام مورد نظر رو به نمایش در بیارید.

موفق باشید.

[jalil_gh]

اول باید کادر رو با html و css ایجاد کنی. یه چیزی مثل این

<div id='alert'>
<h3>توجه</h3>
<p></p>
<button>تایید</button>
</div>

با css باید ظاهرشو طراحی کنی و اونو مخفی کنی با یه چیزی مثل display:none
بعدش یه تابع مثل alert ایجاد کن

function showAlert(msg){
$('#alert').find('p').text(msg);
$('#alert').fadeIn(400);
$('#alert button').off('click').one('click', function(){
$('#alert').fadeOut(200);
});
}

حالا میتونی از اون تابع استفاده کنی

...
sucess: function(){
showAlert('success');
}
...

با آرزوی موفقیت.

[kablayi]

سلام.
از اونجاییکه دارید از jQuery استفاده می کنید، می تونید دو خط اول کد رو با کد زیر جایگزین کنید:

var JName = $('#txtname").val();
var JFamily = $('#txtfamily').val();

همینطور برای پاس کردن داده ها بصورت JSON، نیازی نیست تا مثل خط 8 در کد فوق، بصورت دستی اون string رو بسازید و میتونید از stringify استفاده کنید. بدین ترتیب فرضا:

JSON.stringify({name: 'ali'});

باعث میشه تا string زیر ساخته بشه:


"{"name":"ali"}"

یا از اون مهمتر، فرض کنیم کد name حاوی ' یا " باشه:

JSON.stringify({name: 'This isn\'t another "Test"!'});

که باعث میشه JSON زیر ایجاد بشه:


"{"name":"This isn't another \"Test\"!"}"

که همونطوریکه مشاهده می کنید، کاراکترهای مورد نظر بدرستی Escape شدن.


این نکته stringify خیلی بدردم خورد ممنونم.... :تشویق:



اول باید کادر رو با html و css ایجاد کنی. یه چیزی مثل این

<div id='alert'>
<h3>توجه</h3>
<p></p>
<button>تایید</button>
</div>

با css باید ظاهرشو طراحی کنی و اونو مخفی کنی با یه چیزی مثل display:none
بعدش یه تابع مثل alert ایجاد کن

function showAlert(msg){
$('#alert').find('p').text(msg);
$('#alert').fadeIn(400);
$('#alert button').off('click').one('click', function(){
$('#alert').fadeOut(200);
});
}

حالا میتونی از اون تابع استفاده کنی

...
sucess: function(){
showAlert('success');
}
...

با آرزوی موفقیت.

یه تابع شبیه به تابع شما رو نوشته بودم ولی جواب نمیداد ...!!! یه نکته توی توضیحات شما بود که فهمیدم مشکلم از کجاست...
من برای مخفی کردن اولیه کادر از visibility:hidden استفاده میکردم که هر چی تابع رو اجرا میکردم دوباره نمایش داده نمیشد...
ولی با توصیه شما display:none گذاشتم و به سادگی جواب داد... خیلی کمکم کردید ممنون