Soundcloud API ReferenceError: $ is not defined (JavaScript) - javascript

I had posted a question yesterday and thought I had fixed it on my own, but I guess I didn't. I am trying to use the SoundCloud API and I am getting an error: ReferenceError: $ is not defined.
I thought it may be due to loading jquery.js but it doesn't seem to make any difference.
Heres my code(Javascript)
SC.initialize({
client_id: 'hidden for privacy',
});
$(document).ready(function() {
SC.get('/users/5577686/tracks', {limit:7}, function(tracks) {
$(tracks).each(function(index, track) {
$('#tracktitle').append($('<li></li>').html(track.title));
$('#trackimage').append("<img src='" + track.artwork_url + "' />");
$('#play').append("<a href='" + track.permalink_url + "' >" + "Play" + "</a>");
});
});
});
And the HTML:
<!DOCTYPE HTML>
<html>
<head>
<script src="//jquery/1.10.2/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="soundcloud2.js"></script>
</head>
<body>
<div id="tracktitle"></div>
<div id="trackimage"></div>
<div id="play"></div>
</body>
</html>
Any help at all would be greatly appreciated. Thanks for reading

Are you using your local file system? If so, you won't be able to use a protocol relative URL.
You'll need to specify http. Try:
<script src="http://jquery/1.10.2/jquery.min.js"></script>

Your cdn URL is wrong
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Also if your pages is loaded from local file system(ie with protocol file:) this will not work, in that case you need to append the protocol to the resource url like http://code.jquery.com/jquery-1.10.2.min.js

Related

Reconcile load and reload Script.js

I am trying to reconcile this reload JS script found at Stack Overflow with a script used by my web app to read the load the script.js. Essentially the first cloudfare.com/ajax script says load the script.js and the second function says reload the script. Where source_code is the actual URL of the script.
The problem is it works 50% of the time. I know I am missing a something. It is so close.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
crossorigin="anonymous" async>
< function reload_js(src) {
$('script[src="' + src + '"]').remove();
$('<script>').attr('src', src).appendTo('head');
}
reload_js("source_code.js"); />
</script>
It work everytime but u did mistake by forgot a "<" in your code
function reload_js(src) {
$('script[src="' + src + '"]').remove();
$('<script>').attr('src', src).appendTo('head');
console.log($('head script')[0]);
console.log($('head script')[1]);
}
reload_js("source_code.js");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Including HTML page within HTML Page using jQuery

I am including a HTML page, named test.html in a webpage. As below:
<head>
<meta charset="utf-8">
<title>load demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Content I want to Include is here: </b>
<div id="success"></div>
<script>
$( "#success" ).load( "test.html", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#success" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
</script>
</body>
</html>
I get an error reading:
Sorry but there was an error: 0 NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file://machd/.../HTML/test.html'.
What does this error mean? And how best to solve it?
You can make use of Angular js for including another HTML file
Read docs here
https://docs.angularjs.org/api/ng/directive/ngInclude
Example:
<div class="container">
<div ng-include="'filename.htm'"></div>
</div>
Maybe you can try:
Give the absolute path to test.html as argument and debug
The only browser which allowed ajax requests through file:// protocol was old IE and was remove due to security issues. Your code will work fine on any web server such as XAMPP, or UWAMP. simply run Uwamp, put yout project to www folder and open http://localhost
I am in agreement with swornabsent and monxas above.
This code works without issue when uploaded and the page viewed on the server.
the easy way...
1> Add the js file and include code
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script> w3IncludeHTML();</script>
2> Just call your html file like example
<div w3-include-html="h1.html"></div>

Using easyxdm to read Cross-Domain Cookie data

I've got 2 domains - domain1.com and domain2.com - where domain1.com is my parent site and domain2.com is the child site. I'm setting cookies on domain1.com, but domain2.com needs access to those cookies.
I've researched a ton about this subject - JSONP, CORS, pick anything. EasyXDM seemed to offer a great solution. The messaging between domain2.com and domain1.com works as expected, but certain browsers, namely Chrome and IE, are not reading the cookie and therefore passing blank data.
Domain1.com has a page called status.php with the following data:
<?php
$guid = $_COOKIE['user_guid'];
?>
<!doctype html>
<html>
<head>
<title>easyXDM.Transport test</title>
<script type="text/javascript" src="/js/easyxdm/easyXDM.debug.js"></script>
</head>
<body>
<script>
var socket = new easyXDM.Socket({
onReady: function() {
socket.postMessage('<?php echo $guid; ?>');
}
});
</script>
</body>
</html>
Domain2.com has the following setup to receive the message from domain1.com:
var socket = new easyXDM.Socket({
remote: "http://domain1.com/status.php",
onMessage: function(message, origin)
{
alert("Received '" + message + "' from '" + origin + "'");
}
});
This works like a champ in FireFox, but Chrome and IE are returning an empty string, not getting the cookie data. Can anyone nudge me in the right direction with this? I can't set cookies on both domains, I just need to be able to grab the ID from the first one by any means necessary. Thanks!
As requested in the comments, here's the full code for Domain 2:
<!doctype html>
<html>
<head>
<title>Domain 2</title>
<script type="text/javascript" src="/js/easyxdm/easyXDM.debug.js"></script>
</head>
<body>
<script>
var socket = new easyXDM.Socket({
remote: "http://domain1.com/status.php",
onMessage: function(message, origin)
{
alert("Received '" + message + "' from '" + origin + "'");
}
});
</script>
<p>Hello World!</p>
</body>
</html>
Solved this with xdomain instead: https://github.com/jpillora/xdomain
Easy to implement and solved the problem of cross-domain data. Far from perfect, but until CORS is better supported and older browsers drop off, it worked.

Uncaught ReferenceError when accessing an object from another JS file

I have various JS libraries in my web application, which are loaded before my main JS file (main.js). One of these libraries is jshashtable, but when I try to create a new Hashtable object in main.js, Google Chrome and Firefox throw a ReferenceError, complaining that the variable does not exist.
Here is the <head> of the application:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/jquery-1.4.4.min.js"></script>
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<script type="text/javascript" src="/static/main.js"></script>
Here is the problem line in main.js:
posts = new Hashtable();
This line is inside a function called init which is called when the page has finished loading (using the jquery $(document).ready() function).
Any reason why Hashtable is not global? Google maps and jquery objects work with no such problem. The source of jshashtable can be seen on Google code.
Updated answer: The problem is that you've got a typo in the script tag:
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<!-- ^^---- here (the letters are transposed) -->
I couldn't understand why you would be running into a problem and decided to actually copy-and-paste your script tags and replicate the structure exactly on my machine. And things stopped working and my world tilted 3° counter-clockwise until I finally stared at them long enough to see it.
Provided that the jshashtable code really is at /static/jshashtable-2.1.js and your server is serving it up correctly (double-check on Chrome's resources tab in the dev tools), I can't see any reason for that. Your scripts are in the right order, and jshashtable's docs show using a global Hashtable (and the code link you gave clearly shows it creating one).
Edit: I've just replicated that same structure (same scripts, same order, using jQuery(document).ready(function() { ... });) on my own server, and am not having that problem. I can create a Hashtable and use its functions.
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='jquery-1.4.4.js'></script>
<script type='text/javascript' src='jshashtable-2.1.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<body>
</body>
</html>
My main.js:
jQuery(document).ready(function() {
try {
var ht = new Hashtable();
display("typeof ht = " + typeof ht);
display("ht.size() = " + ht.size());
}
catch (e) {
display("Exception: " + e);
}
function display(msg)
{
$("<p>").html(msg).appendTo(document.body);
}
});
Only difference is I'm not using a /static prefix, and I'm absolutely certain that makes no difference.

javascript, html document.write

I'm trying to write a javascript using document.write but for some reasons it doesn't work . I also need to make a kind of trick to 'obfuscate' the url and "src" attribute by automated bots .Any idea why ?
<script type="text/javascript">
document.write("<scr\" + \"ipt type=\"text\/jav\" + \"ascript\" s\" + \"rc=\"http:\/\/www.a\" + \"utotraderuae.net\/mem\" + \"bers.j\" + \"s\"><\/sc\" + \"ript>");
thanks in advance for any response.
It works fine with me, I just added the closing script tag at the end.
<script type="text/javascript">
document.write("<script type=\"text\/javascript\" src=\"http:\/\/www.autotraderuae.net\/members.js\"><\/script>");
</script>

Categories