Javascript code is missing from page source code
Question
I have a Javascript code to translate a few parts of my HTML page in other languages. You can read a few more details about it in another question I asked here: Multilanguage static website with JQuery
I have the same Javascript code in every HTML page in my website. In Home page (www.mywebsite.com) works, but in any other longer path (www.mywebsite.com/anotherpage) doesn't work. The weird here is that the code is totally missing from the source code of the page (right click --> view source code)
Here is a part of the code (the whole page is huge and I cannot paste it all)
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="./static/css/bootstrap.min.css" rel="stylesheet">
<link href="./static/css/slider.css" rel="stylesheet">
<link rel="stylesheet" href="./static/css/font-awesome.css" />
<link rel="stylesheet" href="./static/css/jquery-ui.css" />
</head>
<body>
....
</body>
<script src="./static/js/jquery.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/js/bootstrap-slider.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="./static/js/jquery.dataTables.min.js"></script>
! a few other script codes that works without a problem in this part !
! this is the one that is missing from the code
<script type="text/javascript">
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(function() {
var language = getCookie("language");
if (language == null) {
var language = 'English'
}
alert(language)
$.ajax({
url: './static/languages/languages.xml',
success: function(xml) {
$(xml).find('translation').each(function(){
var id = $(this).attr('id');
var text = $(this).find(language).text();
$("." + id).html(text);
});
}
});
});
</script>
I have tried to put the script code on the top of the page, but I have the same problem. I have tried to put the full url on xml file without a success. I don't have any error on the console and the script doesn't run neither it is on the page source code.
SOLVED:
If I load the script code from an external file, then it works. The external file has exactly the same code, so it wasn't a typographic error.
2 answers
solution1
0 2014-06-11 10:49:09
I think you can use <base> tag:
<head>
<base href="http://www.mywebsite.com/" target="_self">
</head>
or use "absolute" paths like <link href="/static/css/bootstrap.min.css" rel="stylesheet"> (without dot at the begining). If there is a dot at the begining it's considered to append to current path (in your example it gives www.mywebsite.com/anotherpage/static/css/bootstrap.min.css instead of www.mywebsite.com/static/css/bootstrap.min.css ). The same rule is for ajax URL. See .
Additionally, that there is not any ajax request to xml file in your network tab is strictly related to... missing <script> (obviously...). But it's hard to tell why that script is missing, because you didn't provide information about how you generate html code (it's static html file or template? do you use any framework?).
solution2
-1 2014-06-11 10:35:16
You should try to extract your functions into an external file, and reference it just like the rest:
<script src="../static/js/bootstrap-slider.js" type='text/javascript'></script>
Also, it's not considered good practice to include js code on an html page, your code can be deleted when removing html elements, etc.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.