Hi i have now a big project done in angularjs and my index.html file starts to be very long :
<!DOCTYPE html>
<html class="no-js">
<head>
<title>InTouch</title>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Utilise LESS -->
<link rel="stylesheet" href="stylesheets/ngprogress-lite.min.css">
</head>
<body ng-app="InTouch">
<!--<div ng-include="" src="'./partials/header.html'"></div>-->
<div ng-view>
</div>
</div>
<!-- <div id="footer">
<div class="container">
<div ng-include="" src="'./partials/footer.html'"></div>
</div>
</div> -->
<!-- Fix for old browsers -->
<script type="text/javascript" src="javascript/less.min.js"></script>
<script type="text/javascript" src="angularLib/angular.js"></script>
<script type="text/javascript" src="angularLib/angular-animate.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="angularLib/angular-messages.js">
</script>
<script type="text/javascript" type="text/javascript" src="angularLib/angular-route.js"></script>
<script type="text/javascript" src="angularLib/angular-strap.js"></script>
<script type="text/javascript" src="angularLib/angular-strap.tpl.js">
</script>
<script type="text/javascript" src="angularLib/ui-bootstrap.js"></script>
<script type="text/javascript" src="angularLib/angular-css.min.js">
</script>
<script type="text/javascript" src="angularLib/angular-cookies.js"></script>
<script type="text/javascript" src="angularLib/http-auth-interceptor.js"></script>
<script type="text/javascript" src="angularLib/angular-resource.js"></script>
<script type="text/javascript" src="angularLib/angular-file-upload.js"></script>
<script type="text/javascript" src="angularLib/ngprogress-lite.js"></script>
<script type="text/javascript" src="angularLib/ngStorage.js"></script>
<script type="text/javascript" src="angularLib/angular-growl-notifications.js"></script>
<script src="angularLib/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angularConstant/geolocation_msgs.js"></script>
<script type="text/javascript" src="angularConstant/useragentmsgs.js"></script>
<script type="text/javascript" src="angularConstant/config.js"></script>
<script type="text/javascript" src="angularControllers/NavbarAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/AdminNavbarAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/MainHeaderAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/modal/ModalInstanceAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/MainAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/AnnouncesAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ProfileAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ActualityAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/modal/AboutModalAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/HistoricAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/MessageAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/PictureAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ReputationAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/WalletAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/admin/AdminAngCtrl.js">
</script>
<script type="text/javascript" src="angularDirectives/compareToValidatorDrct.js">
</script>
<script type="text/javascript" src="angularDirectives/fmRatingDrct.js"></script>
<script type="text/javascript" src="angularDirectives/onBlurDrct.js"></script>
<script type="text/javascript" src="angularDirectives/onFocusDrct.js"></script>
<script type="text/javascript" src="angularDirectives/emailAvailableValidatorDrct.js"></script>
<script type="text/javascript" src="angularDirectives/userFilterDrct.js"></script>
<script type="text/javascript" src="angularDirectives/fmCheckboxListDrct.js"></script>
<script type="text/javascript" src="angularDirectives/usernameAvailableValidatorDrct.js"></script>
<script type="text/javascript" src="angularDirectives/paginationDrct.js"></script>
<script type="text/javascript" src="angularDirectives/fileUploadDrct.js"></script>
<script type="text/javascript" src="angularDirectives/headerDrct.js"></script>
<script type="text/javascript" src="angularDirectives/adminHeaderDrct.js"></script>
<script type="text/javascript" src="angularFactories/GeolocalisationFctr.js"></script>
<script type="text/javascript" src="angularFactories/UserAgentFctr.js"></script>
<script type="text/javascript" src="angularFactories/AuthFctr.js"></script>
<script type="text/javascript" src="angularFactories/SessionFctr.js"></script>
<script type="text/javascript" src="angularFactories/UserFctr.js"></script>
<script type="text/javascript" src="angularFactories/AnnouncesFctr.js"></script>
<script type="text/javascript" src="angularFactories/AnnouncesFromUserFctr.js"></script>
<script type="text/javascript" src="angularFactories/CommentsFctr.js"></script>
<script type="text/javascript" src="angularFactories/FriendsFctr.js"></script>
<script type="text/javascript" src="angularFactories/MessagesFctr.js"></script>
<script type="text/javascript" src="angularFactories/RoomsFctr.js"></script>
<script type="text/javascript" src="angularFactories/SocketFctr.js"></script>
<script type="text/javascript" src="angularFactories/ProfileFctr.js"></script>
<script type="text/javascript" src="angularFilters/starsFltr.js"></script>
<script type="text/javascript" src="angularFilters/cutFltr.js"></script>
</body>
</html>
What is the method to divide this file into different ones ? Is it a problem to have such a long file ? Would'nt it have any problem of loading ?
#felix, this is not a problem to have a long index file as you have presented. Consider the tag for instance ng-include, you may want to uncomment and use this as a resource.
<!--<div ng-include="" src="'./partials/header.html'"></div>-->
This will fetch html asynchronously after initial load.
https://docs.angularjs.org/api/ng/directive/ngInclude
Now consider your app.js, it will register as many modules that your project is using. These modules will be loaded asynchronously. So it is not such a terrible thing having as many script tags listed as you do.
<script type="text/javascript" src="app.js"></script>
When you build this for production, I would recommend minifying and concatenating your scripts however, that will reduce the number of requests to the server.
The AngularJS Yeoman project has examples on how to do that.
https://github.com/yeoman/generator-angular
For development, what you have is fine. However when you deploy to production, you will want to combine all of the JavaScript files into one so that you have a single script. This SO question: Combine and Minify Multiple CSS / JS Files gives some good suggestions on how to do this. The most upvoted tool is minify.
Here are some reasons why combining the files would be a good idea:
It's faster. One single download is more efficient than many small downloads. (See this question: Is it better to load many small JavaScript files or one large JavaScript file?)
SEO. Many search engine spiders only index up to a certain number of bytes. You will want to make your head as succinct as possible in order to allow the engine to get to the real content.
Related
I'm really bad at css or designing and I'm struggling to fix this.
Here is the outcome:
<!-- Scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<!-- <script id=js-dispatcher src='scripts/scripts.js'></script> -->
<script type="text/javascript">
var SubjTable = $("#SubjTable").DataTable({
columnDefs: [ {
targets: 0
} ]
})
</script>
I'm trying to set up a simple index page with two tabs (to start), each with just a placeholder text input element, but while the toolbar displays properly the two tabs don't show at all (not just the content of the tabs, the tabs themselves don't display). I've used md-tabs before in other projects so I suspect I have something set up wrong but I'm not sure what. In developer mode, I can see the reference for the tabs, but when I select them they never get called out on the page. the around the does get called out, but none of the individual tabs do. The 'ng-init' call in the controller 'mainController' does get called, so the content of the tabs got processed, but the tabs never display. Any help would be appreciated, this is my first time trying to set this up on my own.
Here is the HTML for the index page:
<body style='padding-left: 0px' ng-app="tinkerApp">
<md-toolbar layout="row" style="background-color: rgb(255, 255, 222);">
<h1><b>ENGINE TEST</b></h1>
</md-toolbar>
<md-content>
<md-tabs md-dynamic-height md-border-bottom style='padding-left: 10px' md-stretch-tabs="always">
<md-tab label="HOME" id="home">
<md-content>
<div ng-controller="mainController" ng-init="initPage()">
<input type="text" class="form-control-sm" id="command"
name="command" ng-model="page.command"
style='width: 300px; height: 25px' />
</div>
</md-content>
</md-tab>
<md-tab label="ENGINE" id="engine">
<md-content>
<div ng-controller="mainController" ng-init="initPage()">
<input type="text" class="form-control-sm" id="command2"
name="command2" ng-model="page.command2"
style='width: 300px; height: 25px' />
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
Here are the calls from inside mainApp.js:
(function(){
//agGrid.LicenseManager.setLicenseKey("your license key goes here");
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('tinkerApp', [ 'ngRoute','agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-
multiselect','ngSanitize','nvd3','hljs']);
})();
(function(){
angular.module('tinkerApp', [ 'ngRoute', 'agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-multiselect','ngSanitize','nvd3','hljs']);
"use strict";
var app = angular.module('tinkerApp');
app.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
}).otherwise('/');
});
})();
And here are the css and script data I call inside index.html
<!--********* CSS *********-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/ng-modal.css" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/dialog.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/select.css">
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/ag-grid.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-fresh.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-dark.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-blue.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-extreme.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-material/angular-material.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/se-1.2.2/datatables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" />
<link rel="icon" type="image/png" href="favicon.png" sizes="16x16">
<!--********* JAVASCRIPT *********-->
<script type="text/javascript" charset="utf8"
src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular/angular.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-material/angular-material.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-messages/angular-messages.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/svg-assets-cache.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/ag-grid/dist/ag-grid.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/lodash/lodash.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-dropdown-multiselect/dist/angular-dropdownMultiselect.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/d3/d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/dist/angular-nvd3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.core.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.js"></script>
<script type="text/javascript" charset="utf8"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/bootbox.min.js"></script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script type="text/javascript" charset="utf8"
src="js/directives/templates.js"></script>
Okay after more tinkering I discovered it was some basic thing I was missing. I'd defined 'ngMaterial' when I set up the app, but hadn't added $mdMedia as a dependency when I set up the controller. As soon as I did that, it worked. Thanks for the input everyone!
Your missing a function to trigger the change i.e
selectedTab
<md-tabs md-selected="selectedTab">
<md-tab label="One">
<p class="tab-content">Tab One content</p>
</md-tab>
<md-tab label="Two">
<p class="tab-content">Tab Two content</p>
</md-tab>
<md-tab label="Three">
<p class="tab-content">Tab Three content</p>
</md-tab>
</md-tabs>
Define the function in the controller
$scope.selectedTab = 0;
$scope.changeTab = function() {
if ($scope.selectedTab === 2) {
$scope.selectedTab = 0;
}
else {
$scope.selectedTab++;
}
}
Source from another question: See the answer
I paste the script for a video and I getting conflict when I paste the video script it make to stop my menu and slider using another version of jQuery, how I can fix it?
This is my head:
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Beautiful_ES_italic_400.font.js"></script>
<script type="text/javascript" src="js/OptimusPrincepsSemiBold_600.font.js"></script>
<script src="js/script.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="index_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/>
<script src="index_videolb/jquery.js" type="text/javascript"></script>
<script src="index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
This is the Body section:
<!-- Start VideoLightBox.com BODY section -->
<div class="videogallery">
<a class="voverlay" href="index_videolb/vdbplayer.swf?volume=100&url=video/devocional.mov" title="Devocional">
<img src="index_videolb/thumbnails/devocional.png" alt="Devocional" /><span></span>
</a>
<span class="videolb">
<a class="videolb" href="http://videolightbox.com">Lightbox in Flash</a> by VideoLightBox.com v2.7m
</span>
</div>
<script src="index_videolb/jquery.tools.min.js" type="text/javascript"></script>
<script src="index_videolb/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section -->
From looking at the VideoLightBox site, it looks like it uses jQuery 1.9.1. If that version is compatible with the rest of your code, you can move index_videolb/jquery.js to the top and remove 1.7.1...
<link rel="stylesheet" href="css/style.css">
<script src="index_videolb/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Beautiful_ES_italic_400.font.js"></script>
<script type="text/javascript" src="js/OptimusPrincepsSemiBold_600.font.js"></script>
<script src="js/script.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="index_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/>
<script src="index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
I'm trying to use jFontSize in a local html page to be displayed in a WebView.
The script should allow the user to change the text size and it does. However this is no longer the case when I add to the text.
I tried using another script but the same problem persists.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir = "ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" language="javascript" src="jquery.jfontsize-1.0.js"></script>
<script type="text/javascript" language="javascript" src="jquery.corner-2.09.js"></script>
<script type="text/javascript" language="javascript" src="shCore.js"></script>
<script type="text/javascript" language="javascript" src="shBrushJScript.js"></script>
<script type="text/javascript" language="javascript" src="shBrushXml.js"></script>
<script type="text/javascript" language="javascript" src="shBrushCss.js"></script>
<script type="text/javascript" language="javascript" src="funcoes.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<link type="text/css" rel="stylesheet" href="jfontsize.css" />
<link type="text/css" rel="stylesheet" href="shCoreDefault.css" />
</head>
<body>
<a class="jfontsize-button" id="jfontsize-m2" href="#">A-</a>
<a class="jfontsize-button" id="jfontsize-d2" href="#">A</a>
<a class="jfontsize-button" id="jfontsize-p2" href="#">A+</a>
<p class="some-class-name2" dir="rtl" align = "right">Hello<br>world</p>
<script type="text/javascript" language="javascript">
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
</script>
</body>
</html>
The page works fine on Firefox.
You need to add the initialize code in document load -
$(document).ready(function(){
//jfontsize increase
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
});
It should work fine.
I have this program and i want to add a jquery datepicker on it, but for some reason (maybe its how i put in order the library), it won't show. I created a sample .html file that would only display a datepicker and it shows the datepicker. Here's the code of my .html file (that shows the datepicker):
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/dynamicMenuTabStyle.css"/>
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.custom.css" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.7.custom.css"/>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
datepicker.js code:
$(function() {
$( "#date" ).datepicker();
});
And this is my other .html which i wanted to insert my datepicker, (but unfortunately, it won't show):
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/dynamicMenuTabStyle.css"/>
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.custom.css" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.7.custom.css"/>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<!--this is for my jqgrid-->
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.fluid.js"></script>
<!--this is for my other .js files-->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="globalFunc.js"></script>
<script type="text/javascript" src="tallySheet.js"></script>
<script type="text/javascript" src="mainindex.js"></script>
<script type="text/javascript" src="prime-settings.js"></script>
<!--this is for my closable tabs-->
<script type="text/javascript" src="js/jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.tabs.closable.min.js"></script>
Please, anybody here know where should i insert the code to display the datepicker? Please help.
Edit:
here's my input date inside the body tag (this code is in the two .html file):
date: <input type = "text" id = "date" value= "[select date]" color = "gray">
Without the complete HTML file it will be difficult to say, but try this:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<!--this is for my jqgrid-->
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.fluid.js"></script>
<!--this is for my other .js files-->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="globalFunc.js"></script>
<script type="text/javascript" src="tallySheet.js"></script>
<script type="text/javascript" src="mainindex.js"></script>
<script type="text/javascript" src="prime-settings.js"></script>
<!--this is for my closable tabs-->
<script type="text/javascript" src="js/ui.tabs.closable.min.js"></script>
You are loading 2 versions of jquery and 3 versions of jquery.ui. Put jQuery first followed by jQuery.ui. If that doesn't solve the problem, can you post the complete html file?
Based on your code, you need a
<input type="text" id="date" />
somewhere in your markup
You are right 37Stars, by loading two different version of JQuery you cause the Datepicker's opening fail.