How to append querystring to GruntBuilder on Sails? - gruntjs

My assets are 'linked' like
<script src="/js/library-x.js"></script>
And I want to use
<script src="/js/library-x.js?v=GITHUB_LAST_COMMIT"></script>
Or even:
<script src="/js/library-x.js?v=NPM_PACKAGE_VERSION"></script>
PS: At config/globals.js I have something like:
module.exports.globals = {
....
package: require('../package.json')
};
The only problem is the grunt linker, that replace the string at my layout every time it lifts...

Related

Why the js filename need to be lowercase when adding to a view?

I have a js file named "CustomScript.js"
When I tried to inject it to a view, I have to convert the filename to lowercase, otherwise it didn't work. Is there any specific reason?
#section Scripts {
<script type="text/javascript" src="/js/customscript.js"></script>
}

Semantic ui sidebar implementation

Hello how do i implement the sidebar from semantic ui? I would like to use the first example on the list.
http://semantic-ui.com/modules/sidebar.html#/definition
I tried copy-pasting the whole div section and putting it on my html
For the javascript(? not really sure), the
$('.left.demo.sidebar')
.sidebar('toggle')
;
i tried putting it on
button onclick , and
function then using href to call
but sidebar is not showing.. what am i doing wrong
You have to include the jQuery library in the <head></head> section of your page:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
And the semantic.js file:
<script language="javascript" src="[your path here]/semantic.js"></script>
Which you have to download from:
http://semantic-ui.com/
(It's located inside the folder dist. Copy that file in the desire location and populate src with the right path)
BETWEEN <HEAD></HEAD>:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language="javascript" src="[your path here]/semantic.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.left.demo.sidebar').sidebar('toggle');
});
</script>
When you add jQuery to your project you can trigger your sidebar by adding this code to your .js file:
$('.element.to.trigger.sidebar').on('click', function () {
$('.left.demo.sidebar')
.sidebar('toggle');
});

How to set an API key when using Google's script loader?

I registered my project and generated a browser key at https://code.google.com/apis/console/.
Now how do I use that key when using the Google Script Loader?
I've been doing this, which works (with or without the key parameter), but even after several weeks the API console shows no requests:
<script src=//www.google.com/jsapi?key=my_key"></script>
<script>
google.load('maps', '3.10', { other_params : 'libraries=places&sensor=false', callback : ... })
</script>
The key is useless for the jsapi, you must append it to other_params:
<script>
google.load('maps', '3', {
other_params: 'key=my_key',
callback: function(){}
});
</script>
When using charts/loader you have to do something like this:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
...
</script>
Note the mapsApiKey property.
As described in https://developers.google.com/chart/interactive/docs/gallery/geochart

jQuery .Load and iis7

I am trying some AJAX calls for the first time. My site is hosted on my own IIS7, (http://myUserName:8078/HomePage.aspx).
Here is the jScript.
<script type="text/javascript" src="jQuery1.4.2.js"/>
<script type="text/javascript">
$(document).ready(LoadText);
function LoadText() {
$("#Content1").load("data.txt");
}
"content1" is a content place holder.
My IIS is set to .net 4 too.
My problem is that the data.txt contents is never loaded. It is in the same directory as the page. I haven't got much experience in IIS so I am wondering if I am missing a setting or something.
Thanks
You can't use a single-tag XHTML-style script tag for JavaScript. Change your first line to:
<script type="text/javascript" src="jQuery1.4.2.js"></script>
For some reason, the script tag can't be shortened down to just a single tag, you have to have separate opening and closing tags.
I recommend you pass the ClientID and file path into the function as arguments, but the code below should work:
<script type="text/javascript" src='<%= Page.ResolveUrl("~/jQuery1.4.2.js")%>'></script>
<script type="text/javascript">
$(document).ready(function() {
LoadText();
});
function LoadText() {
$("#<%= Content1.ClientID %>").load('<%= Page.ResolveUrl("~/data.txt")%>');
}
</script>
Is data.txt in the root folder of your site? If so, the .load() method takes a URL so try "/data.txt"
LoadText() is a function. Try:
$(document).ready(
LoadText();
);
Also I would suggest using lower camel case for function names. Upper camel case functions as in LoadText() suggests by convention that it is a contructor.
$(document).ready(
loadText();
);
You can also log something in the loadText() function to verify that it actually gets executed.
function loadText() {
$("#Content1").load("data.txt");
console.log('tried to load data.txt');
}

Calling a function of en external javascript file

In general... How can I make a call on a function of an external java script file?
More specific...
In the head tag i have
<script type="text/javascript" src="JScript/FontSize.js"></script>
The external javascript file, (that i would like to call) FontSize.js contains the following functions.
function checkCookie()
function setCookie(c_name, value, expiredays)
function getCookie(c_name)
function increaseFontSize()
function decreaseFontSize()`
The FontSize.js is located at the ~/Jscript/ directory
I guess the body on load should contain something like
<body onload="/JScript/Fontsize.js/checkCookie()">
Of course nothing works as it should because, i do not know how to make the call to a function to an external js file
You just call it as if it were local :)
<body onload="checkCookie()">
Or, do it in script:
window.onload = checkCookie;
When you declare a function and it's not in another object/namespace, it's just globally available, and you can call it as if it immediately preceded your current code. By default these functions will be on the window object, you can see a short demo here.
For example (doesn't matter where this function's defined, external or not):
function myFunc() { alert('hi'); }
myFunc();
window.myFunc(); //same call, unless there's *another* myFunc in a local-er scope
<html>
<head>
<script type="text/javascript" language="javascript" src="main.js"></script>
</head>
<body>
<!--The extranal main.js file contains samp() function.. -->
<script>
<!-- samp(); -->
</script>
</body>
</html>

Resources