Home / Questions / 272611
Accepted
josanangel
Asked: 2020-06-18 04:14:12 +0800 CST 2020-06-18 04:14:12 +0800 CST

Problem with JQuery Toast Message, it does not show me messages

  • 772

I am trying to implement a notification system on my web page, and for this I am using the following plugin .

The first thing I did was download the plugin, and insert it into my directory: ../static/notificaciones as shown below:

Image of my website directory

As you can see, the dirfather is WIKI FAMILY .

I changed the name of .zipthe plugin (call it notifications ) so that it would be more comfortable to import it .

Well, to do a test I have created one testing.phpin this directory: WIKI FAMILIA/testing.php , which is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <!-- TOASTR.CSS DEL PLUGIN -->
    <link href="static/notificaciones/toastr.css" rel="stylesheet">
    <script src="static/notificaciones/toastr.js"></script>

</head>
<body>


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Testing</h1>
                <button id="miBoton" class="btn btn-info" click>Float message</button>
            </div>
        </div>
    </div>




    <script
                  src="https://code.jquery.com/jquery-3.4.1.js"
                  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
                  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script
                  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
                  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
                  crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


    <script>
        $("#miBoton").click(function() {

            toastr.warning('Warning');


        });
    </script>

</body>
</html>

I had to do that because it doesn't work for me and I'm trying to see why. In this file testing.php, what I have done has simply been to create a button and make a toaster warning appear when it is pressed in the simplest way possible, since it does not do it for me. I do not know why. Has anyone had a similar problem with this?

jquery

1 Answers

  1. Best Answer

    I put a simple example of handling the plugin. The problem I see in your code is the loading order of the libraries. The plugin toastrneeds to have the library loaded first Jqueryto be able to initialize, in your case you load the JS from first toastrand then the ones from Jquery .

    Another problem you may have is that you are not correctly referencing the location of the directory where you have the plugin.

    <html>
<body>
  <a id='linkButton'>ClickMe</a>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    toastr.options.timeOut = 1500; // 1.5s
    toastr.info('Page Loaded!');
    $('#linkButton').click(function() {
       toastr.success('Click Button');
    });
  });
  </script>
</body>
</html>

    Reference: example

    Example with code from the question

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Testing</h1>
          <button id="miBoton" class="btn btn-info" click>Float message</button>
        </div>
      </div>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>    

    <script>
      $("#miBoton").click(function() {
        toastr.warning('Warning');
      });
    </script>

  </body>
</html>

    • 3