Using ResolveClientUrl() in external JavaScript files - javascript

I found that ResolveClientUrl() works as expected when JavaScript is embedded in ASPX page, however it doesn't resolve anything when external script is referenced in ASPX like this:
<script src="../Javascript/sessionManagement.js" type="text/javascript"></script>
Is there a way to make ResolveClientUrl() work in external JS files? I was expected that it would because this file IS included in ASPX page but this is not the case.
I found a rather ugly workaround - to include external JS file in ASPX page like this:
<script type="text/javascript" language="jscript">
<!--#include file="../Javascript/sessionManagement.js"-->
</script>
It works (ResolveClientUrl() actually resolves path) but I've never seen external JS files referenced like that and am not sure this is the way to go.

<script type="text/javascript">
var myUrl = '<%= ResolveClientUrl("MyURL") %>';
</script>
<script type="text/javascript" src="../JavaScript/sssionManagement.js"></script>
and in your sessionManagement.js, you can simply use the myUrl variable above

Related

jquery not running with rails in external js file

i am using rails and trying to call jquery code present in external js file whose path i have specified correctly in my html file.The jquery code is executing correctly when i include it directly in html file.
my test.js
$(function(){
alert("yes");
});
and index.html.erb :
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/views/test.js"></script>
</head>
jquery executes when included inside html
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
alert("yes");
});
</script>
</head>
the test.js path is correct since other javascript functions are getting called from the same file but not jquery code
why you have head tag in index.html.erb file . It already included in layout/application.html.erb file . in this way you are including jquery file twice. If you include two versions of jquery in any html they always create issue.
In my suggestion you need to remove your head tag from index file completely . And what ever js file you want to include, include it in your application.js file. for current scenario you can do it like below.
//= require views/test
#user3946910
Try like this.
in your index.html
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/views/test.js"></script>
</head>
and in your test.js file add this.
$(document).ready(function(){
alert("yes");
});
Like this just import all plugins in the html itself, and create fresh .js page to write just your own script.
I hope it will help.

jquery.i18n.properties not working

I have a problem using this jQuery internationalization. I added the jquery.i18n.properties.js, jquery.i18n.properties-min.js, and jquery-min.js files to my resources folder.
In my jsp I added this file
<script type="text/javascript" src="<c:url value="/resources/js/jquery-min.js/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.i18n.properties.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.i18n.properties-min.js" />"></script>
Then in the JS file I'm trying to load the .properties file
$(document).ready(function(){
jQuery.i18n.properties({
name:'Messages',
path:'webapp/WEB-INF/messageSources/',
mode:'both',
language:'en',
callback: function() {
alert(jQuery.i18n.prop('registration.field.empty'));
}
});
but it prints out the key ('registration.field.empty') as a message instead of the value.
My property file is: Messages_en.properties
In the first line of your jsp you have this:
<c:url value="/resources/js/jquery-min.js/>"
But it needs to be this:
<c:url value="/resources/js/jquery-min.js" />
You just made a typo... and I'm not familiar with jsp but don't you have to escape the double quotes with \ before each one?
Seems that the WEB-INF directory is restricted to be accessed from outside of the servlet-context. And javascript is definitely out of the servlet-context.
You need to copy your MessageResouces-files (language-files/properties) from WEB-INF into another directory,...
e.g. create directory /i18n (on the same level as WEB-INF, but not inside WEB-INF!)
Put properties files into the created directory
Retry to access the files

Does jQuery have to be written in the <script> tags in HTML?

I'm learning jQuery, and I'm running into a small problem. jQuery code works when I put it directly in my tags in my HTML, but when I import it from a different file, nothing happens. These are my script tags in HTML:
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/test.js"></script> <!--This is my jQuery code-->
test.js contains the following code:
$(document).ready(function(){
console.log("Hello");
});
When the page loads, the console is empty. However, when I paste the following code as so, in my html document, everything works fine.
<script>
$(document).ready(function(){
console.log("Hello");
});
</script>
Do you really have a folder named scripts in the folder where your HTML files exist? Otherwise try changing this src="scripts/jquery-1.10.2.js" to probably this: src="/scripts/jquery-1.10.2.js"
You can check by browsing to http://yoururl/scripts/jquery-1.10.2.js, the Jquery code should show up. If it's not there, you have to make sure that you include the right folder/file.
Yes.You will be able to push your scripts in 2 ways::
1-push your scripts in tag like>>
<script>$(document).ready(function(){alert("Welcome Dear");});</script>
2-push your inline scripts with attributes like>>
<button type='button' onclick="$(this).hide()">Hide Me</button>
make sure that the scripts folder contain test.js make sure that the extension is correct ..sometimes I make the same same mistake, instead of test.js i save it as test.js.txt
Try putting
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
in the body rather than the head.
Credits to this answer for giving the idea

cant get jquery to work with php file

I have a linux webserver that has /var/www configured in the Apache2.conf file as the DocumentRoot. Next I have my jquery core file located at /var/www/js/jQuery_v1.4.2.js (a central location for all my websites to access.
The .php index file is located at /var/www/AOI/aoiparse.php, where the aoifunctions.js file is also located. My <head> tag looks as follows:
<script type='text/javascript' scr='/js/jQuery_v1.4.2.js'></script>
<script type='text/javascript' scr='aoifunctions.js'></script>
my aoifunctions.js file has the following in it in order to verify that the script link works:
$(document).ready(function(){
alert("hello");
});
My problem is that I cannot get the alert() to work. I'm not getting an error message so I do not know where the problem is.
You can try <script type='text/javascript' src='../js/jQuery_v1.4.2.js'></script>
(The attribute is src, not scr, plus your path was incorrect)
put the jquery file in /var/www/AOI/js/ and then
remove the first /
<script type='text/javascript' src='js/jQuery_v1.4.2.js'></script>
so it lies in a subdirectory to your main page
or use this if you want to leave it where it is:
<script type='text/javascript' src='../js/jQuery_v1.4.2.js'></script>
You misspelled "src" in your <script> tags. It's short for SouRCe.
<script type='text/javascript' src='/js/jQuery_v1.4.2.js'></script>
<script type='text/javascript' src='aoifunctions.js'></script>
If you used Firebug you'd have been able to easily tell that the scripts weren't loaded.

ASP.NET MVC jQuery autocomplete with url.action helper in a script included in a page

I have been building my first ASP.NET MVC web app. I have been using the jQuery autocomplete widget in a number of places like this:
<head>
$("#model").autocomplete({ source: '<%= Url.Action("Model", "AutoComplete") %>' });
</head>
The thing is I have this jQuery code in a number of different places through my web app. So i thought I would create a seperate javascript script (script.js) where I could put this code and then just include it in the master page. Then i can put all these repeated pieces of code in that script and just call them where I need too. So I did this. My code is shown below:
In the site.js script I put this function:
function doAutoComplete() {
$("#model").autocomplete({ source: '<%= Url.Action("Model", "AutoComplete") %>' });
}
On the page I have:
<head>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/site.js" type="text/javascript"></script>
<script type="text/javascript">
doAutoComplete();
</script>
</head>
But when I do this I get an Invalid Argument exception and the autocomplete doesnt work. What am I doing wrong? Any ideas?Do i need to pass something to the doAutoComplete function?
The <%= will not be evaluated in your external javascript.
Solution: pass the URL as a parameter to your javascript function.
<script>
doAutoComplete('<%= Url.Action("Model", "AutoComplete") %>');
</script>
function doAutoComplete(url) {
$("#model").autocomplete({ source: url });
}
You need to put the function call in a script block, and make sure jquery is loaded before your site.js ...
<head>
<script src='path/to/jquery.js'></script>
<script src="../../Scripts/site.js" type="text/javascript"></script>
<script>
doAutoComplete();
</script>
</head>
EDIT:
Maybe the '<%= ... =%>' tag isn't being evaluated server-side, before the function gets sent to the browser? Here is an article on this: http://www.west-wind.com/weblog/posts/252178.aspx
Here is a quote from the post:
There's also a problem if you need
access to the [ASP.NET] variables in
.js files - you can't embed script
tags into a .js file so getting a
dynamic value into a static file is
problematic

Categories