CODEWITHSUNDEEP
phpjqueryhtml
user6761804
user6761804

Reputation:

JQuery not rendering correctly

Currently, I have a jquery function that I'm trying to get to display the time (the jquery I'm using is the Basic Example found here: http://jonthornton.github.io/jquery-timepicker/). When I implement Mr. Thornton's timepicker, I may click on the input field and a list of time options drops down, however there is no scroll bar/slider on the side of the drop down (as there is in his example). The time value that I select (I can use the mouse scroller to move up and down in the selection) is able to be inserted into my SQL db (via $_POST) with no problems, however, I would like to be able to use some of the other jquery examples listed on Mr. Thornton's site - but none of them (with the exception of the Basic Example - which seems to be only partially working) will work. Attached is the pertinent code. Any input would be much appreciated. Also, I tried going through this tutorial (https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery) and hence I tried adding the script (note: 10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js) but that didn't seem to have any effect.

    <?php
    //DOCTYPE begins header.html
    include_once("includes/header.html");

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!--<style media="screen"></style>-->

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Crime Stoppers</title>

        <!--added 10/9/17-->
        <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
        <!--<script src="js/scripts.js"></script>-->

        <!--Austin's Original links and scripts-->
        <link rel="stylesheet" type="text/css" href="./styles/styles.css"/>
        <link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.css"/>
        <link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.min.css"/>
        <link rel="stylesheet" href="./jquery/timepicker/jquery.timepicker.css"/>
        <script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="./jquery/timepicker/jquery.timepicker.js"></script>

        <script type="text/javascript">
            $(function () {
                $('#basicExample').timepicker();
    //            $('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
    //            $('#setTimeExample').timepicker();
    //            $('#setTimeButton').on('click', function (){
    //                $('#setTimeExample').timepicker('setTime', new Date());
    //            });
            });
        </script>

    </head>

    <body>
    <div id="header" align="center"><img src="./images/document.png" alt="header"/></div>

    <div align="center">

            <h1>Crime Stoppers Report</h1>

            <form class="formLayout" action="Violent.php" method="POST">

                <fieldset class="table">
                    <legend>Crime</legend>
                      <div class="tr">
                        <div class="td right">Date of Call:</div>
                        <div class="td"><input type="text" class="datepicker" name="callDate"></div>
                        <div class="td right">Time of Call:</div>
                        <div class="td"><input type="text" id="basicExample" name="callTime"></div>
                    </div>
               </fieldset>
           </form>
     </div>

Upvotes: 1

Views: 787

Answers (2)

NYG
NYG

Reputation: 1817

Your problem is probably about calling the JavaScript functions before the document is fully loaded.

$(function() {
   $(document).ready(function() {
      // Your code here
   }
});

It is always best practice to use JavaScript only when the document is ready (a.k.a. document.onload event), replaced by jQuery's $(document).ready() event.

Upvotes: 1

Patrick Goode
Patrick Goode

Reputation: 1452

The following code displays the scroll bar for me, as well as enables basic timepicker, as well as the set date example. Its not every example, but will get you on your way

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Crime Stoppers</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/jquery.timepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.timepicker.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#basicExample').timepicker();
            $('#setTimeButton').on('click', function () {
                $('#basicExample').timepicker('setTime', new Date());
            })
        });
    </script>
</head>
<body>
    <div id="header" align="center"><img src="./images/document.png" alt="header" /></div>
    <div align="center">
        <h1>Crime Stoppers Report</h1>
        <form class="formLayout" action="Violent.php" method="POST">
            <fieldset class="table">
                <legend>Crime</legend>
                <div class="tr">
                    <div class="td right">Date of Call:</div>
                    <div class="td"><input type="text" class="datepicker" name="callDate"></div>
                    <div class="td right">Time of Call:</div>
                    <div class="td"><input type="text" id="basicExample" name="callTime"></div>
                </div>
            </fieldset>
        </form>
        <button id="setTimeButton">Set current time</button>
    </div>
</body>
</html>

Upvotes: 1

Related Questions