hi guys am new to java script..
I am trying to stream a sound track in soundcloud using their java script SDK but my code is not working please let me know how to make this work. Below is my code
<!DOCTYPE html>
<html><head>
<script src=”http://connect.soundcloud.com/sdk.js”></script>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script>
SC.initialize({
client_id: “15c5a12b5d640af73b16bd240753ffbb?,
redirect_uri: “http://connect.soundcloud.com/examples/callback.html”
});
$("#stream").live("click", function(){
SC.stream("http://api.soundcloud.com/tracks/293", {autoPlay: true});
});
</script>
</head>
<body>
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</body>
</html>
A couple of things I can spot, that may just be a result of copy & pasting your code, but good to check anyways:
You've got a combination of smart quotes (i.e. ”) and dumb quotes (i.e. ") in your code. Change all of the smart quotes to dumb quotes.
Your client_id has a ? appended to it. Replace the ? with a ".
Make those changes, reload and you should be off to the races.
Btw, for your example here you can also omit the redirect_url. Having it there won't do any harm though:
SC.initialize({
client_id: "15c5a12b5d640af73b16bd240753ffbb"
});
In addition to the changes mentioned above, changing the JQuery version to 1.4 worked for me.
Related
I'd like to use Vue.js within one page of a large legacy application. The idea is to replace the old JS+jQuery hodge-podge within a single page -- but leave the rest of the app (many other pages) untouched. So, not interested in using NPM, Node, Vue CLI, Webpack, Babel, etc., just yet.
This is a proof-of-concept before we invest in refactoring the entire frontend of the application.
The approach we followed was to include vue.js via as explained here: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include in that one page, and the use Vue only within that one page. This is the general page layout:
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
...
</head>
<body>
<div id="el">
... vue template ...
</div>
<script>
...
var vm = new Vue({
el : '#el',
data : {
config : <% config.json %> // this is server-rendered, using server templating
...
},
...
});
...
</script>
</body>
</html>
The page does work. However, I get the following error/warning within the Vue console:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Although I'd rather not, I can certainly move the page-specific JS to its own separate file (and that does eliminate the warning/error). However, I wouldn't be able to set vm.config with server-provided data along with the loaded page by using server-side template, e.g. config : <% config.json %>. I know I could GET it using JS separately, after pageload, via an AJAX call directly from the server, but for practical reasons I'd like to avoid doing that here.
I'd greatly appreciate any suggestions on how to get this to work nicely. I'm also open to other suggestions with regard to this general pattern, that don't involve retooling the front-end just yet.
And perhaps the answer is to ignore the warning, or somehow disable it, given the page does work as intended...
Thank you!
One simple solution here is to write it to the global window object. IIRC SSR frameworks like Angular universal/Nuxt/Next/... all use this approach.
window.__STATE__ = <% config.json %>
In your JS file you can then refer to the window.__STATE__ object.
var vm = new Vue({
el: '#el',
data: {
config: window.__STATE__
}
})
Ofcourse the order is important here:
<body>
<script>
window.__STATE__ = <% config.json %>
</script>
<script src="app.js"></script>
</body>
Grrr, after several days after enduring this error, I discovered this:
<fieldset id="el">
...
<div id="el">
...
</div>
...
</fieldset>
So the issue was repeating #el within same page.
My mistake.
Just wish the error message emitted by Vue had been a bit more useful!
Bottom line: The pattern described in the origional question works just fine without NPM/CLI.
I want to create a site with a 360 video thats streamed from my computers 360 cam (ricoh theta s) and uses the possibilites of a-frame. I did not have any luck with embedding youtube livestreaming within a-frame though. I would have a webserver and the stream would not be really public so maybe there is some solution that involves selfhosting? Does anybody have any experience with achieving sth like this? i cant find anything related so far and this plays a crucial role in my robotproject...
EDIT 1:
I might specify even more after some research:
it would be perfect if a-videosphere and a-video would support sth like hls or mpeg-dash - streams. since that would need some kind of player for chrome and android stuff i think the easiest route would be to support a motionjpg-support because they are very easy to create. flashstreams can be good too but i dont think there is a future for that.
is there anything like that in the planning by someone because i am quite sure that nothing like that exists yet... i took 2-3 days of researching and find nothing about that topic... just a getUserMedia for webcam example showed up but its not good for my purpose.
another approach i could live with would be a routine that just autoreloads pictures in a-sky (if possible without flickering). i tried to integrate javascripts that are supposed to do that within normal divs and so but nothing worked...
or did somewhere someone get a stream of any kind running in a-videosphere and if so how?
EDIT 2:
i got it working... somehow... not really but looks promising...
the stream is provided by "yawcam" which uploads a new picture every second to my ftp. if i now click on the red sphere the script starts via addEventListener 'click' and the content of a-sky gets updated... is there any way to make a loop out of that script so one doesnt have to click anymore and it just update itself every second?
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video — A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute( 'src', this.data + "?" + Math.random());
});
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="8" position="-8 2 -8" set-sky="image1.jpg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
so here is the solution for the proposed "kind-of" solution...
the picture "out" is updated via "yawcam" on my server every second and updated in the a-sky tag - even without flickering... so no sound but at least kind of a live-video-feed in a-sky.
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video � A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init: function() {
this.timeout = setInterval(this.updateSky.bind(this), 100);
this.sky = this.el;
},
remove: function() {
clearInterval(this.timeout);
this.el.removeObject3D(this.object3D);
},
updateSky: function() {
this.sky.setAttribute( 'src', this.data + "?" + Math.random());
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9 " fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336 " radius="2" position="-8 2 -8"></a-sphere>
<a-sky set-sky="out"></a-sky>
</a-scene>
</body>
I have this code on two pages on my site, but at one page the function doesn't work. Firebug shows me " $(...).tabs is not a function ". I don't understand why, can anyone tell me what is wrong ?
this is working:
http://www.invat-online.net/variante-rezolvate
this is not working:
http://www.invat-online.net/variante-explicate-limba-romana/varianta-01
Here is the code:
<div id="tabss">
<ul>
<li>Subiect I</li>
<li>Subiect II</li>
<li>Subiect III</li>
</ul>
<div id="SubiectI">content here</div>
<div id="SubiectII">content here</div>
<div id="SubiectIII">content here</div>
</div>
$(document).ready(function() {
$("#tabss").tabs();
});
You have relative paths to javascript files:
javascript/jquery-ui-1.9.2.custom.min.js
change them to absolute paths because you're using mod_rewrite module
/javascript/jquery-ui-1.9.2.custom.min.js
In first link the server is looking to the directory
http://www.invat-online.net/javascript/my_js_file.js (which exists)
but in the second one the path will be
http://www.invat-online.net/variante-explicate-limba-romana/javascript/my_js_file.js which do not exists
In my case:
I was using
jquery-ui-1.10.3.minimal.min.js
instead of
jquery-ui-1.10.3.custom.min.js
minimal version does not include ui.tabs.js, hence no ui.tabs function. Hope this helps someone else out there
The issue is that the jQuery UI js and css is not loading.
Try changing the path in you <script> tags to either the directory above ../javascript or the website root /javascript.
<script src="/javascript/head.min.js"></script>
<script src="/javascript/jquery-ui-1.9.2.custom.min.js"></script>
<link href="/stylesheets/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />
Your first demo loads:
http://www.invat-online.net/javascript/jquery-ui-1.9.2.custom.min.js
Your second demo attempts to load:
http://www.invat-online.net/variante-explicate-limba-romana/javascript/jquery-ui-1.9.2.custom.min.js
The last one results in a 404. You should correct the path of the later, perhaps instructing it to find jQuery UI in one directory above the current: ../jquery-ui-1.9.2.custom.min.js.
Try this:
#section scripts{
$(document).ready(function() {
$("#tabss").tabs();
});
}
Put #Scripts.Render("~/bundles/jqueryui") in the <body></body> of your layout.cshtml
The error Uncaught TypeError: $(...).tabs is not a function may also be produced when in a Django project on the Admin area and using django-tabbed-admin under the following setup:
Django = 1.10.5
django-tabbed-admin=1.0.4
DEFAULT_JQUERY_UI_JS = 'tabbed_admin/js/jquery-ui-1.11.4.min.js'
The problem is that the code in jquery-ui-1.11.4.min.js for this Django lib is as follows:
/*! jQuery UI - v1.11.4 - 2015-07-27
(...)*/
jQuery = jQuery || django.jQuery.noConflict(false);
and the code on django-tabbed-admin uses it this way (change_form.html):
<script type="text/javascript">
(function($) {
$(window).scrollTop()
$('#tabs').tabs({
{% if add %}
// when adding, don't select a tab by default, we'll do it ourselves
// by finding the first available tab.
selected: -1
{% endif %}
});
(....)
})(django.jQuery);
</script>
<!-- end admin_tabs stuff -->
To sort this out this should be what would be passed in to the IIFE instead of the (django.jQuery) as above:
<script type="text/javascript">
(function($) {
(....)
})((typeof window.jQuery == 'undefined' && typeof window.django != 'undefined')
? django.jQuery
: jQuery)
</script>
<!-- end admin_tabs stuff -->
I've reported this issue in the project and created a PR with a fix for it. Waiting on it to be approved, so in the meantime you can sort it following my simple fix.
I hope this helps someone out there.
Check your page you might have loaded multiple versions of jQuery
I had the same problem, I realized that I had jquery and bootstrap css imports that enter in conflict each other. Take a look to the ones you have imported and reduce those imports to the minimum to see which is the conflict.
Here there is an example of how to implement it, I took that example and worked, then I adapted to my application:
for jquery 1.9 (click on view source to see the code)
http://jqueryui.com/tabs/
for jquery 1.8 (check the example at the end of the page)
http://api.jqueryui.com/1.8/tabs/
Hope it helps!
I have a website that is rendering a prototype based calender on 90% of the pages. I'm also looking at using the Uploadify module for handling multiple uploads with Paperclip. As you know, Paperclip and JQuery don't play nicely and a lot of the solutions I've tried such as NoConflict hasn't worked for me I still get the "not defined" errors in firebug all over the place. I'm wondering what the best way for me to approach adding this JQuery module that will be very localized in a largely Prototype-based application. I've considered switching my Prototype code with JQuery but I've yet to see a better JQuery solution for this particular calendar plugin that I'm using.
Use a proper structure for noConflict.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("#someelement").uploadify();
});
</script>
If this doesn't answer your question, please provide more(some) code.
Edit for comments:
Just run the $.noConflict() immediately following your jQuery plugins, and then use jQuery instead of the $ variable throughout your JS files.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
</script>
sample js file:
(function($){
// since we passed a reference to jQuery to this anonymous
// function and accepted it as a parameter named "$", we can
// safely use "$"
$("#target").uploadify();
})(jQuery);
If you need a document ready, you can do it this way:
jQuery(document).ready(function($) {
$("#target").uploadify();
});
I have a test jsp with:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript">
</script>
<script type="text/javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
</script>
</head>
<body>
<div dojoType="TreeSelector" widgetId="treeSelector"></div>
<div dojoType="Tree" widgetId="treeWidget" selector="treeSelector"toggler="wipe">
<div dojoType="TreeNode" widgetId="1" title="First node" isFolder="false"></div>
<div dojoType="TreeNode" widgetId="2" title="Second node">
<div dojoType="TreeNode" widgetId="2.1" title="Second node First Child"></div>
<div dojoType="TreeNode" widgetId="2.2" title="Second node Second Child"></div>
</div>
<div dojoType="TreeNode" widgetId="3" title="Third node" isFolder="false"></div>
</div>
This will not work in any browser.
I thought this would be easy, it seems the dojo library is not being downloaded/found?
Do I need to do anything else?
Also, my IDE, JDeveloper, reports that the attribute "dojoType" is not defined on element div.
I have to say, this example looks like it is taken from a very old version of dojo, but you're trying to run it against Dojo 1.5. That most likely won't work. dojo.widget hasn't existed since...0.4, 0.9 maybe.
You may be right in your comment to the previous answer in that no parseOnLoad: true was necessary in the original example, but I'd also assure you that that example was not running any version of Dojo anywhere near what you're running it with.
Based on what you're looking at there, you may want to start somewhere like here: http://www.dojotoolkit.org/reference-guide/dijit/Tree.html
I'm not sure what the default behavior is when it's not present, but you probably need to define a djConfig with parseOnLoad set to true (or call the parser directly). See the following links for more information:
http://docs.dojocampus.org/djConfig
http://dojocampus.org/content/2008/03/08/the-dojo-parser/
Follow the:
Google AJAX Libraries API Dev Guide,
and the Google API Loader's Guide.
You need to:
register for an API key (or use a direct link as you did),
if not using a direct link but google.load, you need to defer the execution of your code using an onload callback.
Personally, I would just do something like:
within the <head> section of my.html:
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_API_KEY_GOES_HERE"></script>
<script type="text/javascript" src="my.js"></script>
in my.js:
google.load("dojo", "1.5", {
uncompressed: true
});
function OnLoad() {
/* do stuff here */
}
google.setOnLoadCallback(OnLoad);