<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Error message:
jquery.min.js:2 jQuery.Deferred exception: $(...).DataTable is not a
function TypeError: $(...).DataTable is not a function
at HTMLDocument.
(http://crecheskincare.ml/reservationSelect.php?approved:589:21) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375) at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined
Related
I've spring boot app with some static resources serving through thymeleaf as follows
Head section
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Home | Connect In</title>
<!-- Vendor CSS -->
<link th:href="#{/vendors/bower_components/animate.css/animate.min.css}" rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/sweetalert/dist/sweetalert.css}" rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css}"
rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css}" rel="stylesheet"/>
<link th:href="#{/vendors/bower_components/lightgallery/dist/css/lightgallery.min.css}" rel="stylesheet"/>
<!-- CSS -->
<link th:href="#{/css/app_1.min.css}" rel="stylesheet"/>
<link th:href="#{/css/app_2.min.css}" rel="stylesheet"/>
</head>
At end of page
<!-- Javascript Libraries -->
<script th:src="#{/vendors/bower_components/jquery/dist/jquery.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/Waves/dist/waves.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bootstrap-growl/bootstrap-growl.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/sweetalert/dist/sweetalert.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/lightgallery/dist/js/lightgallery-all.min.js}" type="text/javascript"></script>
<script th:src="#{/vendors/bower_components/autosize/dist/autosize.min.js}" type="text/javascript"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script th:src="#{/vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js}" type="text/javascript"></script>
<![endif]-->
<script th:src="#{/js/app.min.js}" type="text/javascript"></script>
this app works fine on local host server environment, means all resources are well served, but when I deploy the app on openshift, I get errors which can be seen in this snippet
don't know how can I fix this, any recommendation and suggestion is strongly welcome..
by using cdn it solved the issues, you can change
Head section
<!-- Vendor CSS -->
<link th:href="#{https://bowercdn.net/c/animate.css-3.5.2/animate.min.css}" rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/sweetalert-1.1.2/dist/sweetalert.css}" rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/material-design-iconic-font-2.2.0/dist/css/material-design-iconic-font.css}"
rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/malihu-custom-scrollbar-plugin-3.1.5/jquery.mCustomScrollbar.min.css}" rel="stylesheet"/>
<link th:href="#{https://bowercdn.net/c/lightgallery-1.3.9/dist/css/lightgallery.min.css}" rel="stylesheet"/>
At end section
<!-- Javascript Libraries -->
<script th:src="#{https://bowercdn.net/c/jquery-3.2.1/dist/jquery.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/bootstrap-3.3.7/dist/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/malihu-custom-scrollbar-plugin-3.1.5/jquery.mCustomScrollbar.concat.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/waves-0.7.5/dist/waves.min.js}" type="text/javascript"></script>
<script th:src="#{https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.6/bootstrap-growl.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/sweetalert-1.0.1/dist/sweetalert.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/lightgallery-1.3.9/dist/js/lightgallery.min.js}" type="text/javascript"></script>
<script th:src="#{https://bowercdn.net/c/autosize-3.0.21/dist/autosize.min.js}" type="text/javascript"></script>
Hence the issues are solved...
Thank you.
<html lang="en">
<head>
<title>Corey Maller</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
I want to make some small changes to my css file but the website is not responding to them. Is there any kind of caching html code I could add to the header?
I'm trying to use jqgrid 5.1.1 and I got this error: $('#gridMain').jqgrid is not a function.
I don't know what to do solve the problem.
Please help me!!
Here is my code
<%# page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid_5.1.0/css/ui.jqgrid.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="/jqgrid_5.1.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/jqgrid_5.1.0/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/jqGrid_5.1.0/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
console.log("aa");
$('#gridMain').jqGrid({});
});
</script>
</head>
<body>
<h2>jqGrid test</h2>
<table id="gridMain"></table>
</body>
</html>
enter image description here
I solved the problem.
The cause was a wrong path.
Thank you for your commnet!!!
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid_5.1.0/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid_5.1.0/css/custom.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid_5.1.0/css/ui.jqgrid-bootstrap.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="jqgrid_5.1.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jqgrid_5.1.0/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
it works on win7, but I am on win8 with firefox 38.0.1 (latest). I can't click on "/checkout/onepage/" button. It does work with chrome though..
Does anyone know what's going on ?
Thanks.
Oddly enough, the problem was solved by reparing firefox...
Create a new .js file for eg. no-conflict.js and add the following content on it:
var $j = jQuery.noConflict();
And include your no-conflict.js into your theme page.xml file
<action method="addJs"><script>no-conflict.js</script></action>
Then write your jQuery like as follows
$j(document).ready(function(){ // write your code here });
after including this file into your theme, press ctrl+U and view page source. Is all links are working of jQuery. If not then check the path and do correct them.
Looks like your javascript is not loading, either permissions errors or the files are inaccessible somehow. This is the head of the checkout/onepage of my install of 1.8. Note that I can open any of the scripts in a new tab:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkout</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="*" />
<link rel="icon" href="http://ce-1.8.1.local/skin/frontend/default/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://ce-1.8.1.local/skin/frontend/default/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://ce-1.8.1.local/js/blank.html';
var BLANK_IMG = 'http://ce-1.8.1.local/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/print.css" media="print" />
<script type="text/javascript" src="http://ce-1.8.1.local/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/js.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/form.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/menu.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/translate.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/directpost.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/captcha.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/mage/centinel.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/js/varien/weee.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://ce-1.8.1.local/skin/frontend/default/default/css/styles-ie.css" media="all" />
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://ce-1.8.1.local/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://ce-1.8.1.local/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
Mage.Cookies.path = '/';
Mage.Cookies.domain = '.ce-1.8.1.local';
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
optionalZipCountries = ["HK","IE","MO","PA"];
//]]>
</script>
<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
i having a wired issue with TB and MVC3 in this fidel working exemple it use TB v2.0.2
but in my mvc3 project im using TB v2.1.1 and the collapse dont work...
this is all the scripts reference
<html>
<head>
<meta charset="utf-8" />
<title>MainSearch</title>
<script src="/Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/datepicker/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/DataTables/media/css/DT_bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/Content/boostrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js" type="text/javascript"></script>
<script src="/Scripts/DataTable.js" type="text/javascript"></script>
<script src="/Scripts/jQuery.dataTables.min.js" type="text/javascript"></script>
<script src="/Scripts/DataTable.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap-collapse.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/DT_bootstrap.js" type="text/javascript"></script>
</head>
thanks
miki
i solved it by changing the JS/CSS order
i guess the best practice should be JQUERY should be first than the Main bootstrap Js than the other bootstrap Js extension
<script src="#Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-collapse.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/datepicker/css/datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/boostrap/css/bootstrap.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jQuery.dataTables.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-datepicker.js")" type="text/javascript"></script>