How to use jQuery with Django? - javascript

I am interested in using the jQuery tablesorter but somehow am unable to.
I have followed the instructions and have placed jquery.js and the tablesorter.js in the same folder as my templates (the folder where the html file is). Unfortunately, when trying to access the .js files, it keeps hitting a 404, which I'm assuming means that the files are not on the correct path.
Any ideas for this fix?
Does django have a special place to place these js files? (not in the templates folder?)
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type ="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
The myTable is the same exact table as the one in the examples

Usually jquery, js, css, images and most of other static contents are handled as static files and not as django templates. Read managing static files docs.

For jQuery, you can use Google API :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And for Django, Did you configure a path for your scripts/médias etc... ? (in settings.py maybe ?)

To add to what others have written, if you want to make JQuery available throughout your site/app and you don't like external dependencies such as Google you can do the following:
Download the latest "compressed, production" JQuery at https://jquery.com/download/ - for example, on the command line in your static directory (might be <projectname>/static): wget https://code.jquery.com/jquery-2.1.3.min.js
Add a reference to load JQuery in your site's "base" template file (might be <projectname>/<appname>/templates/base.html) - for example: Add <script src="{% static 'jquery-2.1.3.min.js' %}"></script> in the <head> section
Test the JQuery installation by adding something like the following to one of your templates:
<script type="text/javascript">
$(document).ready(
function(){
$("#jqtest").html("JQuery installed successfully!");
}
);
</script>
<p id="jqtest"></p>
If necessary/usual after making template updates, restart your Django server, then load a page which uses the template with the test code

Related

Angular custom scripts loader

I have an Angular 7 CLI app which is served by ASP.NET MVC.
In Index.cshtml file I have these lines:
<script type="text/javascript" src="~/app/runtime.js"></script>
<script type="text/javascript" src="~/app/polyfills.js"></script>
<script type="text/javascript" src="~/app/scripts.js"></script>
<script type="text/javascript" src="~/app/vendor.js"></script>
<script type="text/javascript" src="~/app/main.js"></script>
Everything works fine.
However sometimes during development these files are not generated due to compilation errors etc.
I'm wondering is there a way to write a custom manual loader that will try to fetch these files and if any of these are not found will pop up a nice message to the developer.
Basically a really simple pre-loader to the application.
Any input is greatly appreciated.
In my case, what I do when it comes to altering the index.html is having a controller, which I call SpaController with an Index (default) action. Then, I load the index.html file (which is really small) and patch it with all the changes I want to apply. After being patched and downloaded on the browser, the rest of the communication is done through API REST, so it's just a small patch.
In your case, I would use that action of that controller I mentioned above and check if all the tag scripts are included. If not, you have flexibility to alter index.html and do what you want, like showing an error, or even stop the application.

JS files are not linking to asp.net MVC view

I am creating an asp.net MVC application.
I have a view named "receive" and it placed in Views/Main folder.
I am trying to add js file.
In intellisense, I am getting access to js file functions.
But when I run the application, the js file is not linking.
My view is as follow
#model dSite.Models.MModels
<script type="text/javascript" src="../../Scripts/Jquery-2.1.js"> </script>
<script>
$("#btn").click(function ()
{ alert("aa");
});
</script>
#{
ViewBag.Title = "receive";
}
<h2>
receive</h2>
<input type="text" id="txtname" placeholder="enter name" />
<input type="button" id="btn" value="click here" />
And my Scripts folder is at the root.
How can I link my js file to my view? I have tried the above but it's not working
following is the file structure
Js files structure
Firstly jquery is being loaded! You would have seen a $ is not defined error in the browser console if it wasn't.
The real problem was that you have the following script at the top of the page but not inside document.ready.
<script>
$("#btn").click(function () {
alert("aa");
});
</script>
What happens is as the view is rendered, the first line of the script is trying to attach a .click() event to the element with id="btn", but at this point that element does not exist in the DOM (its further down the page) so the you actually attaching the event to an undefined element (one that does not exist).
Unless you place your scripts immediately before the closing </body> tag, you should always wrap your scripts in $( document ).ready()
Use the built in MVC bundling on your css and js files.
In your App_Data/BundleConfig.cs do this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
Replace your script tag in your view with this:
#Scripts.Render("~/bundles/jquery")
Update your script tag to this:
<script type="text/javascript" src="#Url.Content("~/Scripts/Jquery-2.1.js")"></script>
I believe in MVC 4+ (Razor 2) you can simplify this to
<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>
The tilde gets translated into your web application's root path so that you can specify paths relative to that.
When a view is created and rendered all scripts are published in a folder Scripts at the root of your website so when you reference a script you must reference this folder. The scr atribute of the script references a absolute or relative url. Those can be referenced directly with a string or you can use the framework to generate one for you.
Check Absolute urls, relative urls, and...? to learn more about absolute and relative urls.
Some examples of the above using a string to reference the script's address
<script type="text/javascript" src="/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="http://mysite/Scripts/Jquery-2.1.js"></script>
You can also use url helpers like #Url.Content("~/Scripts/Jquery-2.1.js") and you will get an url generated by the framework acording to your defined routes.
<script type="text/javascript" src='#Url.Content("~/Scripts/Jquery-2.1.js")'></script>
I personaly recommend you that you use the MVC bundling and minification feature that will come handy in a production enviroment. This is located inside the BundleConfig.cs and you will have to specify which files you want to be generated.
bundles.Add(new ScriptBundle("~/bundles/myscript").Include("~/Scripts/myscript.js"));
Where myscript points to the javascript file you want to include and later reference it using
#Scripts.Render("~/bundles/myscript")
This will generate a script tag like the one you are using.

samsung smart TV how to include js library to other js files

I've written my own js library, how can i make other existing js files use it. For example, i created a video project, which include a default homepage scene (including homepgage.css, homepage.html and homepage.js) and a default detail scene (including detail.css, detail.html and detail.js). Then i created my own js file "lib.js" which fetches all video files from my server. Now the question is: how to make the file homepage.js able to use methods of "lib.js". I tried to include lib.js path in the file index.html by using:
<script type='text/javascript' language='javascript' src='scenes/detail.js'></script>
<script type='text/javascript' language='javascript' src='scenes/homepage.js'></script>
<script type='text/javascript' language='javascript' src='scenes/lib.js'></script>
I also include script tag:
<script type='text/javascript' language='javascript' src='scenes/lib.js'></script>
in the file homepage.html.
but both of them do not work.
Anybody know how to solve this ?
SmartTV application acts like normal website. If you want to use methods from lib.js you should include script before those methods are used. In your case problem may be in accessing methods from lib.js before they are declared. You should check emulator console to find such errors.

Including JQuery library

I have the following file organization:
Project > SubFolder1> SubFolder2> Subfolder3> Test.aspx
and I am trying to include Jquery library from
Project> Scripts
in test page I did both:
<script src="~/Scripts/jquery-1.9.1.js"></script>
and
<script src="../../../Scripts/jquery-1.9.1.js"></script>
but it gives me that the resource cannot be found and the URI in source view is:
localhost:44388/Project/SubFolder1/SubFolder2/SubFolder3/~/Scripts/jquery-1.9.1.js
How can I include the library correctly?
Try this (without tilde):
<script src="/Scripts/jquery-1.9.1.js"></script>
Or if you are in an ASP.NET MVC context:
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
I would suggest keeping all the javascript files in a seperate folder in the ROOT folder and name it 'js'.
For ex if your root folder is PROJECTS, then make a new folder 'js' and paste all you javascript and jquery files in this folder then you can reference this files in this manner
<script src="js/jquery-1.9.1.js"></script>
I have to include it like this
<script src="/Project Name/Scripts/jquery-1.9.1.js"></script>
You could use a CDN for these kind of universally known, general purpose libraries.
A Content Delivery network gives you the advantage of faster load time, because of the clients will be served by the nearest/fastest server (less network latency), and of course, if the client already visited some other website which also made use of jQuery over the CDN, there's a big chance the file is already in the browsers cache, so no download of the file is actually needed.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
See
http://jquery.com/download/

Load JavaScript in Google App Engine

I got so confused loading JavaScript in Google App Engine. I am using the Django template.
First, in my base HTML file, I can't load my downloaded jQuery code from local say, d:/jquery.js, like
<script src="d:\jquery.js" type="text/javascript" ></script></head>,
This line is in my base HTML file. It works when I load jQuery from remote. Like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"type="text/javascript" ></script></head>
I don't know why.
Second, I can't load my own-created JavaScript code to my HTML file. Say I create a JavaScript file, like layout.js, and I try to load it like this in my child HTML file, which, by the way, inherits from the base HTML.
<body><script src="layout.js" type="text/javascript"></script></body>
And it doesn't work at all. The only way it works I have tried is when I put the actual JavaScript code in the body of my base HTML file. Like
<body><script>
$(document).ready(
$("#yes").click(function() {
$("#no").hide("slow");
}));
</script>
I don't know why either... How do I fix it?
AppEngine doesn't know anything about paths on your local system; it will only upload files that you configure it to. Do this by having a line like this in your app.yaml file:
handlers:
- url: /js
static_dir: js
In this case, /js represents a subdirectory of your main project directory, and you can put all of your static JavaScript files in there. They will be uploaded to the production server, and you can include them in your HTML with:
<script src="/js/jquery.js" type="text/javascript" ></script>

Categories