Use js file as cdn in HTML - javascript

I made a library in jquery an hosted in to my shared hosting. That js file is accessible when I hit from browser . But if I set it in my html like cdn it's not working. That's mean if I use code directly without use separate file it works but when I keep that js code in a file and include file then not works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
body code ...........
<script src="https://mydomain/acdn/jsfile.js"></script>
</body>
</html>
My cdn file
<script>
$(document).ready(function() {
$.ajax({
url: '{{ url('get-list') }}',
.........................
})
</script>
here shows error Unexpected identifier in {{ url('get-list') }}

You JavaScript contains:
'{{ url('get-list') }}'
This appears to be some kind of template code that the server-side code which generates your HTML document will replace with some data.
When you take it out of the HTML document, it is no longer being generated by that server-side code so won't be replaced. The JS parser therefore attempts to parse it, fails, and throws an error.
Move the template code back inside your HTML, then read the data from the HTML document using the JS.
e.g.
<script src="..." data-url="{{ url('get-list') }}">
And then in your script:
const url = document.currentScript.dataset.url;
(Make sure you change any logic which escapes the data to make it safe to be injected into JS to logic which makes it safe to be injected in HTML).

Related

how do i import a html form into a separate file

I've been trying to import a html form and embedded it into a separate html file, my javascript to try and upload the file containing the form looks like this
<link rel="import" href="formhtml5.html" onload="handleLoad(event)"
onerror="handleError(event)">
var link = document.querySelector('link[rel="import"]');
var el = link.import.querySelector('#flexyForm');
document.body.appendChild(link);
however when I try and see if the form is uploaded my page is just blank? been struggling with this for days now and its driving me nuts, anyone got any guesses to see how it works?
If this is what you're looking for, it's possible with jQuery.
firstFile.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includeForm").load("formFile.html");
});
</script>
</head>
<body>
<div id="includeForm"></div>
</body>
</html>
formFile.html
<p>This is my Form</p>
Note: Your question is not clear, you're not uploading anything. Instead you're just importing some lines of code from another html file to yours. If yes, above code should work fine!
Also, If the included HTML file has CSS attached to it, it might mess up your page style. So better to do internal CSS or change the CSS external link in formFile as per link rules of firstFile.html
You can also use php in additional to JS to get the content of the second file.
<?php file_get_contents="path to your file here" ?>

`Uncaught SyntaxError: Unexpected token <` when referencing existing javascript file

Important edit at bottom of some strange behavior.
I'm trying to include a javascript file into my html via a <script> tag and I'm getting the error Uncaught SyntaxError: Unexpected token <
In case it matters, I'm using the Velocity templating engine.
Any help is greatly appreciated!
Here is my directory structure.
Here is my index.vm file.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Velocity Demo</title>
</head>
<body>
<input type="text" onkeydown="filter(this)"></input>
#foreach ($person in $personList)
<div>
<h4>$person.name</h4>
</div>
#end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/filter.js"></script>
</body>
</html>
And here is the javascript file.
function filter(element) {
$.ajax({
url: '/updateFilter?filter=' + element.value,
success: location.reload(true),
error: location.reload(true)
})
}
Editing to add this image. For some reason this is the filter.js file when I inspect the sources in Chrome.
EDIT: For some reason, every request other than the one I have mapped to the controller, including filter.js, is returning the raw html from index.vm
You have an unnecessary closing tag for your element - pasting your html into plnkr highlights this.
I would also perform a "trial and error" process of elimination, as it may not be the inclusion of the JS file that is the cause.

Get the contents of a div element from one site to another

I have an argument in JS which holds pretty much the data. It's the server information to my server. It changes often, e.g 20/64 or 32/64. You get the point.
I am trying to get the contents of the data to go on an external site, however, when I try, it doesn't work.
To summerise, I have a div which holds the data, I want to get that data using JS and put it on an external site which isn't using the same domain or web server.
HTML FILE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="serverstats-wrapper"></div>
<script src="import.js"></script>
</body>
JS File:
$(document).ready(function(){
$.post("query.php", {},
function (data) {
$('#serverstats-wrapper').html (data);
});
});
var the_main = document.getElementById("serverstats-wrapper");
var the_data = the_main.textContent ? the_main.textContent : the_main.innerText;
I want to get the text from the html file to the js file then take it to an external website.
Tasid! This won't work! JS does't have such a technique implementet. To do so, you need node.js. This allows you to send the data over a socket to your other webserver.
It does't work difrently, because JS is executed direct on your PC.
You can grab data from another site; but you cannot inject JS code into another site. Here are some methods to retrieve html from another site: Include another HTML file in a HTML file

Move javascript files into inline html

I have an application that allows the use of inline javascript, but not javascript from source files. I'm trying to modify a webpage to open on this browser, and need to know how to put the javascript files from the webpage inline.
Use <script> tags in your HTML. They can go anywhere - I prefer inside the <head> tag:
<head>
<script type="text/javascript">
// put anything here - any type of valid javascript works
// if you import jquery, you can use jquery here too!
</script>
</head>
You should place your imported code into the script tag in your HTML page (application in your case), look at the following example:
<html>
<head>
<script type="text/javascript">
//Import your JS script here, e.g.:
function doSomething(){
..
}
</script>
</head>
<body>...</body>
</html>

Javascript include technique with dynamic SRC="url"

Is it possible (and a good idea) to pass dynamic data to a JavaScript include file via a hash url?
Such as:
<head> <script src="scripts.js#x=123&y=456"></script> </head>
I am looking for an alternative to inline js in dynamically built pages:
<head>
<script src="scripts.js#x=123&y=456"></script>
<script>
$( document ).ready(function() {
pageInit(123, 456)
});
</script>
</head>
Is it a good idea to avoid inline js? How can you pass dynamic data without ajax which creates a needless roundtrip network request?
Note: The hash bang url is a special because the browsers ignore the hash portion of the url when checking the cache. At least for html files.
So all of these will reuse the index.html file it is in the cache:
index.html
index.html#x=123
index.html#x=345345
index.html#x=2342&y=35435
This same principle should hold true for javascript files. What I hope to achieve is to reuse the cache version of script.js from page to page.
Going to index.php, include this:
<head> <script src="scripts.js#x=123&y=456"></script> </head>
Then going to fun.php include this
<head> <script src="scripts.js#x=898756465&y=5678665468456"></script> </head>
Then going to see.php include this
<head> <script src="scripts.js#session=887987979&csrf_token=87965468796"></script> </head>
From page view to page view, pass whatever info the page needs via the hash bang while at the same time reuse scirpt.js from cache.
So, is it possible to read the hash bang info from within the scirpts.js?
If the HTML file you are creating is dynamic, then just create inline JavaScript. Writing an include will just create an extra request from the browser, which you can avoid in the first place.
Edit:
just include a JavaScript file that reads the URL, you don't need to pass any variables (but of course, you also could):
$(document).ready(function() {
// pseudo code
hashbang = location.href.substr(location.href.indexOf('#') + 1);
if (hashbang.x && hashbang.y) {
pageInit(hashbang.x, hashbang.y);
} else if (hashbang.csrf_token) {
// do something else
}
});

Categories