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>
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.
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 am unable to make CLEditor work for me. Please find the scipt files being adding in _Layout.cshtml
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/jquery.cleditor.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.cleditor.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.cleditor.min.js")" type="text/javascript" ></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
#Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css"));
Partial View has given below code.
<textarea id="input" name="input"></textarea>
<script type="text/javascript">
$("#input").cleditor();
</script>
This is happing in all the browsers.
Per their site, "It is recommended that you install these files into a folder called cleditor with a subfolder called images."
I placed the folder in Scripts and then used this:
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Scripts/cleditor/jquery.cleditor.css")" />
<script type="text/javascript" src="#Url.Content("~/Scripts/cleditor/jquery.cleditor.min.js")"></script>
I created NuGet package and try to install this package. In during instalation I get error:
"Name cannot begin with the '~' character, hexadecimal value 0x7E. Line 6, position 31."
My package consist _Layout.cshtml (with _Layout.cshtml.transform name) file with following content:
<head>
#RenderSection("ReportsHeader", false);
</head>
When I deleted this file the package was installed success.
in mvc project in _Layout.cshtml file in head tag:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
If I deleted
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
package installed but _Layout.cshtml file not modified.
How I can modify _Layout.cshtml file ?
or my be I can modify _Layout.cshtml file in install.ps1 file ?
It looks like the problem is with your quotation marks. Try using ' instead of " for the inner quotable sections something like this:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content('~/Content/Site.css')" rel="stylesheet" type="text/css" />
<script src="#Url.Content('~/Scripts/jquery-1.5.1.min.js')" type="text/javascript"></script>
<script src="#Url.Content('~/Scripts/modernizr-1.7.min.js')" type="text/javascript"></script>
</head>
Not sure if that syntax will work, but the use of nested " quotes looks like trouble.