MVC Bundling Issue - javascript

i recently joined in a new company and found out they were using so many scripts in Layout.cshtml.as shown in fig
so in order to improve the performance,i used mvc bundling functions as shown
and referenced it on layout page with #Scripts.Render("~/bundles/jqueryval").but the problem is.many of the java scripts doesnt work any more especially jquery data table.what point im missing here?

I think in your scenario your js files are conflicting with each other ,solution for your problem is :
Use $.noConflict() to avoid conflicts between jquery's files :-
Follow this link :
http://api.jquery.com/jquery.noconflict/
if some js files are not working then just check the order of your js files also..

Try and check if the files are in the correct order.
If you are on local, you might have some setting to not load the .min file, happened to me once.
2 suggestions, add scripts after css and maybe start using requirejs, it will help you with the dependencies and async loading of the js

Related

Errors when bundling javascript files of different pages into one

It looks stupid question, I'm using webpack to build static website
I wanted to bundle my JavaScript files of different pages into one
but some elements that I selected by JS that existing in home page and not in about page throwing error when I go to about page.
It's not effective just in console and I can ignore it
should I separate files ? if so is that possible to make webpack inject different pages with the proper JS file?
Thanks...
Try to make min files using webpack , or u cn use rollup.js
If possible please share code snippet.

Custom JavaScript to existing Joomla core module

I have developed a custom Joomla template, and I need to add a piece of custom javascript to a Joomla core module (mod_articles_news), without a plugin, if possible (this should be so simple that I don't think I want to use a third party plugin for that). And async, if possible.
I have been searching thoroughly, but haven't found the perfect solution. Either they want me to install a plugin or the solution refers to a custom written module (suggesting to add JS before installation of module) while I am dealing with a core module (Articles Newsflash) that is already installed per definition. (The reason I need to use JS is to make a conditional design change, presently not possible with CSS).
I have been following the steps outlined here, but to no avail. Namely, I added the following code into the module's template folder (mod_articles_news/tmpl/my-template-name.php)
<?php
JHtml::script(Juri::base() . 'templates/my-template-name/js/myScript.js');
?>
(Of course, I have added the myScript.js file into the above location).
When checking it live, nothing happens, the browser is not loading my JavaScript at all (the script itself is tested and it works).
Please help me what I am missing here. Thank you in advance!
If you want to do customization you should use a Joomla! template for this. A template determines the basic HTML including the necessary CSS/JS for your site. In addition it can contain overrides for modules and components so you can do even more customization without touching any of the original code.
What you want to do sounds like a simple customization. Just add any CSS/JS which is necessary to achieve your task to the template.
You could try
<?php
JHTML::script('templates/my-template-name/js/myScript.js');
?>
alternatively, is there any reason you can't add it via your custom template, as suggested by Sven Bluege

Play framework: Missing semicolon error in jQuery/Bootstrap JS

I'm new at Play Framework and making my first project with it. I added jQuery and bootstrap.js to my main.scala.html:
<script src="#routes.Assets.at("javascripts/jquery-2.1.3.min.js")"></script>
<script src="#routes.Assets.at("javascripts/bootstrap/bootstrap.js")"></script>
When I run my application in a browser, I get the compilation error:
Missing semicolon in \app\assets\javascripts\jquery-2.1.3.min.js:2
You can see the screenshot here: http://oi61.tinypic.com/2lllklx.jpg
The same problem if I add only a bootstrap js, minified version or separate js files.
I don't change those files, I add them in the form they were originally - downloaded from jQuery/Bootstrap websites.
I tried to add semicolons manually, but there are hundreds of them missing. I don't think that's a good idea.
Maybe I should change some settings in the Play application?
You put a js file on app/assets/javascript, that folder is for files that need to be compiled, like coffee script files. So, jquery and bootstrap files need to be on public/javascript.
Ensure you have a route similar to this on conf/routes:
GET /assets/*file controllers.Assets.at(path="/public", file)
Anyway, I recommend you to use WebJars.

Ember.js - Loading additional .js-Files in some templates

Im developing a ember.js based app.
On some "sites" (templates) I want to load a specific js-game, so I have to include extra tags like <script src="game.js"></script>. But since handlebar-templates are defined by <script>-Tags itself, its not possible to simply put my dependencies within a template directly.
How can I include js-files on some individual sites only?
Including files in an Ember.js application is a bit more complex than in a regular website.
If you do not use ember-cli, then you could either include your all your JavaScript files directly in your index.html (one by one) or (and this is better) you could also bundle all your game JavaScript files into a single file (called games.js for instance) and include that single file in your index.html. You can bundle JavaScript files using tools such as grunt or brunch or broccoli.
Now if you do use ember-cli (which I recommend), then you could simply list your files in your Brocfile.js (see documentation here). Learning ember-cli might take a little bit of extra time but it will really help you in the future :)
Good luck!
Ok I found an possibility to solve that problem:
Like described in the handlebars.js-FAQ here (5.), I have to use some kind of a "Hack" to avoid parsing errors. Just need to add an empty command {{!}} into the word "script" like <scr{{!}}ipt src=...>...</scr{{!}}ipt.
That works for me.
Also, as kpdecker says here, it is better to use precompiled templates than defining them inline.
You can try to insert the necessary scripts from didInsertElement hook of the corresponding view. And, if so, in order to avoid duplicates, remove that scripts in willDestroyElement hook of the same view.

Issue with switching between extjs versions on unloading and reloading js/css files dynamically

I have a panel in extjs-3.x. On a certain event(say click of a button), I am trying to unload the extjs-3.x js and css files. And replace them with extjs-4.x js and css files in my DOM. After this I need to render some components in extjs-4.x.
Basically, I want both extjs-3(panel in my case) and extjs-4 components to coexist together but I cannot use the sandbox due to some reasons.
The problem I am facing is that, even after unloading the extjs-3.x files, the firebug window shows the Ext version to be 3.x. And obviously I am not able to create extjs-4 components.
Am I missing out something here. Any pointers or any other way to achieve this would be of great aid. Thanks.
PS: I am using the snippet from here for unloading my js and css files.
http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml
Check this example http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/sandbox/sandbox.html in this Ext3 and 4 both files library files are using. This may helpful.
Apparently, unsetting the 'Ext' variable after unloading the extjs-3 files. And then loading the extjs-4 files using a callback function for creating extjs-4 components did the trick.
Thanks Lolo for the suggestion.

Categories