مشكلة في تعارض أكواد جافاسكربت

Hamada Ahmed · 29 يوليو 2021

السلام عليكم

لدي اكواد احدها يرسل اوامر لاظهار اشعارات الرسائل والاخر لاظهار الرسائل والتحديث التلقائي للصفحة والتحريك التلقائي للشريط الجانبي كيف يمكن دمج الاكواد معا

سوف ارفق المشروع كاملا ايضا

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
 function load_unseen_notification(view = '')
 {
  $j.ajax({
   url:"show_messages_menu.php",
   method:"POST",
   data:{view:view},
   dataType:"json",
   success:function(data)
   {
    $j('.dropdown-menu').html(data.notification);
    if(data.unseen_notification > 0)
    {
     $j('.count').html(data.unseen_notification);
    }
   }
  });
 }
 load_unseen_notification();
 $j('#messages_form').on('submit', function(event){
  event.preventDefault();
  if($j('#username').val() != ''&& $j('#message').val() != '')
  {
   var form_data = $j(this).serialize();
   $j.ajax({
    url:"send_messages_form.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
	 $j('#messages_form')[0].reset();
     load_unseen_notification();
    }
   });
  }
  else
  {
   alert(" رسالة فارغة رجاءا اكتب شىء ");
  }
 });
 $j(document).on('click', '.dropdown-toggle', function(){
  $j('.count').html('');
  load_unseen_notification('yes');
 });
 setInterval(function(){ 
  load_unseen_notification();;
 }, 1000); 
});
</script>

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
	//##### Add record when Add Record Button is click #########
	$j("#messages_form").submit(function(e) {
	e.preventDefault();
	//build a post data structure
	var username = $j("#my_username").val(),
		 message = $j("#my_message").val();	
		   if (message == '') {
			alert(" رجاءا اكتب رسالة ");
			return false;
				}
			jQuery.ajax({
			type: "POST", // Post / Get method
			url: "send_messages_form.php", //Where form data is sent on submission
			dataType: "text", // Data type, HTML, json etc.
			data: {
		    username: username,
			message: message,
				  }, //Form variables
			success: function(response) {
			$j("#norec").hide();
			$j("#div_show_message").append(response);
			$j('#messages_form').trigger('reset');
					},
				error: function(xhr, ajaxOptions, thrownError) {
				alert(thrownError);
					}
				});
			});
		});
const messages = document.getElementById('div_show_message');
function appendMessage() {
const message = document.getElementsByClassName('message')[0];
const newMessage = message.cloneNode(true);
messages.appendChild(newMessage);
}
function getMessages() {
// قبل الحصول على رسائلك.
shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
// بعد استلام رسائلك.
if (!shouldScroll) {
scrollToBottom();
  }
}
function scrollToBottom() {
messages.scrollTop = messages.scrollHeight;
}
scrollToBottom();
setInterval(getMessages, 1000);
</script>

project.rar

Adnane Kadri · 29 يوليو 2021

الكود خاصتك غير منظم جيدا و لذلك هو غير واضح أو غير قابل للقراءة بشكل عادي . و لكن لتنفيذ الفكرة التي تصفها يمكنك عمل تحديث للصفحة و التحريك التلقائي لشريط التمرير بعد نجاح اظهار الرسائل .

و لنتأكد من إتباع مبدأ فصل الاهتمامات لتنظيم العملية أكثر , سيتبع الكود المنطق الموصوف سابقا على نحو مشابه :

function adjustScroll() {}

function loadUnseenNotifications() {


    // بعد ارسال طلب الاجاكس لتحميل اشعار بالرسائل الغير مقروءة
    if (data.unseen_notification > 0) {
        $j('.count').html(data.unseen_notification);

        // تحميل الرسائل و عرضها ضمن الشاشة ان كانت الرسائل أكثر من 1
        loadMessages();
    }
}

function loadMessages() {
    // بعد تحميل الرسائل نحتاج تحديث الصفحة و عمل الاسكرول التلقايئ

    adjustScroll();
}



setInterval(function() {
    loadUnseenNotifications();
}, 1000);

أي :

يتم التحقق كل ثانية إن كان هنالك إشعارات رسائل غير مقروءة .
ان كان نعم سيتم تحديث عد الاشعارات غير المقروءة + تحميل رسائل جديدة .
سيقوم تحميل رسائل جديدة تلقائيا بعد انتهاء طلب الأجاكس بتحديث الصفحة و عمل اسكرول تلقائي للأسفل لاخر رسالة تم تحميلها .

و رغم أن تطبيقات الدردشة تستعمل تقنيات أحدث إلا أنه يعتبر تطبيقا عمليا جيدا . بالطبع فإن العملية وصفية , لكن يمكنك صياغة الكود الخاص بك وفق الخطوات السابقة .

Adnane Kadri · 30 يوليو 2021

بتاريخ 27 دقائق مضت قال Hamada Ahmed:

الكود كالتالي :

لكن كيف يمكن ان نضمن الكود التالي فيه :

كون الدالتين تستعملان نفس الحدث فلن نحتاج إلا لوضعهما بالمكان الصحيح بدل تكرار الكود :

أي بعد نجاح طلب الأجاكس , و المقصود هنا هو التابع success .

نقوم في الكود الأول بإرسال طلب أجاكس لتخزين بيانات الرسالة بعد تقديم النموذج , لاحظ :

 $j('#messages_form')
    .on('submit', function(event) {
       event.preventDefault();
       if ($j('#username')
          .val() != '' && $j('#message')
          .val() != '') {
          var form_data = $j(this)
             .serialize();
          $j.ajax({
             url: "send_messages_form.php",
             method: "POST",
             data: form_data,
             success: function(data) {
                $j('#messages_form')[0].reset();
                load_unseen_notification();
             }
          });
       } else {
          alert(" رسالة فارغة رجاءا اكتب شىء ");
       }
    });

في حين أننا نقوم بعرض رسالة في قسم الرسائل في النجاح في الكود الثاني , لاحظ :

success: function(response) {         
   $j("#norec")
      .hide();         
   $j("#div_show_message")
      .append(response);         
   $j('#messages_form')
      .trigger('reset');               
},             error: function(xhr, ajaxOptions, thrownError) {            
   alert(thrownError);               
}

أي أن دمج الكودين لن يكون إلا في ما بعد نجاح طلب الأجاكس , و بالتالي :

$j('#messages_form')
   .on('submit', function(event) {
      event.preventDefault();
      if ($j('#username')
         .val() != '' && $j('#message')
         .val() != '') {
         var form_data = $j(this)
            .serialize();
         $j.ajax({
            url: "send_messages_form.php",
            method: "POST",
            data: form_data,
            success: function(data) {
               $j('#messages_form')[0].reset();
               load_unseen_notification();

               // عرض الرسالة 
               $j("#norec")
                  .hide();
               $j("#div_show_message")
                  .append(data);
               $j('#messages_form')
                  .trigger('reset');
            },
            // إضافة حالة فشل الطلب
            error: function(xhr, ajaxOptions, thrownError) {
               alert(thrownError);
            }

         });
      } else {
         alert(" رسالة فارغة رجاءا اكتب شىء ");
      }
   });

ثم كخطوة أخيرة لن تحتاج إلا تحريك الشريط الجانبي للأسفل , و بالطبع سيكون ذلك بعد نجاح طلب الأجاكس , أي أن العملية ستتبع منطقا واحد . وهو نفس المنطق المتبع في الكود المرفق .

يمكنك المحاولة بقيام ذلك ثم سيمكن مساعدتك في حالة الاستعصاء .

Hamada Ahmed · 30 يوليو 2021

بتاريخ 20 ساعات قال Adnane Kadri:
الكود خاصتك غير منظم جيدا و لذلك هو غير واضح أو غير قابل للقراءة بشكل عادي . و لكن لتنفيذ الفكرة التي تصفها يمكنك عمل تحديث للصفحة و التحريك التلقائي لشريط التمرير بعد نجاح اظهار الرسائل .

و لنتأكد من إتباع مبدأ فصل الاهتمامات لتنظيم العملية أكثر , سيتبع الكود المنطق الموصوف سابقا على نحو مشابه :
function adjustScroll() {}

function loadUnseenNotifications() {


    // بعد ارسال طلب الاجاكس لتحميل اشعار بالرسائل الغير مقروءة
    if (data.unseen_notification > 0) {
        $j('.count').html(data.unseen_notification);

        // تحميل الرسائل و عرضها ضمن الشاشة ان كانت الرسائل أكثر من 1
        loadMessages();
    }
}

function loadMessages() {
    // بعد تحميل الرسائل نحتاج تحديث الصفحة و عمل الاسكرول التلقايئ

    adjustScroll();
}



setInterval(function() {
    loadUnseenNotifications();
}, 1000);
أي :

يتم التحقق كل ثانية إن كان هنالك إشعارات رسائل غير مقروءة .

ان كان نعم سيتم تحديث عد الاشعارات غير المقروءة + تحميل رسائل جديدة .

سيقوم تحميل رسائل جديدة تلقائيا بعد انتهاء طلب الأجاكس بتحديث الصفحة و عمل اسكرول تلقائي للأسفل لاخر رسالة تم تحميلها .

و رغم أن تطبيقات الدردشة تستعمل تقنيات أحدث إلا أنه يعتبر تطبيقا عمليا جيدا . بالطبع فإن العملية وصفية , لكن يمكنك صياغة الكود الخاص بك وفق الخطوات السابقة .

عذرا اخي انا مبتديء في البرمجة خاصة الجافاسكربت

هل تتفضل اخي الكريم - المشروع في المرفقات هل تتكرم وتعدل الاكواد .

Adnane Kadri · 30 يوليو 2021

بتاريخ 29 دقائق مضت قال Hamada Ahmed:

عذرا اخي انا مبتديء في البرمجة خاصة الجافاسكربت

هل تتفضل اخي الكريم - المشروع في المرفقات هل تتكرم وتعدل الاكواد .

من الطبيعي جدا أن تجد بعض الصعوبة في عمل أي تطبيق عملي , ولكنه سيجب عليك تخطي هاته الصعوبة بالمحاولة و التكرار . و لذلك فإنه لن يكون لتقديم الكود أي منفعة .

عوضا عن ذلك يمكنك الإنطلاق بالفعل في صياغة الكود الخاص بك , و سنساعدك في ذلك .

Hamada Ahmed · 30 يوليو 2021

بتاريخ 3 ساعات قال Adnane Kadri:

من الطبيعي جدا أن تجد بعض الصعوبة في عمل أي تطبيق عملي , ولكنه سيجب عليك تخطي هاته الصعوبة بالمحاولة و التكرار . و لذلك فإنه لن يكون لتقديم الكود أي منفعة .

عوضا عن ذلك يمكنك الإنطلاق بالفعل في صياغة الكود الخاص بك , و سنساعدك في ذلك .

الكود كالتالي :

<div class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown">
      <div class="label count"></div>
      <div class="glyphicon" title="الرسائل"></div>
   </a>
   <div class="dropdown-menu"></div>
</div>
<script>
   var $j = jQuery.noConflict();
   $j(document)
      .ready(function() {

         function load_unseen_notification(view = '') {
            $j.ajax({
               url: "show_messages_menu.php",
               method: "POST",
               data: {
                  view: view
               },
               dataType: "json",
               success: function(data) {
                  $j('.dropdown-menu')
                     .html(data.notification);
                  if (data.unseen_notification > 0) {
                     $j('.count')
                        .html(data.unseen_notification);
                  }
               }
            });
         }

         load_unseen_notification();

         $j('#messages_form')
            .on('submit', function(event) {
               event.preventDefault();
               if ($j('#username')
                  .val() != '' && $j('#message')
                  .val() != '') {
                  var form_data = $j(this)
                     .serialize();
                  $j.ajax({
                     url: "send_messages_form.php",
                     method: "POST",
                     data: form_data,
                     success: function(data) {
                        $j('#messages_form')[0].reset();
                        load_unseen_notification();
                     }
                  });
               } else {
                  alert(" رسالة فارغة رجاءا اكتب شىء ");
               }
            });

         $j(document)
            .on('click', '.dropdown-toggle', function() {
               $j('.count')
                  .html('');
               load_unseen_notification('yes');
            });

         setInterval(function() {
            load_unseen_notification();;
         }, 5000);
      });
</script>

لكن كيف يمكن ان نضمن الكود التالي فيه :

success: function(response) {         
   $j("#norec")
      .hide();         
   $j("#div_show_message")
      .append(response);         
   $j('#messages_form')
      .trigger('reset');               
},             error: function(xhr, ajaxOptions, thrownError) {            
   alert(thrownError);               
}

كذلك كيف نضمن كود التحريك التلقائي للشريط الجانبي

@Adnane Kadri قمت بتعديل الكود لكن مشكلتي هي التحريك التلقائي للشريط الجانبي مالطريقة

</script>

تم التعديل في 30 يوليو 2021 بواسطة Adnane Kadri
وضع الأكواد بمكانها

Hamada Ahmed · 30 يوليو 2021

بتاريخ 5 دقائق مضت قال Adnane Kadri:

كون الدالتين تستعملان نفس الحدث فلن نحتاج إلا لوضعهما بالمكان الصحيح بدل تكرار الكود :

أي بعد نجاح طلب الأجاكس , و المقصود هنا هو التابع success .

نقوم في الكود الأول بإرسال طلب أجاكس لتخزين بيانات الرسالة بعد تقديم النموذج , لاحظ :


 $j('#messages_form')
    .on('submit', function(event) {
       event.preventDefault();
       if ($j('#username')
          .val() != '' && $j('#message')
          .val() != '') {
          var form_data = $j(this)
             .serialize();
          $j.ajax({
             url: "send_messages_form.php",
             method: "POST",
             data: form_data,
             success: function(data) {
                $j('#messages_form')[0].reset();
                load_unseen_notification();
             }
          });
       } else {
          alert(" رسالة فارغة رجاءا اكتب شىء ");
       }
    });

في حين أننا نقوم بعرض رسالة في قسم الرسائل في النجاح في الكود الثاني , لاحظ :


success: function(response) {         
   $j("#norec")
      .hide();         
   $j("#div_show_message")
      .append(response);         
   $j('#messages_form')
      .trigger('reset');               
},             error: function(xhr, ajaxOptions, thrownError) {            
   alert(thrownError);               
}

أي أن دمج الكودين لن يكون إلا في ما بعد نجاح طلب الأجاكس , و بالتالي :


$j('#messages_form')
   .on('submit', function(event) {
      event.preventDefault();
      if ($j('#username')
         .val() != '' && $j('#message')
         .val() != '') {
         var form_data = $j(this)
            .serialize();
         $j.ajax({
            url: "send_messages_form.php",
            method: "POST",
            data: form_data,
            success: function(data) {
               $j('#messages_form')[0].reset();
               load_unseen_notification();

               // عرض الرسالة 
               $j("#norec")
                  .hide();
               $j("#div_show_message")
                  .append(data);
               $j('#messages_form')
                  .trigger('reset');
            },
            // إضافة حالة فشل الطلب
            error: function(xhr, ajaxOptions, thrownError) {
               alert(thrownError);
            }

         });
      } else {
         alert(" رسالة فارغة رجاءا اكتب شىء ");
      }
   });

ثم كخطوة أخيرة لن تحتاج إلا تحريك الشريط الجانبي للأسفل , و بالطبع سيكون ذلك بعد نجاح طلب الأجاكس , أي أن العملية ستتبع منطقا واحد . وهو نفس المنطق المتبع في الكود المرفق .

يمكنك المحاولة بقيام ذلك ثم سيمكن مساعدتك في حالة الاستعصاء .

كل شىء تمام يتبقى تحريك الشريط الجانبي

شىء اخر على السيرفر المحلي عندما استخدم متصفحين مختلفين واقوم بارسال رسالة من مستخدم الى اخر باستخدام المتصفحين كنت اظن ان الرسالة الواردة سوف تظهر تلقائيا لكن للاسف يظهر الاشعار ولا تظهر الرسالة المرسلة تلقائيا الا فى المتصفح المرسلة منه الرسالة والمتصفح الاخر يحتاج الى اعادة تحميل - ما المشكلة في ذلك

مشكلة في تعارض أكواد جافاسكربت

السؤال

Hamada Ahmed

رابط هذا التعليق

شارك على الشبكات الإجتماعية

6 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hamada Ahmed

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hamada Ahmed

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hamada Ahmed

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية