So I had some external scripts being called on one of my views. I searched the URL, copied and pasted each function into a new js script locally. Then I bundled my script files in bundle config. The functions were rendering find and displaying correctly.But now after bundling and then trying to use #Script.Render. The display is slightly messed up.
Before
After
I've checked spelling and the paths were correct, so why is #Script.render not working, when essentially the same scripts worked before. Does jQuery have a tendency to not work when bundled or something?
Let me know if you have additional questions or need to see code..
Scripts:
<script src="~/Scripts/tools/jquerydatatables.js"> </script>
<script src="~/Scripts/tools/responsivebootstrap.js"></script>
<script src="~/Scripts/tools/bootstrapdatatable.js"></script>
<script src="~/Scripts/tools/responsivedatatable.js"></script>
<script src="~/Scripts/tools/cloudpopper.js"></script>
<script src="~/Scripts/tools/twitter.js"></script>
Bundle:
bundles.Add(new ScriptBundle("~/bundles/scripts/desktop")
.Include(
"~/Scripts/tools/bootstrapdatatable.js",
"~/Scripts/tools/cloudpopper.js",
"~/Scripts/tools/jquerydatatables.js",
"~/Scripts/tools/responsivebootstrap.js",
"~/Scripts/tools/responsivedatatable.js",
"~/Scripts/tools/twitter.js"
));
css sheet is linked with:<link href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
but my css sheet is not bundled with the java script, but that shouldn't be a problem right?
This is the code that messes up the display when I use it:#section Scripts{
#Scripts.Render("~/bundles/scripts/desktop")
As far as I can see you have a css issue:
If you want to bundle css you need to use Styles.Render("~/css/myVirtualPath").
In bundle config class then you put something like this:
bundles.Add(new StyleBundle("~/css/myVirtualPath").Include("~/Styles/myStyle.css"))
Related
Alright, so I have Jekyll running my site locally and it runs perfectly fine. When I pushed everything to Github and made it a gh-page all styling and js functions disappeared. When I go onto the site I see that the css files that it is pointing to are empty, though they clearly have styling in github... So i've tried several of the solutions that I could see on here, but to no avail. This is the gh-page currently: https://jacobprice.github.io/Webpage/
The code is here: https://github.com/JacobPrice/Webpage
I've been changing stuff around based off solutions here, so hopefully I haven't broken something else... Any help is greatly appreciated.
Note** if the site is down it will show an old ruby on rails project with a countdown. That is not the gh-page site.
View page source your website.
I see your url failed
Edit Your Url load css and js file:
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/functions.js" type="text/javascript"></script>
You should use relative path for url
Okay, so this is kind of a work around... Not sure why it wasn't directing to the proper folder, but the fix for me was to copy my main.css (the full css that sass compiles) and then create another main.css file where it kept pointing too. Kind of a hack and not proper, but it works...
In _config.yml, set baseurl: /Webpage and call your resources like this :
<script src="{{ site.baseurl }}/assets/js/jquery-2.1.1.min.js"></script>
It will now work both locally and on gh pages.
I am quite new to JS and Jquery and I fear that I must have missed something fundamental to incur this error: none of the semantic modules I tried to include in the html and initiate with JS appears to be responsive, even when I just copy the snippet from semantic ui examples.
I used bower to install Semantic UI and Jquery to a separate bower_component directory which I then added as an additional content root to the project directory in phpstorm. I included semantic files in the html header as such and paths are all recognized:
<link rel="stylesheet" href="semantic/dist/semantic.min.css">
<script src="jquery/dist/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script src="js/semantic_test.js"></script>
I copied the html from the first example this link to the html and the js to "js/semantic_test.js". The page is appearing static with all the styling correct but no response, in Chrome or Safari.
I tried some bootstrap components which functioned correctly. I have also tested CDN paths for both Jquery and Semantic UI - not working still. I have spent hours googling and would deeply appreciate some help please!
Did you wrap your jquery code in document.ready
$(document).ready(function() {
// your code here
// ...
});
Sometimes this can happen when the script to initialize your html components with JavaScript runs before the components are loaded into the dom.
I had downloaded the metronic theme from http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 to use along with the PyroCMS framework but my issue is i can not get charts or graphs to work. The specific plugins used for these are flot and jquery(ex. jquery.sparkline.js)
Steps done in attempt to make this work:
Downloaded theme
Manipulated included base theme(included in PyroCMS) to display default.html
Copied over code from the charts/default page
Created Css.html and js.html and populated them with paths to the correct file location as well as referenced them in the default.html
Copied over css and js files into the correct folders
Installed in www.website.com/admin
double checked paths
tested if code worked inside pyro and if it worked right out of package and it worked directly out of the zip file
so after that i got everything to work correctly except the pie charts, graphs, and calendar(on the default page) and all the graphs/charts on the charts page. Does anyone know what i am doing wrong or have any other suggestions?
Because the default.html and charts.html work right out of the zip file i know everything is compatible(the plugins and css and all that), just not sure what i am missing when i try to integrate it with PyroCMS
P.S.This is my first post ever so please be tolerant and understanding if the question isnt clear or the question is too vague, i will respond as fast as i can to any comments
I have this theme so I will try to help. Can you confirm you have the following scripts included?
<script src="../../assets/global/plugins/flot/jquery.flot.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.crosshair.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="../../assets/admin/pages/scripts/charts-flotcharts.js"></script>
AND most importantly, the initializers:
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
ChartsFlotcharts.init();
ChartsFlotcharts.initCharts();
ChartsFlotcharts.initPieCharts();
ChartsFlotcharts.initBarCharts();
});
</script>
I'm trying to organize my website in a modular way using a server side include system. The idea is that every module will have it's own css and own javascript and will only be loaded once included on the page - so any page not having the module wont load that modules css/js either.
I've done it like this:
header.html
-----------
<!-- header start -->
<link rel="stylesheet" href="css/header.css">
<header class="module-header">
<div class="links">
links...
</div>
</header>
<script src="js/header.js"></script>
<!-- header end -->
footer.html
-----------
<!-- footer start -->
<link rel="stylesheet" href="css/footer.css">
<header class="module-footer">
<div class="links">
links...
</div>
</header>
<script src="js/footer.js"></script>
<!-- footer end -->
and then on the index.html:
<!DOCTYPE html>
<head>
<title>Modular page</title>
</head>
<body>
<!--#include virtual="html/header.html" -->
<!--#include virtual="html/footer.html" -->
</body>
</html>
This works fine, and since the scripts are loaded after each module the content is guaranteed to exist before running the scripts. Css is loaded just before and makes sure it will have a nice layout.
However - I've run into some issues with my solution:
In case I were to include a module several times, like for example a product.html, which will be repeated say 20 times - I would have the css and js files included also 20 times. Not good.
Generally I've seen css being included in the head tag, and js in the end of the body. Will having them all coming as the document is being built up induce any issues?
Those includes can be exchanged with any include, php, asp or jsp... this is using apaches SSI.
Is the whole idea going in the wrong direction? I'd imagine this for development setup, but having some kind of smart nodejs rhino script that loads the page - finds the loaded scripts and css, concats and minifies and adds as single includes for production.
To overcome issue of including js or css for times, you should include that files in top of the file in which you gonna include and not inside that included file. Means your product.css/js should be removed from that and should be placed in your index.html or header .html for once
including same js for times may stop your javascript so make sure that they are not conflicting each other
Use a javascript module system. Javascript AMD modules requirejs to load javascript increamently is a very good option. requirejs.org is a very good place to start.
For your context use
//inside header.html
require(['header.js'], function(){
//call this require() multiple times it will load the javascript only once.
//user header.js ... once this line is require() line is executed the
//header.js will be loaded forever
});
footer
//inside footer.html
require(['footer.js'], function(){
//call this require() multiple times it will load the javascript only once.
//user header.js ... once this line is require() line is executed the
//header.js will be loaded forever
});
Now comes the problem of CSS loading in a modular way. Requirejs CSS plugin is also available.
Now once you start using this kind of system, the script loading happens asynchronously using javascript. So the scripts arrive a little late in the screen. Even the css arrives a little late. So if you are writing global event handler like window.onload= func(){}, these are going to fail as most of your javascript would not have loaded yet. If you are doing styling on top of CSS which was dynamically loaded that too requires to be done after CSS loading completes. Using !DomReader in requirejs is a good option. Someday I will write a blog which will discuss these in depth.
The smartness of minifying is there in requirejs as well. requirejs optimizer
At the end of the starter page is this:
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
But I think with version 2, you just include 1 JavaScript file, don't you?
Yes. This actually threw me for a loop the other day.
The bootstrap.js file in the current .zip downloadable from the Bootstrap page has all of the plugins included. You don't need to (and shouldn't) include them separately if you're using the default .js file.
cf_PhillipSenn. The link provided by cetver in the comments is what you are looking for where you can customize what features you will be using, and then download it into a compiled file. If you know plugins you will be using from the beginning, might be the way to go.
The chunk you see on the bottom of the bootstrap page makes it easy to add / remove plugins as you need them.