كيفية إستعمال مكتبة sweetAlert في الجافا سكريبت

محمود سعداوي2 · 13 يونيو 2022

أريد إستعمال sweetAlert في مشروعي عبر ربطها بملف خارجي "script.js" و باستعمال "cdn link"

للتوضيح شيفرة html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>

    <form class="row g-3">
        <div class="col-md-4">
          <label for="validationDefault01" class="form-label">First name</label>
          <input type="text" class="form-control" id="validationDefault01">
        </div>
        <div class="col-md-4">
          <label for="validationDefault02" class="form-label">Last name</label>
          <input type="text" class="form-control" id="validationDefault02">
        </div>
        <div class="col-12">
          <button class="btn btn-primary" type="submit">Submit form</button>
        </div>
      </form>
    

    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.4.17/sweetalert2.min.js" integrity="sha512-Kyb4n9EVHqUml4QZsvtNk6NDNGO3+Ta1757DSJqpxe7uJlHX1dgpQ6Sk77OGoYA4zl7QXcOK1AlWf8P61lSLfQ==" crossorigin="anonymous"></script>
</body>
</html>

شيفرة javascript

const form = document.querySelector('form')
form.addEventListener('submit', (e)=>{
    e.preventDefault()
    Swal.fire(
        'Good job!',
        'You clicked the button!',
        'success'
      )
})

لم تظهر لي النافذة المنبثقة بل كانت النتيجة

محمد أبو عواد · 13 يونيو 2022

المشكلة في رابط cdn الخاص بمكتبة sweetAlert , يمكنك استخدام رابط cdn التالي الخاص بالمكتبة

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

ربما سوف تواجهك مشكلة في الرابط الخاص بهم لذلك سوف ارفق لك ملف المكتبة
aaa.js

محمود سعداوي2 · 13 يونيو 2022

بتاريخ 8 دقائق مضت قال محمد أبو عواد:
المشكلة في رابط cdn الخاص بمكتبة sweetAlert , يمكنك استخدام رابط cdn التالي الخاص بالمكتبة
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
ربما سوف تواجهك مشكلة في الرابط الخاص بهم لذلك سوف ارفق لك ملف المكتبة
aaa.js

يعني لابد من تحميل المكتبة

محمد أبو عواد · 13 يونيو 2022

بتاريخ الآن قال محمود سعداوي:

يعني لابد من تحميل المكتبة

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

محمود سعداوي2 · 13 يونيو 2022

بتاريخ الآن قال محمد أبو عواد:

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

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

من ناحية السرعة. أيهما أفضل تحميل الملف أم الرابط.

شكرا.

محمد أبو عواد · 13 يونيو 2022

بتاريخ 6 دقائق مضت قال محمود سعداوي:

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

من ناحية السرعة. أيهما أفضل تحميل الملف أم الرابط.

شكرا.

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

كيفية إستعمال مكتبة sweetAlert في الجافا سكريبت

السؤال

محمود سعداوي2

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

Recommended Posts

محمد أبو عواد

محمود سعداوي2

محمد أبو عواد

محمود سعداوي2

محمد أبو عواد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية