I want to implement this example code from w3schools.com using Django. The code loads a text file into a html file using the jquery load() function. The code looks like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
My question is now, how do I store my text file such that the load function has access to it in my Django project?
Put the 'demo_test.txt' in your static folder and make sure to specify your static url in settings. Let's say your static url is "cdn" pointing to folder "static". In that case you could use $("#div1").load("/cdn/demo_test.txt");
In settings.py:
STATIC_URL = '/cdn/'
STATIC_ROOT = '/path/to/your/static'
Related
This question is not a duplicate!
I have tried many methods, yet they havent worked. I cannot tell what i am doing wrong. I have the src in the top script tags and i used $(document).ready
Here is the code:
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<button id="button">Button</button>
<script>
$(document).ready(function() {
$("#button").click(function() {
alert("Test");
});
});
</script>
</html>
Does the file jquery-3.3.1.min.js exist in the same path as your html file?
If not, you need to download jQuery or link to a CDN instead of a local file.
Your "jquery-3.3.1.min.js" file may not present in your working path. Make sure you provided the correct path or else you can load jquery from CDN directly.
Or
Try moving the script inside 'head' tag.
Iam using load() for loading external html file.
$("#header_section").load("header.html");
$("#sidemenu_section").load("side_menu.html");
Here, HTML file is loaded and css also loaded but script file is not loading in the page
<script src="js/utility.js"></script>
I tried to declare the above script file inside the head and inside the body. Both are not working.
Check your relative path to the utility.js file and make sure to load juery.js library before load utility.js file.
and finally try this,
<script type="text/javascript" src="${pageContext.request.contextPath}/js/utility.js"></script>
to load the utility.js file.
I think you forget to add jquery.min.js file. use below code.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/utility.js"></script>
</head>
jQuery may only execute your code with the type attribute set to "text/javascript", per this bug filed a long time ago:
http://bugs.jquery.com/ticket/3733
Try this ...
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>
The jQuery code that adds HTML to the DOM always strips out <script> tags. It runs them and then throws them away.
An exception to that behavior is when you use "$.load()" with the hack that allows you to load a fragment of a page:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
In that case, the scripts are stripped and not evaluated/run.
I am using a jQuery plugin it has plugin.css and plugin.js as dependencies and code is in script.js. I cant have plugin.js and script.js merged because i am using plugin only on one webpage of my website.
In order to make sure plugin.css is loaded before execution of plugin.js and script.js, normally I have no option but to have plugin.css in <head> which causes render blocking(until all resources in head are loaded,
browser doesnt render html).
Normal Way: Having CSS in <head> and JS before </body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/plugin.css">
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="/js/plugin.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
Proposed Way: Load CSS and JS via ajax calls and inject them when all of them are loaded, using jQuery $.when promise
<!DOCTYPE html>
<html>
<head>
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script class="load-plugin">
$(document).ready(function(){
var loadPlugin = {
css : $.ajax({ url: $(".jquery-plugin-css").data("src") }),
js : $.ajax({ url: $(".jquery-plugin-js").data("src")}),
};
var scriptJs = $.ajax({ url: $(".script-js").data("src") });
$.when(loadPlugin.css, loadPlugin.js, scriptJs).then(function(){
loadPlugin.css.done(function(data){
$(".jquery-plugin-css").html(data);
});
loadPlugin.js.done(function(data){
$(".jquery-plugin-js").html(data);
});
scriptJs.done(function(data){
$(".script-js").html(data);
});
});
});
</script>
<style class="jquery-plugin-css" data-src="/css/plugin.css"></style>
<script class="jquery-plugin-js" data-src="/js/plugin.js"></script>
<script class="script-js" data-src="/js/script.js"></script>
</body>
</html>
This improved my first render time from 3.4 secs to 2.4 secs and total page load time from 8.5secs to 8secs.
But this has some limitations:
Publicly hosted urls cant be used because the urls inside the plugin files like background-images inside css files if mentioned relative to their directory then the path changes after code is pasted into html.
As the injected code is not part of the source files or external scripts they cant be debugged in developer tools.
This way of lazyloading plugins has pros and equal amount of cons. Can anyone suggest is it worth it to do it this way or any better way to do things.
What I would try is:
Combine the JS files so that the dependent code is after plugin.js
Insert a script at the bottom of the page to dynamically load the CSS first and the combined JS second. If you need example code, you might look at https://github.com/filamentgroup/loadJS/ and https://github.com/filamentgroup/loadCSS/.
Using this approach, neither the CSS nor the JS blocks rendering. The CSS is appended to the DOM, so there should be no problems with relative URLs.
I have a part of html code which is repeating on every of my page and i want to reuse it.
There is already a very nice link:
Include another HTML file in a HTML file
I have used jQuery to load the html file (separate html file which i call template).
If that html file is static everything is working fine.
But if my template file includes the elements which are using class (CSS) which is using java script to load - then it's not being loaded. Even if in original html file i am referencing correct css/java scripts in head section.
Any ideas ?
Thanks,
If you wanna include page1.html into an Div with id insert-into-me . page2.html.
Then using Jquery this will work!
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#insert-into-me").load("page1.html");
});
</script>
</head>
<body>
<div id="insert-into-me"></div>
</body>
</html>
Using JSP:
<%#include file="page2.jsp" %>
or
<jsp:include page="..." />
where you want to include in page1
How can I reference a remote JS file like Google Maps API url or any remote JS file path into my JSF 2.0 page?
What I understand is that this code
<h:head></h:head>
<h:body>
<h1>JSF 2 outputScript example</h1>
<h:outputScript library="js" name="example.js" />
</h:body>
will be rendered like this
<head></head>
<body>
<h1>JSF 2 outputScript example</h1>
<script type="text/javascript"
src="/JavaServerFaces/faces/javax.faces.resource/example.js?ln=js">
</script>
</body>
How can I reference external JS files if it by default points to src="/JavaServerFaces/faces/javax.faces.resource/?
Just include them the normal html way, e.g.:
<h:head>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places..."
type="text/javascript">
</script>
</h:head>
You can mix html tags and JSF tags in a facelet. Put it in the head section of your page.