PDA

View Full Version : یک مشکل کوچک در ()animate


saeideros
شنبه 01 تیر 1392, 10:09 صبح
سلام
من یه فرم دارم که دو تا مقدار رو به یه فایل php ارسال می کنه و جوابشو که مجموع این دوتا مقدار هست رو از فایل php می گیره و نشون میده. بعد به یکی از مقادیر عدد 1 رو اضافه می کنه و دوباره این روند رو تکرار میکنه. برای زیبایی مقادر رو با یه Animation show و FadeIn نشون میده. وقتی مقادیر جدید می خواد محاسبه بشه متن رو مخفی می کنه (Animation hide) و دوباره با همون طرق بالا نشون میده.
مشکل کوچیکه من اینه که بجای اینکه قبل از محاسبه مقادیر جدید متن مخفی بشه بعد از محاسبه این اتفاق میوفته.
چطوری میتونم این مشکل رو حل کنم؟

کد صفحه ی html:


<html><head><title>AJAX Post test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

function readInput() {
argument01 = $("#exampleForm input[name='arg1']").val();
argument02 = $("#exampleForm input[name='arg2']").val();

$('#exampleForm').fadeOut("slow");
$('#mysubmit').fadeOut("slow");

setInterval(function(){

$('#answer').animate({
left: '+=50',
height: 'hide'
}, 500);

$(function callAjaxAddition() {

$.ajax({
type: "POST",
url: "sum.php",
data: {argument1: argument01 ,argument2: argument02 },
success: function(data) {

$("#answer").html('<ul><li>'+data+'</li></ul>');
}
});
return false;
})

$('#answer').delay(500).fadeIn().animate({
left: '+=50',
height: 'show'
}, 500);

argument02 = Number(argument02) + 1;

},3000);

}

</script>
</head>
<br />
<body><div id="exampleForm">
<input name="arg1" id="yeid" /> + <input name="arg2"> = </div><div id="answer"></div>
<button id="mysubmit" onClick="readInput()">Click Me to Add</button>
</body></html>
کد فایل php:



<?php
$a=0;
$v=$_POST['argument1'];
$s=$_POST['argument2'];
$a = $v + $s;
echo $a;
?>


ممنون
jalil_gh
شنبه 01 تیر 1392, 23:28 عصر
چون مخفی کردن عنصر مورد نظر ۵۰۰ میلی ثانیه طول میکشه و وقتی که این برنامه رو رو localhost اجرا میکنید جواب قبل از ۵۰۰ میلی ثانیه برمیگرده و نمایش داده میشه. در نتیجه اول جواب نمایش داده میشه و بعد کار مخفی کردن به اتمام میرسه.
من کد شما رو اینجوری تغییر دادم.
function readInput() {
argument01 = $("#exampleForm input[name='arg1']").val();
argument02 = $("#exampleForm input[name='arg2']").val();

$('#exampleForm').fadeOut("slow");
$('#mysubmit').fadeOut("slow");

setInterval(function(){

$.ajax({
type: "POST",
url: "sum.php",
data: {argument1: argument01 ,argument2: argument02 },
success: function(data) {
$('#answer').animate({
left: '+=50',
height: 'hide'
}, 500, function () {
$("#answer").html('<ul><li>'+data+'</li></ul>');
$('#answer').delay(500).fadeIn().animate({
left: '+=50',
height: 'show'
}, 500);
});
}
});

argument02 = Number(argument02) + 1;

}, 3000);

}

من همه کدهای مخفی کردن و نمایش دادن رو انتقال دادم به درون تابع success. هر وقت که جواب با موفقیت اومد اول جواب قبلی مخفی میشه و بعد از اینکه کار مخفی کردن به اتمام رسید کار نمایش پیغام جدید اجرا میشه.
saeideros
یک شنبه 02 تیر 1392, 01:14 صبح
خیلی خیلی ممنون. با توضیحت کاملا متوجه شدم مشکل کار چی بود.
saeideros
سه شنبه 04 تیر 1392, 11:29 صبح
بازم ممنونم. مشکل قبلیم کاملا حل شده.

الان ی مشکل دیگه دارم. من می خوام وقتی تو فایل php یه اتفاقی خواستی افتاد Interval متوقف بشه و کل فانکشن readInput دوباره اجرا بشه. واسه همین این فانکشن رو توی کد های جاوا اضافه کردم:

function retry() {
clearInterval(autosender);
setTimeout(readInput(), 3000);
}


autosender اسم Intervalمه.
توی فایل پی اچ پی هم وقتی که اون اتفاق خاص میوفته این خروجی رو میده:


<script> retry();</script>مشکل من اینه که Interval متوقف میشه ولی دوباره را نمیوفته.
مشکل کجاست الان؟
jalil_gh
سه شنبه 04 تیر 1392, 21:36 عصر
تو تابع retry به جای setTimeout از setInterval استفاده کن.
saeideros
چهارشنبه 05 تیر 1392, 00:37 صبح
ممنون ولی این کار جواب نداد.
تا جایی که من میدونم Interval بعد از این که clear میشه دوباره قابل set نیست.
و در ضمن من می خوام کل فانکشن readInput از اول اجرا بشه.
saeideros
شنبه 08 تیر 1392, 15:50 عصر
کسی نظری نداره؟