هل تريدون ان اضع هذا الدرس
استخدام الجيكوري في ادخال البيانات واستعراضها بدون الانتقال لصفحة
عموما معكم اخوكم saudi.ok كنت اعطي دروس كثيرة عن الجيكوري في معهد ترايدنت ولي دروس كثيرة في php لكن للاسف ترايدنت متوقف لاني كنت اريد نسخ جميع الدروس اللي قدمتها وقدمت افكار برمجية كثيرة في ترايدنت
ركزوا معي
حنا نمتلك فورم ارسال بيانات
وليكون فيه الاسم والباسورد والايميل ونعطي لكل عنصر id
مثال
الان عندنا فورم حطيت فيه id =user id=pass id=mail
لاحظوا ان الاكشن في الفورم خليتها كذا action="#" لا تحط رابط صفحة php خليه #
الان انت تروح تعمل صفحة php لادخال البيانات الي القاعدة وتجهزها وتسميها مثلا insert.php
الان تعمل div فيه اكلاس اسمه text_box يظهر رسائل من الجيكوري بصفحة الفورم
الان نأتي الي صفحة الجيكوري التي تلعب دور الوسيط ترسل البيانات الي insert.php
وتجلب الرسائل من صفحة insert.php م
ركز معي اول شي لازم تضمن مكتبة الجيكوري بنفس صفحة فورم الارسال بالطريقة هذي
الان نفتح صفحة جديدة بالمحرر من نوع js
ونكتب الترويسة حقت الجيكوري ونكتب بداخلها الاكواد
$(document).ready(function(){ بداية الترويسة /كتب الاكواد هنا/ /لان نقوله اذا تم الضغط على زر sumbit/
$('#form').submit(function(){
/لان نعمل شروط نتاكد من ان الحقول ليست فارغه/ /قبلها نعمل متغيرات نضع فيها قيمة input
var user =$('#user').val(); var pass =$('#pass').val(); var mail = $('#mail').val(); val تعني value للحقل فهمتوا
الان نعمل الشروط لتاكد من if(user==""){
$('.text_box').html("this user null").fadeIn(500).fadeOut(1000);
return false;
}else if(pass==""){
$('.text_box').html('this password null').fadeIn(1000).fadeOut(500);
return false;
}else if(comm==""){
$('.text_box').html('this mail null').fadeIn(1000).fadeOut(1000);
return false;
}
// بعد الانتهاء والتاكد من ان المستخدم قام بتعبيت البيانات الان نجهز البيانات ونضعها في متغير var x ={'user':user,'pass':pass,'mail':mail } ;
الان نقوله ارسلها الي صفحة insert.php
$.post(page_file,x,function(date){
هنا قلنا له من خلال $.post ارسلها الي insert.php مع البيانات المخزنة في المتغير x واجلب الرسائل من صفحة insert في date
الان نستعرضها
$(".text_box").html(date).fadeIn(500).fadeOut(1000);
return false;
});
return false;
});
}); نهاية الترويسة
$(document).ready(function(){
$('#form').submit(function(){
var user =$('#user').val();
var pass =$('#pass').val();
var img = $('#img').val();
var comm = $('#comm').val();
//if null input///////////
if(user==""){
$('.text_box').html(text_name).fadeIn(500).fadeOut(1000);
return false;
}else if(pass==""){
$('.text_box').html(text_pass).fadeIn(1000).fadeOut(500);
return false;
}else if(comm==""){
$('.text_box').html(text_comm).fadeIn(1000).fadeOut(1000);
return false;
}else if(img==''){
$('.text_box').html(text_img).fadeIn(1000).fadeOut(1000);
return false;
}
//===================================================
//send_date_to_mysql/////////
var x ={'user':user,'pass':pass,'mail':mail } ;
$.post(insert,function(date){
$(".text_box").html(date).fadeIn(500).fadeOut(1000);
return false;
});
return false;
});
return false;
/////==========================================
});
التعليقات