I have a folder 'test' in the root of my hosting. I downloaded a sorter plugin from http://tablesorter.com and uploaded 'jquery' folder in the 'test' folder i created. Then I made an html table in the index.html file in the 'test' folder.
I entered the below within the head tag
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
<script type="text/javascript" src="jquery/jquery.tablesorter.js"></script>
Then I entered the following script within the head tag
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
In the table I entered
<table id="myTable" class="tablesorter" border="1" width="100%">
Still the sorter is not working... As far as I know, I followed proper instructions. What did i do something wrong?
MY path is public_html/mydomain.com/test
The the files under test folder is
jquery
index.html
The files under jquery folder is
jquery-latest.js
jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.min.js
After playing with the code for a while i found the problem. I downloaded a bootstrap template and added a table to it and at the bottom, just before /body tag there are 3 paths
<script src="./js/jquery-1.10.0.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
If I remove this, the sorter works but then the website stops working. Any ideas???
I did a lot of juggling with the paths and I did not understand the logic but it worked.
This is what I did
I kept the following in head tag
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
<script type="text/javascript" src="jquery/jquery.tablesorter.js"></script>
I kept one more instance of the following in before /body end tag
<script type="text/javascript" src="./js/jquery-latest.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
and placed both the files in both the folders /jquery and the default /js folder included in the website template
Phew!
Related
I am building a website and I'm trying to determine if there is a way to combine/consolidate specific files together without combining them into 1 giant file. I'm trying to clean up my pages I hate having to scroll thru my list for example
<!-- My plugins -->
<script src="./assets/js/plugins/moment.min.js"></script>
<script src="./assets/js/plugins/bootstrap-switch.js"></script>
<script src="./assets/js/plugins/bootstrap-tagsinput.js"></script>
<script src="./assets/js/plugins/bootstrap-selectpicker.js"></script>
<script src="./assets/js/plugins/jasny-bootstrap.min.js"></script>
<script src="./assets/js/plugins/nouislider.min.js"></script>
<script src="./assets/js/plugins/bootstrap-datetimepicker.js"></script>
<script src="./assets/js/photorevealer.js"></script>
<script src="./assets/js/type.js"></script>
I want to create a pointer or something similar to just to go something like
<link href="js_scripts.lst">
and that file is something like
<script src="./assets/js/plugins/moment.min.js"></script>
<script src="./assets/js/plugins/bootstrap-switch.js"></script>
export js_script
that way I can create 1 file for all the css, 1 file for js files, 1 file for google fonts and so on.
Make one file, links.js:
function loadjscssfile(filename){
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
if (typeof fileref!="undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
Then call the function for all your files, again in the links.js file:
loadjscssfile("./assets/js/plugins/moment.min.js");
loadjscssfile("./assets/js/plugins/bootstrap-switch.js");
loadjscssfile("./assets/js/plugins/bootstrap-tagsinput.js");
loadjscssfile("./assets/js/plugins/bootstrap-selectorpicker.js");
loadjscssfile("./assets/js/plugins/jasny-bootstrap.min.js");
loadjscssfile("./assets/js/plugins/nouislider.min.js");
loadjscssfile("./assets/js/plugins/bootstrap-datetimepicker.js");
loadjscssfile("./assets/js/photorevealer.js");
loadjscssfile("./assets/js/type.js");
And then load the links.js file from your index.html page:
<script src="links.js"></script>
And then your files will load!
Note: You won't see these links while you're coding, but they'll be on the website if you hit Inspect. It's just tidier when you're coding.
So, I am trying out jekyll and I have successfully added my .scss files and they are working but there seems to be a problem with the .js files.
I have tried adding .coffee files and adding the plug-in jekyll-coffeescript but that too isnt working
so my folder structure is this:
\javascripts
|__ main.js
\_includes
\_sass
\_layouts
\_config.yml
\index.html
now in the main.js file i just have
console.log("this worked");
alert("hello");
and I have a head.html in the _includes folder where I added
<script type="text/javascript" src="{{site.baseurl}}/javascripts/main.js" ></script>
when I load the page nothing is happening, why? what is the mistake?
I added the same thing like this and it worked
<script type="text/javascript" >
console.log("this worked");
alert("hello");
</script>
so why is the previous method not working
I have written nothing in the _config.yml file about any javascript
I assume that you have kept your main.js file under your_site/assets/js/javascripts/
Try this path to load the js file:
<script type="text/javascript" src="/assets/js/javascripts/main.js" ></script>
Also you can check localhost:port/assets to see other files as well.
Let me know if this helps.
i would like to add javascript to an html page. I don't want to have those scripts inline on the home page however, I would like them to be in an external javascript file. How do I link to an external javascript file so those scripts are run on the page?
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script> my jquesry scrips here
</script>
</head>
<body> somecodes </body>
</html>
Instead of
<script>my jquesry scrips here</script>
put
<script src="myscript.js"></script>
Of course you will have to create a file named 'myscript.js' and type javascript code in it.
For example, let say that you have all your javascript code in a file called 'functions.js', to link that javascript file to your html page just do it the same way you linked you jquery file.
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script src="functions.js"></script> <!-- linking your file -->
<script>
/*my jquery scripts here */
</script>
</head>
<body> somecodes </body>
</html>
Keep in mind that if the code in your 'functions.js' file needs jQuery to work correctly you have to add 'jquery.js' before adding your custom file, just as it is in the example.
In the map of your website create a file called script.js
put your jquery script in there
replace:
<script>my jquery scrips here</script>
with:
<script src="script.js"></script>
just like you did with the jquery.js, next time search the web before asking questions on SO.
Example
if you google "link javascript file" the first link is your answer to the question (link above is the website).
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.
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.