CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
TheWebDev
TheWebDev

Reputation: 37

Load Javascript on page load

How can I load this javascript modal on page load? It's from the plugin "sweet alert". I'm really bad with javascript. Any advice will surely help!

<script>
$(function () {

    $('.demo1').click(function(){
        swal({
            title: "Welcome in Alerts",
            text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
        });
    });

});

Upvotes: 1

Views: 2888

Answers (4)

Minksmnm
Minksmnm

Reputation: 264

<script>
 $(document).ready(function(){
   swal({
  title: "Welcome in Alerts",
  text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
   });
 });
</script>

just add this above script , this will trigger your sweet alert on the page load.

Upvotes: 0

brk
brk

Reputation: 50346

Since you are using jquery you can use document.ready to wrap your code 

<script>
$(document).ready(function() {
  $('.demo1').click(function() {
    swal({
      title: "Welcome in Alerts",
      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    });
  });
})
</script>

Now if you are putting this snippets near the closing body you can avoid document.ready 

<body>
   //rest of the dom element
   <script>
    $('.demo1').click(function() {
        swal({
          title: "Welcome in Alerts",
          text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
        });
      });
    </script>
</body>

Upvotes: 4

claudios
claudios

Reputation: 6656

$(function(){
 $('button').click(function(){
   swal("Oops! you clicked me.")
 })

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>



<button>Click me</button>

In-order to run the sweetalert you first need to call it's resources and also load the jQuery like below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
</head>
<body>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</body>
</html>


$(function(){
  swal("Hi! I'm loaded on doc ready.");
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

Upvotes: 0

Soviut
Soviut

Reputation: 91722

Assuming swal() is what opens your modal, simply move it outside your click event. Your current code only runs the swal() function once the element with the .demo1 class has been clicked. By moving it outside the click handler function, it gets run as soon as the page is ready.

$(function() {
    swal({
        title: 'welcome',
        text: 'ding!'
    });
});

Upvotes: 0

Related Questions