How can i execute two javascript functions

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.

Don't include jQuery more than once. And do include a vaguely-recent version (1.6 is not vaguely recent). — T.J. Crowder
– T.J. Crowder, Commented Mar 2, 2015 at 11:19

T.J. Crowder · Accepted Answer · 2015-03-02 11:33:09Z

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 ids (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).

edited Mar 2, 2015 at 11:33

answered Mar 2, 2015 at 11:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

callshafi Over a year ago

Thanks a lot for your help. Your code is OK but I think the JS I used having some issue. That is why still only one (either date or time) work at a time. However after changed with a new script it is working fine. Thanks once again.

Collectives™ on Stack Overflow

How can i execute two javascript functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related