اسباب عدم عمل كود أجاكس و تظهر المشكلة Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user

[Our World عالمنا]

ارغب فى عمل select box وقمت باستخدام ajax ..هذا هو الكود  ولكنه لا يعمل.. ما الخطأ؟

<h1 class="h1-style">Add new Listing</h1>
<div class="select-category-container">
  <select name="cat" id="Cat">
    <option value=" "> choose category</option>
    <?php
    //connect to db to fetch fields
    $stmt=$conn->prepare(" SELECT * FROM categories ");
    $stmt->execute();
    $fetched=$stmt->fetchAll();
    foreach ($fetched as  $catf) {
      echo "<option class='option-parent' value='".$catf['cat_id']."'>".$catf['name']. "</option>";
    }
    ?>                    
  </select>
  <!--sub categories -->
  <select name="cat1" id="sub">
    <option value=" "> choose </option>
  </select>
  <!--subsub categories -->
  <select name="cat2" id="subsub">
    <option value=" "> choose </option>
  </select>
</div>

<div id="show"></div>

<!--ajax corner -->
<script type="text/javascript" src="<?php echo $js;?>jquery-3.6.0.min.js"></script>

<script>
  $(document).ready(function(){
    //ajax call 1
    $("#Cat").on("change", function(){
      var Cat=$(this).val();
      $.ajax({
        url:"catSelect.php",
        data:{sent:Cat},
        success: function(data){
          $("#sub").html(data);
        }
      });
    });

    //ajax  2
    $("#sub").on("change", function(){
      var Cat=$('#Cat').val();
      var sub=$(this).val();
      $.ajax({
        url:"catSelect.php",
        data:{sent2:Cat,sent3:sub},
        success: function(data){
          $("#subsub").html(data);
        }
      });
    });
  });

  =============================================

    <?php

    ob_start();
    session_start();
    $title='catSelect';
    include 'init.php';
    if (isset($_SESSION['username'])) {    


      if (isset($_GET['sent'])  && !empty($_GET['sent']) ) {
        $cat=$_GET['sent'];
        $stmt=$conn->prepare(" SELECT * from sub where sub.cat_id=? ");
        $stmt->execute(array($cat));
        $subs=$stmt->fetchAll();
        $count=$stmt->rowCount();

        if($count>0){
          foreach ($subs as $sub) {
            echo "<option value='".$sub['sub_id']."'>".$sub['sub_name']."</option>";
          }
        }

      }           

      if (isset($_GET['sent2']) && isset($_GET['sent3']) ) {
        //get2
        $Cat=$_GET['sent2'];
        $sub=$_GET['sent3'];
        $stmt=$conn->prepare(" SELECT * from subsub where subsub.sub_id=?
                      and subsub.cat_id=? ");
        $stmt->execute(array($sub,$Cat));
        $subsub=$stmt->fetchAll();
        $count=$stmt->rowCount();

    ?> <option value="" disabled="" >Chooserrrr</option>  <?php
        if($count>0){
          foreach ($subsub as $sub2) {
            echo "<option value='".$sub2['subsub_id']."'>".$sub2['subsub_name']."  </option>";
          }
        }

      }
    }else{
      header("location:login.php");
      exit();
    }
    include  $tmpl ."footer.inc";
    ob_end_flush();

 

تم التعديل في 18 فبراير 2022 بواسطة Wael Aljamal
تنسيق الشيفرة

[Wael Aljamal]

ما المشكلة بالضبط؟ و كيف تظهر النتائج و هل يظهر أي خطأ في Console في المتصفح؟

[Our World عالمنا]

ال select box لا تجلب بيانات الجدول الفرعي

*DevTools failed to load source map: Could not load content for http://localhost:82/site/layout/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

*

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/ .

AFFECTED RESOURCES

 

[Wael Aljamal]

بتاريخ 4 دقائق مضت قال Our World عالمنا:

ال select box لا تجلب بيانات الجدول الفرعي

أرجو محاولة إضافة الوسيط async: true, 

$.ajax({
   async: true, 

لجميع طلبات AJAX لديك وإعادة التجريب

[Our World عالمنا]

بتاريخ 4 دقائق مضت قال Wael Aljamal:

أرجو محاولة إضافة الوسيط async: true, 

$.ajax({
   async: true, 

لجميع طلبات AJAX لديك وإعادة التجريب

المفروض ان ده موجود بشكل افتراضي

بتاريخ 6 دقائق مضت قال Wael Aljamal:

أرجو محاولة إضافة الوسيط async: true, 

$.ajax({
   async: true, 

لجميع طلبات AJAX لديك وإعادة التجريب

قمت بعمل ذلك ولا زالت المشكلة قائمة

[Wael Aljamal]

بتاريخ 2 دقائق مضت قال Our World عالمنا:

المفروض ان ده موجود بشكل افتراضي

إن لم تستطع حل المشكلة يجب إرفاق شيفرة PHP المسؤولة ليصبح لدي فهم أفضل للمشكلة، يجب أن أستطيع تجربة الشيفرة لحل المشكلة

تأكد من أن ملف PHP يعمل عند الاتصال به

[Our World عالمنا]

بتاريخ 3 دقائق مضت قال Wael Aljamal:

إن لم تستطع حل المشكلة يجب إرفاق شيفرة PHP المسؤولة ليصبح لدي فهم أفضل للمشكلة، يجب أن أستطيع تجربة الشيفرة لحل المشكلة

تأكد من أن ملف PHP يعمل عند الاتصال به

مكتوبة في الكود بأعلى..الملف كان يعمل بالفعل ولكنه توقف

تم التعديل في 18 فبراير 2022 بواسطة Our World عالمنا
زيادة توضيح

[Wael Aljamal]

بتاريخ 2 دقائق مضت قال Our World عالمنا:

مكتوبة في الكود بأعلى

هل يعيد الاتصال أي بيانات مثلاً عند تجيب وضع التالي:

success: function(data){
         console.log(data);
}

في طلبات AJAX.

وفي حال قمت بطلب الملف مباشرة في المتصفح مع تمرير قيمة sent هل يتم عرض أي محتوى؟ 

ربما الاتصال نفسه لا يرسل قيمة ل sent أو غير محملة من قبل

[Our World عالمنا]

بتاريخ 34 دقائق مضت قال Wael Aljamal:

هل يعيد الاتصال أي بيانات مثلاً عند تجيب وضع التالي:

success: function(data){
         console.log(data);
}

في طلبات AJAX.

وفي حال قمت بطلب الملف مباشرة في المتصفح مع تمرير قيمة sent هل يتم عرض أي محتوى؟ 

ربما الاتصال نفسه لا يرسل قيمة ل sent أو غير محملة من قبل

ما يظهر فى الconsole

Unchecked runtime.lastError: The message port closed before a response was received.

Request Method:

GET

Status Code:

302 Found

Remote Address:

[::1]:82

Referrer Policy:

strict-origin-when-cross-origin

Response HeadersView source

Cache-Control:

no-store, no-cache, must-revalidate

Connection:

Keep-Alive

Content-Length:

4484

Content-Type:

text/html; charset=UTF-8

Date:

Fri, 18 Feb 2022 15:58:03 GMT

Expires:

Thu, 19 Nov 1981 08:52:00 GMT

Keep-Alive:

timeout=5, max=100

location:

login.php

Pragma:

no-cache

Server:

Apache/2.4.38 (Win32) OpenSSL/1.1.1a PHP/7.3.2

X-Powered-By:

PHP/7.3.2

Request HeadersView source

Accept:

*/*

Accept-Encoding:

gzip, deflate, br

Accept-Language:

en-US,en;q=0.9

Connection:

keep-alive

Cookie:

PHPSESSID=kii77g4m6vaoi78kv623errqca

Host:

localhost:82

Referer:

http://localhost:82/site/Listing.php

sec-ch-ua:

" Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"

sec-ch-ua-mobile:

?0

sec-ch-ua-platform:

"Windows"

Sec-Fetch-Dest:

empty

Sec-Fetch-Mode:

cors

Sec-Fetch-Site:

same-origin

User-Agent:

Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

X-Requested-With:

XMLHttpRequest

 

[Wael Aljamal]

بتاريخ 9 دقائق مضت قال Our World عالمنا:

nchecked runtime.lastError: The message port closed before a response was received.

مشروعك يعمل على localhost:82  المنفذ 82 تأكد من توجه الطلبات إليه

[Our World عالمنا]

بتاريخ 15 دقائق مضت قال Wael Aljamal:

مشروعك يعمل على localhost:82  المنفذ 82 تأكد من توجه الطلبات إليه

Initializing Control Panel
06:14:24 م  [main]     Windows Version:  Pro  32-bit
06:14:24 م  [main]     XAMPP Version: 7.3.2
06:14:24 م  [main]     Control Panel Version: 3.2.2  [ Compiled: Nov 12th 2015 ]
06:14:24 م  [main]     Running with Administrator rights - good!
06:14:24 م  [main]     XAMPP Installation Directory: "c:\xampp2\"
06:14:24 م  [main]     Checking for prerequisites
06:14:27 م  [main]     All prerequisites found
06:14:27 م  [main]     Initializing Modules
06:14:27 م  [Apache]     Problem detected!
06:14:27 م  [Apache]     Port 80 in use by "Unable to open process" with PID 4!
06:14:27 م  [Apache]     Apache WILL NOT start without the configured ports free!
06:14:27 م  [Apache]     You need to uninstall/disable/reconfigure the blocking application
06:14:27 م  [Apache]     or reconfigure Apache and the Control Panel to listen on a different port
06:14:28 م  [Apache]     XAMPP Apache is already running on port 443
06:14:28 م  [main]     Enabling autostart for module "Apache"
06:14:28 م  [main]     Enabling autostart for module "MySQL"
06:14:28 م  [main]     Starting Check-Timer
06:14:28 م  [main]     Control Panel Ready
06:14:28 م  [Apache]     Autostart aborted: Apache is already running
06:14:28 م  [mysql]     Autostart aborted: MySQL is already running

دى الرسائل اللى عندى فى localhost .. احل المشكلة ازاي؟

[Wael Aljamal]

بتاريخ 5 دقائق مضت قال Our World عالمنا:

دى الرسائل اللى عندى فى localhost .. احل المشكلة ازاي؟

تأكد هل قمت بتشغيل نسختين من برنامج المخدم؟ فإن منفذ الاتصال مستعمل مسبقاً ..

وفي حال لاحظت أن Skype يعمل أرجو إغلاقه من خلال عمل Exit من شريط المهام (الأيقونة)

[Our World عالمنا]

بتاريخ 3 دقائق مضت قال Wael Aljamal:

تأكد هل قمت بتشغيل نسختين من برنامج المخدم؟ فإن منفذ الاتصال مستعمل مسبقاً ..

وفي حال لاحظت أن Skype يعمل أرجو إغلاقه من خلال عمل Exit من شريط المهام (الأيقونة)

كنت استخدم سكايب مسبقا وسبب لي مشكلة .. بدلا من حذفه استخدمت طريقة - لا اتذكرها الان - لتعديل المنفذ من 80 الى 82.. اما الان فليس لدي سكايب من الاساس.. هل تحدث مشكلة اذا حذفت xamp  وقمت بتحميله من جديد؟؟؟

[Wael Aljamal]

بتاريخ الآن قال Our World عالمنا:

كنت استخدم سكايب مسبقا وسبب لي مشكلة .. بدلا من حذفه استخدمت طريقة - لا اتذكرها الان - لتعديل المنفذ من 80 الى 82.. اما الان فليس لدي سكايب من الاساس.. هل تحدث مشكلة اذا حذفت xamp  وقمت بتحميله من جديد؟؟؟

لا تقم بحذف المخدم xamp  ولا يوجد مشكلة من تغيير المنفذ الإفتراضي، لكن بهذه الحالة عليك طلب الصفحات للمخدم المحلي مع إرفاق رقم المنفذ لكل طلبية

http://localhost:82/site/catSelect.php?sent=1
                   ^^^^^ ^^^^^^^^^^^^  ^^^^^^

أرجو طلب الموقع مباشرة في المتصفح، يجب أن تعيد التصنيفات (نتأكد من صحة ملف PHP) بشكل منفصل قبل إعادة النظر في شيفرة أجاكس.

طلب الرابط السابق (بعد أن تقوم بتعديله حسب مسار مشروعك و تأكدك من تشغيل المخدم) يجب أن يعرض معلومات

[Our World عالمنا]

 المشكلة كانت خطأ في صفحة php وتم حلها .. شكرا أخي وشكرا لحسوب.. أنتم موقعي المفضل من الان

تم التعديل في 18 فبراير 2022 بواسطة Our World عالمنا