I have a intranet website where I have a page to add new products.
I use ckeditor because I need to save some links.
Now I had to change it into a Master detail form and so I decided to use Json2 and DataTables .
The strangest thing is that when I include
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript">
the ckeditor doesn't work anymore.
These are all the scripts I import
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#*This is for CKEditor*#
<script src="#Url.Content("~/content/javascript/CKEditor/ckeditor.js")" type="text/javascript" ></script>
<script src="#Url.Content("~/content/javascript/CKEditor/adapters/jquery.js")" type="text/javascript" ></script>
#*This is for jquery*#
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
#*This is for JSON*#
<script src="#Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
#*These are for DataTables*#
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/extras/TableTools/media/js/TableTools.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/extras/TableTools/media/js/ZeroClipboard.js")"
type="text/javascript"></script>
#*These are for styling Control*#
<link href="#Url.Content("~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools.css")"
rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css")"
rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
Any ideas??
You should add the reference to jquery before you add ckeditor. The adaptors are set to extend jquery.
Related
In my project, I have a lot of javascript link and css link I don't know, can I add all of those in bundle-config? of course, this is for admin Area and also I have a user Area.
this is admin Area
<script src="~/Areas/admin/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="~/Areas/admin/assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="~/Areas/admin/assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="~/Areas/admin/assets/pages/scripts/dashboard.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="~/Areas/admin/assets/layouts/layout2/scripts/layout.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
Yes, you can add as many files to your bundles as you like, and it benefits you to do so as it reduces the number of requests the browser has to make to load your page.
For example:
bundles.Add(new ScriptBundle("~/bundles/adminScripts").Include(
"~/Areas/admin/assets/global/plugins/jquery.min.js",
"~/Areas/admin/assets/global/plugins/bootstrap/js/bootstrap.min.js",
"~/Areas/admin/assets/global/plugins/js.cookie.min.js"))
Then on your page:
#Scripts.Render("~/bundles/adminScripts")
I don't understand how are all the CSS and JS injected.
I find asset tags in main.gsp, but only for application.css and application.js
Nothing in the GSPs generated for the domain-classes.
But in the sources of the served pages I find them all:
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
and
<script type="text/javascript" src="/assets/jquery-2.2.0.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
I red, that I can control them globally with includes and excludes.
Can I control them in main.gsp?
And where I'd decide them on a per page basis?
Thanks, Rawi
What are the steps I should do inorder to use jquery-ui plugin in grails 2.4.4 with asset-pipeline?
What I have done is:
I have added
compile "org.grails.plugins:jquery-ui:1.10.4"
in BuildConfig.groovy
also added:
//= require jquery-ui/js/jquery-ui-1.10.4.custom.min
//= require js/jquery-ui-1.10.4.custom
in application.js
and
*= require themes/ui-lightness/jquery-ui-1.10.4.custom
in application.css
I have added the required script in gsp page:
<script type="text/javascript">
$(document).ready(function()
{
$("#datepicker").datepicker({dateFormat: 'yy/mm/dd'});
})
</script>
What I am trying to accomplish is to add a date picker in the gsp. What more should I do to make it work?
As advised I have checked the view source:
Inside head:
<link rel="stylesheet" href="/NTSuite_Web/assets/application.css?compile=false">
<link rel="stylesheet" href="/NTSuite_Web/assets/bootstrap.css?compile=false">
<link rel="stylesheet" href="/NTSuite_Web/assets/themes/ui-lightness/jquery-ui-1.10.4.custom.css?compile=false">
<script type="text/javascript">
$(document).ready(function()
{
$("#datepicker").datepicker({dateFormat: 'yy/mm/dd'});
})
</script>
<script type="text/javascript">
function doSubmit(val){
document.getElementById('openMode').value=val;
document.party.submit();
}
</script>
In body:
<script src="/NTSuite_Web/assets/jquery/jquery-1.11.1.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/jquery.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/application.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-affix.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-alert.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-button.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-carousel.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-collapse.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-dropdown.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-modal.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-tooltip.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-popover.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-scrollspy.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap-tab.js?compile=false" type="text/javascript"></script><script src="/NTSuite_Web/assets/bootstrap-transition.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/bootstrap.js?compile=false" type="text/javascript"></script>
<script src="/NTSuite_Web/assets/js/jquery-ui-1.10.4.custom.js?compile=false" type="text/javascript"></script>
My date picker:
<input type="text" id="datepicker">
I have done all this without understanding whole process, If I can get the answer with correct procedure to do this, it would be fantastic.
can you guys tell me why my slider is not working
i have included all the resources in the js fiddle then also its not working
providing fiddle link below
http://jsfiddle.net/YakV7/2/
actual demo
http://tympanus.net/Development/ParallaxContentSlider/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
What do you mean by these lines?
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Change it to the actual path.
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style.css">
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
Or add:
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
Same working fiddle: http://jsfiddle.net/YakV7/7/
All is in the title
I've tried:
config.serve_static_assets = true
I updated the gem and then: rails generate gmaps4rails:install
The map is perfectly showing in local mode but doesnt appear un production!
the is totaly empty...
Here is the content of my head:
<head>
<link href="/images/favicon.ico" rel="SHORTCUT ICON">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/gmaps4rails.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/reset.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/default.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/buttons.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/colorbox.css?1314057878">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ui.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.colorbox-min.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ujs-1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/active_scaffold.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/jquery.editinplace.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/date_picker_bridge.js?1314057900"></script>
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/active_scaffold/default/stylesheet.css?1314057900">
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1314057900" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<meta content="authenticity_token" name="csrf-param">
<meta content="/MYbif2q6UmcrXyAS7WyYtOViwkr8pyXjXQTTNYtQsc=" name="csrf-token">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bmain,places%7D.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bcommon,util%7D.js"></script></head>
Any idea?
I had the same problem with the pre 1.x, although it was fixed by calling each file individually in the manifest file after manually loading them into the vendor asset dir.
However, the latest gem worked as it said in the readme. From an older version update it via bundler, remove any of it's js files copied into the assets dir (like I had previously), run the install script again, and in the manifest file (I'm using vendor/assets/javascript/external.js) use the namespaced require statement for the files you need.
//= require gmaps4rails/googlemaps.js