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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Crime Stoppers</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><linkrel="stylesheet"type="text/css"href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.css" /><scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.js"></script><scripttype="text/javascript">

        $(document).ready(function () {
            $('#basicExample').timepicker();
            $('#setTimeButton').on('click', function () {
                $('#basicExample').timepicker('setTime', newDate());
            })
        });
    </script></head><body><divid="header"align="center"><imgsrc="./images/document.png"alt="header" /></div><divalign="center"><h1>Crime Stoppers Report</h1><formclass="formLayout"action="Violent.php"method="POST"><fieldsetclass="table"><legend>Crime</legend><divclass="tr"><divclass="td right">Date of Call:</div><divclass="td"><inputtype="text"class="datepicker"name="callDate"></div><divclass="td right">Time of Call:</div><divclass="td"><inputtype="text"id="basicExample"name="callTime"></div></div></fieldset></form><buttonid="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"