Jquery Bracket Displaying White Page

I'm fairly new to HTML/JQuery. I am attempting to use the jquery plugin shown here:

http://www.jqueryscript.net/chart-graph/jQuery-Plugin-For-Customizable-Tournament-Brackets-Bracket.html

However, when I try the code below, I only see a blank white page. Does anyone have any idea why?

I have a folder with my index.html with the below code, as well as jquery-3.1.1.min.js, jquery.bracket.min.js, and jquery.bracket.min.css all in the same folder.

<html>
<head>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>      
    <script type="text/javascript" src="jquery.bracket.min.js"></script>    
    <link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" />
    <script>
        var singleElimination = {
            "teams": [
                    ["Team 1", "Team 2"],
                    ["Team 3", "Team 4"]
                ],
                "results": [
                    [       
                        [   
                            [1, 2],
                            [3, 4] 
                        ],
                        [          
                            [5, 6],
                            [7, 8] 
                        ]
                    ]
                ]
            }

        $('.demo').bracket({
            init: singleElimination
        });
    </script>
</head>
<body>
    <div class="demo">
    </div>
</body>
</html>

Answers 1

  • You must always wrap you jquery code like this:

    jQuery(document).ready(function ($) {
    
      $('.demo').bracket({
        init: singleElimination
      });
    
    });
    

Related Articles