I have an ASP.NET web application that makes use of a large Javascript file to enable front-end functionality. The issue is that since this web application is growing in size the Javascript file is growing in size along with it.
I want to remove some of my larger functions out of my main javascript file site.js and instead contain them inside a second file. My aim is to declutter the main JS file and increase readability etc.
If this were a normal web application I'm sure I'd be able to use JQuery to achieve this through use of the .getScript() however I've tried using this function to pull in a separate script with a simple alert function and I get a reference error saying that my alert function is undefined. I have included both scripts within my ASP.NET _Layout view, but still it doesn't work.
Below is what I am doing currently, what do I need to do to be able to call a JS function held inside another file from site.js?
site.js
$(function() {
$(document).ready(function() {
$.getScript("../site2.js");
sendAlert();
});
//... other js
});
site2.js
$(function() {
function sendAlert() {
alert("site2 file");
}
});
_Layout
<!DOCTYPE html>
<html>
<head>
<script src="~/js/site2.js"></script>
<script src="~/js/site.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" integrity="sha384-88btmYK8qOHy4Z2XuhkWZjUOHICKYe1eSDMwaDGOAy802OCu6PD6mwqY5OwnfGwp" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
</head>
<body>
#RenderBody()
#RenderSection("Scripts", required: false)
</body>
</html>
I think that you can do this:
$(function() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "../site2.js");
document.getElementsByTagName("head")[0].appendChild(script);
});
Cheers - Vinh
Related
So in an application I'm writing using Apache Cordova within Visual Studio, I am attempting to add functionality to the default index.html and index.js. However, my code within my index.js is executing very oddly - the debugger in VS shows that the $('#favorite-lot') is executed, but nothing within the .click(function()) method is. Is there any reason why this would be so?
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/JQueryMobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="scripts/JQueryMobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<a id="favorite-lot" href=""><h5>Favorite Lot</h5></a>
</div>
</body>
</html>
Index.js
//This method is called on page load to set the favorite lot on the index page
//the document bit is called, but the if statement within it & ready aren't
//$(document).ready(function () {
$('#favorite-lot').click(function () {
var storage = window.localStorage;
var href = storage.getItem("favoriteLot");
//now redirect
window.location.replace(href);
});
//});
Note I have tried enclosing my function within a document.ready (see commented out code), however the results are the same.
EDIT: So I figured this issue out, and it was a fairly simple error: I wasn't including the jQuery code itself, just jQuery.mobile, and additionally, the jQuery has to load before jQuery.mobile for the .mobile stuff to work. Side note, I also didn't realize .mobile enables Ajax on most links/redirections, and had to disable that for some of my other code; maybe if you've found this post, you're suffering from the other problem as well
so I've been working on a (fairly simple) RESTful app using node.js, and I've made it towards the very last bit, now the only bit missing is using jQuery to manipulate the html page so I can edit the content of the html - and it's driving me absolutely mad.
I took the try.jquery.com tutorial, and it was pretty smooth; I'd by no means call myself a master of jquery, but I have very little trouble writing the code for basic html manipulation, except I never really considered where the jquery code would go. I've tried a bunch of different stuff and only one (really inconvenient) way has worked, so I was wondering if I could get some clarification.
(Note: all the js files are in the root folder, and index.html is in root/public; and I'm basically just running app.js through npm/package.json)
I've tried including the jQuery code in the main app.js file:
app.js
//some imports/requires here
var $ = require('jquery');
//more imports/requires here
//error; document is undefined
$(document).ready($('h1').text('Im Here');
app.get('/', function (req, res) {
res.sendFile(__dirname+'/public/index.html');
});
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script="../app.js"></script>
I've tried including the jQuery code in its own file (tried just letting the code sit in the js file, and tried exporting the code as a function and calling it from app.js - both did nothing):
jusQueryin.js
var $ = require('jQuery'); //tried with and without this
$(document).ready(function () {
$(' button ').on( 'click', $('h1').text("I'm here") );
console.log('kpa');
});
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script="../jusQueryin.js"></script>
I've also tried (this worked, but I don't know how I would deal with the code in here from other .js file, if it is possible):
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Inspiratorator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
$(document).ready(function () {
$(' button ').on( 'click', $('h1').text("I'm here") );
console.log('kpa');
});
</script>
I've also tried different variations(i.e. including the 2nd part of the ready function in a function (or not), using an onClick event inside the dom.ready function, etc..), but the only one that worked was the last approach
Ideally, I'd like to be able to use the jQuery code inside app.js, less ideally would be in its own file; or if I have to include it inside the html file for some reason, I would at least need to be able to communicate with the code in the script block so that I can give it info from the database and so on.
Remeber one thing jQuery needs a window object to work. The first functionality of jquery is as dom query, dom is within a window object. As a result you must load the jquery and attach it to a window object.
As a node app you will have a browser window as a view to your app. Try adding jquery to that window from a CDN, add your requires there, voila the containing scope(window) which contains jquery now as global passes it also to the newly required file.
Error: jQuery requires a window with a document
index.html
<script>
window.$ = window.jQuery = require('./node_modules/jquery');
</script>
<script>
var UI = require('./controllers/UI');
UI.init(window);
</script>
Now var UI, which is a module in my case, contains
I am working in an ASP.NET MVC project that uses a lot of #section scripts blocks. We also use a lot of partial views. Currently, I have our global JS (global.js) rendered in the <head> element, which blocks the rest of the page from loading until it has finished loading. I want to move this JS into the body, but because my partial views are reliant on the global.js, this becomes a problem. The rendered HTML turns out to be:
<html>
<head>
<title>Page</title>
<!-- Scripts/styles here -->
</head>
<body>
<!-- Partial A -->
<div id="PartialA">Partial A</div>
<script type="text/javascript">
$(function(){
Foo.bar();
});
</script>
<script type="text/javascript" src="global.js"></script>
</body>
</html>
And global.js:
var Foo = {};
Foo.bar = function(){
console.log("I did Foo.bar()!");
}
Is there anything I can do to place my global.js just before the </body tag while still allowing the JS that uses global.js to exist higher up in the body? Maybe some sort of custom "ready" event I can subscribe to?
why not in Partial A
window.initPartialA = function () {
Foo.bar();
}
and in Global
if (window.initPartialA) {
initPartialA();
}
This is really gross, I would figure out a way of how to organize your script tags in asp rather than doing this.
I am using a jQuery plugin it has plugin.css and plugin.js as dependencies and code is in script.js. I cant have plugin.js and script.js merged because i am using plugin only on one webpage of my website.
In order to make sure plugin.css is loaded before execution of plugin.js and script.js, normally I have no option but to have plugin.css in <head> which causes render blocking(until all resources in head are loaded,
browser doesnt render html).
Normal Way: Having CSS in <head> and JS before </body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/plugin.css">
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="/js/plugin.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
Proposed Way: Load CSS and JS via ajax calls and inject them when all of them are loaded, using jQuery $.when promise
<!DOCTYPE html>
<html>
<head>
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script class="load-plugin">
$(document).ready(function(){
var loadPlugin = {
css : $.ajax({ url: $(".jquery-plugin-css").data("src") }),
js : $.ajax({ url: $(".jquery-plugin-js").data("src")}),
};
var scriptJs = $.ajax({ url: $(".script-js").data("src") });
$.when(loadPlugin.css, loadPlugin.js, scriptJs).then(function(){
loadPlugin.css.done(function(data){
$(".jquery-plugin-css").html(data);
});
loadPlugin.js.done(function(data){
$(".jquery-plugin-js").html(data);
});
scriptJs.done(function(data){
$(".script-js").html(data);
});
});
});
</script>
<style class="jquery-plugin-css" data-src="/css/plugin.css"></style>
<script class="jquery-plugin-js" data-src="/js/plugin.js"></script>
<script class="script-js" data-src="/js/script.js"></script>
</body>
</html>
This improved my first render time from 3.4 secs to 2.4 secs and total page load time from 8.5secs to 8secs.
But this has some limitations:
Publicly hosted urls cant be used because the urls inside the plugin files like background-images inside css files if mentioned relative to their directory then the path changes after code is pasted into html.
As the injected code is not part of the source files or external scripts they cant be debugged in developer tools.
This way of lazyloading plugins has pros and equal amount of cons. Can anyone suggest is it worth it to do it this way or any better way to do things.
What I would try is:
Combine the JS files so that the dependent code is after plugin.js
Insert a script at the bottom of the page to dynamically load the CSS first and the combined JS second. If you need example code, you might look at https://github.com/filamentgroup/loadJS/ and https://github.com/filamentgroup/loadCSS/.
Using this approach, neither the CSS nor the JS blocks rendering. The CSS is appended to the DOM, so there should be no problems with relative URLs.
I am trying to set up a project which consist of htmls and javascript/ajax - jquery with many jquery plugins.
For each of many html pages, I have to use RequireJS and here is what i want..
I want to determine based on the property(return value from an ajax call) that I should load the minified files or non minified files
So I kind of need a mechanism to determine and decide (before the page load or as soon as the page starts loading) which js files I would want to load... and then go ahead with the load.
Is there a nice way to do this?
well,
take a look at this example:
the html
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
scripts/main.js
$.ajax({
url: "http://server.com/fetchMeSomeData"
context: document.body,
success: function(data){
//this would be your sample callback
// you could be fetching the parameter to ask if it is debug state or not.
var isDebugSuffix = (data.isDebug)? "" : ".min";
require(["helper/util" + isDebugSuffix], function() {
//This function is called when scripts/helper/util.min.js is loaded but when the
//isDebug would be True, it would load scripts/helper/utils.js
//your other code can go here ...
});
}
});
hope this set you on your way...