Twitter Bootstrap Question posted in

Flask interfering with jquery colorpicker-Twitter bootstrap

Using: https://github.com/boonep/jquery-hex-colorpicker

Works well until I issue the page in a Flask application, then the error: Uncaught TypeError: jQuery(…).hexColorPicker is not a function.

I have tried moving the script sources around, and chrome says that all sources, css, js, etc are downloading.

I am attaching the page source from Chrome so you can see what Flask stuck in there.

Any help? Thx.

<!DOCTYPE html>
<html>
  <head>
    <title> 
Orerry Dashboard
</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>


<head>
    <title>Dashboard</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="../static/jquery-hex-colorpicker.css" />
    <link rel='stylesheet' href='../static/dashboard.css'/>
    <script src="../static/jquery-hex-colorpicker.min.js"></script>
</head>

<body class="form-dashboard">

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed btn-sm" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Tycho Design, Inc.</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/login">Login</a></li>
            <li><a href="/signup">Sign Up</a></li>
            <li class="active"><a href="/dashboard">Dashboard</a></li>
            <li><a href="/maintenance">Maintenance</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/logout">LogOut</a></li> 
        </ul>
    </div>
            <!--/.nav-collapse -->

</nav>

<div class="container">
    <input id="csrf_token" name="csrf_token" type="hidden" value="IjhkYjFlOWI3YTM4MDhmMDI0ZGU2MTEzZWM4NzEzNjEzMGFkMGI0NDMi.DYdXTg.Cd3U9myTiC_o1nxWZIwIv-YZY0U">

    <h4>Move to Current Time and Date.</h4>
    <form action="" id='currentdate' method="">
            <button type="submit" id='curdate' action= "/move_cur_date" method = 'POST' class="btn btn-success btn-sm" tabindex="1" >Current Date</button>
    </form>
    <hr>
    <p> <h4>Move the Orerry to Any Date:</h4></p>
    <form class='move_it' action="/mov_new_date" method="POST">
        <div style='width: 40%'>

<div class="form-group "><label class="control-label" for="date_togo">YYYY/MM/DD HH:MM:SS</label>

          <input class="form-control" id="date_togo" name="date_togo" type="text" value="">

  </div>

</div>
        <input type="submit" class="btn btn-success btn-sm" name="button_move_it" tabindex="2"></button>
    </form>
    <hr>
    <h4>Other Functions</h4>
    <div class="picker-form-wrapper">
        <form class="picker-form">
            <p>Change Color or Brightness of the Sun:  
            <form class='color_change' action="/color_change" method="POST">
                <input type="text" id="color-picker1"/>
                <input type="submit" class="btn btn-success btn-sm" name="color_picker_btn" tabindex="3"></button>
            </form> 
        </form>
    </div>
    <div id="button-sel" >
    <p>Accelerate the Orerry:   
    <button type="button" id='accelerate' class="btn btn-success btn-sm" tabindex="4"  >Accelerate!</button></p>
    <p>Pause Everything Temporarily!:  
    <button type="button" id='pause' class="btn btn-warning btn-sm" tabindex="7" >Pause</button>Resume:  
    <button type="button" id='resume' class="btn btn-success btn-sm" tabindex="7" >Resume</button></p>
    <p>Send Email to Support:  
    <button type="button" id='semail' onclick= "window.location.href='/contact'"  class="btn btn-warning btn-sm" tabindex="5" >Email</button></p>
    <p>Put the Orerry to Long Term Sleep:  
    <button type="button" id='go_sleep'  class="btn btn-warning btn-sm" tabindex="6" >Go To Sleep!</button>
    Wake Up from Sleep:  
    <button type="button" id='wake_up' class="btn btn-success btn-sm" tabindex="7" >Wake Up!</button></p>
    Shut Down the Computer:  
    <button type="button" id='shut_down_computer'  class="btn btn-danger btn-sm" tabindex="8" >Shut Down!</button></p>
    <p>Reboot the Orerry Program:  
    <button type="button" id='reboot' class="btn btn-danger btn-sm" tabindex="9" >Reboot</button></p>
    <p>Home all Objects:</p>
    <button type="button" id='user_homing' class="btn btn-success btn-sm" tabindex="10"  >Home All!</button></p>
    </div>        
    <p>Responses from Server</p>   
    <textarea name="TextArea1" id="TextArea1" rows="30" style="width: 100%", readonly="True"></textarea>
    </div>
</body>

<script type="text/javascript">

    $(document).ready(function() {
        jQuery(function(){
            jQuery("#color-picker1").hexColorPicker();
            jQuery(".color-picker").hexColorPicker({
                "container":"dialog",
            });
        });
    });

    $(document).ready(function(){
        $('#button-sel').on('click', function(event) {
            var targ = event.target.id;
            //alert("You clicked on: " + targ);
            $.ajax({
                type: 'POST',
                url: targ, 
                data: 'none',
                success: function(result){
                    if (result != ''){
                        var rslt= result;
                        $('#TextArea1').prepend(result);
                }}
            });
    });})

    $(document).ready(function() {
        setInterval(function() {
            $.ajax({
                type: 'POST',
                url: "get_msgs",
                data: 'None',
                success: function(result) {
                    if (result != '')
                        $('#TextArea1').prepend(result);
                    }
             })
        }, 3000);
    });

</script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-
    bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Still same problem: dashboard:109 Uncaught TypeError: jQuery(...).hexColorPicker is not a function

    I placed the scripts and sources into a {{super()}} block and used {% block content %} instead of /body tags, no difference. It appears that the sources inserted at the end of the page by Flask are somehow interfering with the colorpicker js.

    I tried removing the first
    src="https://code.jquery.com/jquery-1.12.4.min.js" since it is the same as inserted by Flask at the bottom, and this caused the colorpicker.js to not load. Since Flask inserts the two sources at the bottom of the page, should I somehow load the colorpicker after the page loads? Just guessing here.

    Chrome debugger shows all sources and scripts downloading.


  2. 0

    Figured it out. Put scripts in Flask super block, and added ‘defer’ to colorpicker.js

    {{super()}}
    <link rel="stylesheet" href="../static/jquery-hex-colorpicker.css" />
    <link rel='stylesheet' href='../static/dashboard.css'/>    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="../static/jquery-hex-colorpicker.min.js" defer></script>
{% endblock %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search