我如何执行两个javascript函数

Question

I am new in HTML, PHP. I have build a page with following coding -

<script src="js/jquery.min.js"></script>
<script src="js/timepicki.js"></script>
<link rel="stylesheet" type="text/css" href="css/timepicki.css">
<script>
$(document).ready(function (){
$(".time_element").timepicki();
});
</script>
<script src="jquery-1.6.2.min.js"></script>
<script src="jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqueryCalendar.css">
<script>

   jQuery(function () {
      jQuery( "#datepicker" ).datepicker();
      jQuery( "#datepicker1" ).datepicker();
});
 </script>    

problem is only second one is working. If I put the first portion in the place of second it also work but both together does not. How can I combine those. I tried "body onload" method and also tried "addloadevent" but probably I am not writing the code properly. Any help will be greatly appreciated.

Answer 1

You're including jQuery more than once. Don't do that. Just include it once, then include your plugins. You can leave your ready blocks separate, or combine them, it's up to you.

Here's how I would change that:

In the head :

<link rel="stylesheet" type="text/css" href="css/timepicki.css">
<link rel="stylesheet" type="text/css" href="jqueryCalendar.css">

In the body at the very end prior to the closing </body> tag:

<script src="js/jquery.min.js"></script>
<script src="js/timepicki.js"></script>
<script src="jquery-ui-1.8.15.custom.min.js"></script>
<script>
$(".time_element").timepicki();
$("#datepicker, #datepicker1" ).datepicker();
</script>

...where jquery.min.js is a recent version of jQuery, such as v1.11.2.

Or if you want all the scripts in the head (although that's usually not best practice):

<link rel="stylesheet" type="text/css" href="css/timepicki.css">
<link rel="stylesheet" type="text/css" href="jqueryCalendar.css">
<script src="js/jquery.min.js"></script>
<script src="js/timepicki.js"></script>
<script src="jquery-ui-1.8.15.custom.min.js"></script>
<script>
jQuery(function($) {
  $(".time_element").timepicki();
  $("#datepicker, #datepicker1" ).datepicker();
});
</script>

Other changes I'd probably make:

• Give #datepicker and #datepicker1 a common class rather than id s (as with your .time_element ).

• Combine the CSS into a single, minified file.

• Combine the JS into a single, minified file (or possibly all the JS except for jQuery, and load jQuery from a CDN).