search

bramp / js-sequence-diagrams

Draws simple SVG sequence diagrams from textual representation of the diagram
https://bramp.github.io/js-sequence-diagrams/
BSD 2-Clause "Simplified" License
7.8k stars 1.08k forks source link

jQuery can't find sequenceDiagram function #223

Closed tolgaulas closed 4 years ago

tolgaulas commented 4 years ago

This code gives error : "test.html:13 Uncaught TypeError: $(...).sequenceDiagram is not a function at test.html:13"

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/snap.svg-min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/sequence-diagram-min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="diagram">A->B: Message</div>
<script>
  var options = {theme: 'simple'};
  $(".diagram").sequenceDiagram(options);
</script>
</body>
</html>
tolgaulas commented 4 years ago

..because, jquery should be loaded first!!! like below

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/webfontloader.min.js"></script>
    <script src="js/snap.svg-min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/sequence-diagram-min.js"></script>
</head>
<body>
        <div class="diagram">
                Title: Simple diagram aasd
                Participant B
                Participant A
                A->B: Message
                B->A: egassem
                C->A: Request token
                A->B: Forward request
                B->>C: Send token
        </div>
        <script>
            $(".diagram").sequenceDiagram({theme: 'simple'});
        </script>
</body>
</html>