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
Related
I have a top nav bar on homepage(_Layout.cshtml) that has a toggler button, after removing some style sheets my button became visible but it is not working!!..
Here are my scripts and links
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
#RenderSection("preheader", required: false)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
#*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">*#
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" /> F
#RenderSection("header", required: false)
</head>
<body>
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script><!--removing it stops testnav toggle-->
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
</body>
However when I add same navbar in content-page that content-page button works!!
I have tried adding all scripts on top of original jquery and bootstrap scripts to that page it still works!!
TestNavBar.cshtml (content-page)
#section header{
<style type="text/css">
</style>
<!--Copied from home page (Layout)-->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" />
<!--Original Scripts-->
<link href="~/safety/css/leaflet.loading/Control.Loading.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="~/safety/css/jquery-json-viewer/jquery.json-viewer.css" rel="stylesheet" />
<link href="~/safety/css/ChartJS/Chart.min.css" rel="stylesheet" />}
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$.backstretch("/images/netrisk-background.jpg");
});
</script>
<!--Copied from home page (Layout)-->
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
#*
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
*#
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.min.js"></script>
<script src="~/js/app/site.js" asp-append-version="true"></script>
<!--Original scripts-->
<script src="~/safety/js/App/SafetyGlobalSetting.js"></script>
<script src="~/safety/lib/jquery-datatables-js.min.js"></script>
<script src="~/safety/js/plugin/jquery-json-viewer/jquery.json-viewer.js"></script>
<script src="~/safety/js/plugin/CounterUp/jquery.counterup.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="~/safety/js/App/PointSelection.js"></script>
<script src="~/safety/js/plugin/leaflet.tilelayer.HERE/leaflet-tilelayer-here.min.js"></script>
<script src="~/safety/js/plugin/leaflet.loading/Control.Loading.min.js"></script>
<script src="~/safety/js/plugin/leaflet.geometry/leaflet.geometryutil.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="~/safety/js/ChartJS/Chart.bundle.min.js" type="text/javascript"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/freezable/leaflet.markercluster.freezable.js"></script>
<script src="~/mdbootstrap-pro/js/mdb.min.js" type="text/javascript" ></script>
}
I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/
It works fine there.
Same exact code on google apps script, nadda. What do I need to change to make this work properly there?
test4.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<base target="_top">
</head>
<body>
<div data-role="collapsible-set" id="set">
<div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
<h3>Stuff</h3>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<?!= include('test4JS'); ?>
</body>
</html>
test4JS:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$('#submit').on('click', collapse);
function collapse(sender) {
$("#set").children(":first").collapsible( "collapse" );
//$(".stuff").collapsible("collapse");
//$("#set").children(":first").trigger( "collapse" );
//$(".stuff").trigger("collapse");
//none of these work
}
</script>
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 create a datebox with dateFormat, but it looks like dateFormat won't work.
It gives day/month/year, but I want only month/year.
this is my jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"calbox","dateFormat":"%m/%Y"}' />
</div>
</body>
</html>
I saw this thread, but still I don't understand why it's not working.
It seems like there's an issue in the code that you've provided:
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Contains some hidden characters in between "js". Normally, it would be a hex of 6a73, but in your case, it is 6ae2808ce2808b73 for some reason, so change that link to
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Proof
However, to answer your question, try using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"datebox","overrideDateFormat":"%m/%Y","overrideDateFieldOrder": ["m", "y"],"calUsePickers": true, "calNoHeader": true,"calShowDays": false,"calMonthMode": true}' />
</div>
To force a month/year selection only
Live Demo | Source
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.