اذهب إلى المحتوى
  • 0

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

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

السؤال

أريد إستعمال 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'
      )
})

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

1.thumb.JPG.ada7122824dd7f32447a0d2270928b25.JPG

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 8 دقائق مضت قال محمد أبو عواد:

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


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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

شكرا.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

شكرا.

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...