Skip to content Skip to sidebar Skip to footer
Home / Html / Jquery / Php

JQuery Not Rendering Correctly

Post a Comment
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

Solution 1:

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/timepicker@1.11.12/jquery.timepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/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>

Solution 2:

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.


Post a Comment for "JQuery Not Rendering Correctly"