I'am using a Twitter Bootstraper in my WebAplication, in my materpage i do the following
<%--Referencing jQuery--%>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<%--Referencing the bootstraper script--%>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js" type="text/javascript"></script>
<%--My Script--%>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("a").twipsy();
});
</script>
then in page (Default.aspx) code ia have a single link like this:
text
When a run the page the twipsy (a stylized tooltip) doesnt work.
Look here to see twipsy in action (http://twitter.github.com/bootstrap/javascript.html#twipsy)
I see the "normal tooltip"
Inspecting the console of chrome i see the follong script error
Uncaught TypeError: Cannot convert null to object (bootstrap-twipsy.js:315)
Whats wrong?
Your JQuery version is too old, that might be why.
Another possibility is that your selector is $("a") instead of an id, $("#mylink"). The docs suggest that it should work with a collection, though.
Related
I'm working on a web-based game with HTML, CSS & JavaScript, using Visual Studio. I'm using TaffyDB as a database. However, whenever I try to create a database using the function TAFFY, an error shows up on the console, saying that TAFFY isn't a function. I'm not sure where the mistake is, I believe I've linked the JS files to the HTML correctly, here are all the ways I've tried:
<script type="text/javascript" src="/taffy-min.js"></script>
<script type="text/javascript" src="./taffy-min.js"></script>
<script type="text/javascript" src="taffy-min.js"></script>
<script type="text/javascript" src="https://github.com/typicaljoe/taffydb/blob/master/taffy.js"
I have also tried including the full path, and for all of the above I tried it using 'taffy.js' instead of 'taffy-min.js'. I have also tried it with and without jQuery:
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
I am not sure if the mistake is the JS files not linking to the HTML properly, or if it's something entirely different. Code I used to set up a user:
var users = TAFFY([
{
"id": 1,
"user": "John123",
"level": 5,
"gameType: "easy"
}]);
First of all you have missing double quotes here: "gameType: "easy", should be "gameType": "easy". The error is saying that TAFFY is not a function: this means that there's another variable in the scope named TAFFY.
In order to check if the taffy script is linked correctly open the console and type typeof this.TAFFY which should print "function". Hope this helps.
I have my jQuery linked in the html file before the js file, and I've ensured that it is loading properly in the browser window. The jQuery code actually WORKS, so I have no idea why sublime thinks it cant understand the sytax. I've tried just about every suggestion in this post (JQuery - $ is not defined) which there was a ton. Also, i dont currently have sublimeLinter installed, currently using a console that i set up with this (http://www.wikihow.com/Create-a-Javascript-Console-in-Sublime-Text).
This code:
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body> </body>
</html>
with this js:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("body").text("Hello world!");
});
leads to this error message:
Add an ignore comment to the top of your document. What is happening is that your linter is not seeing jQuery as it is not part of the current document. This will force your linter to ignore the jQuery keyword while linting.
/*globals $:false, jQuery:false*/
I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/
I have got already the css and the html structure, but the javascript it is not working, and the effect is nice, I want to get this image effect: http://www.ustream.tv/new (the blue one)
I have already tried but i dont get it: http://redzer.com.mx/img.html
What am i doing wrong? Please help me.
Add this into your page
<script type="text/javascript">
ustream={};
ustream.timing={};
ustream.timing.firstByte=(new Date()).getTime();
</script>
EDIT
After that $ is missing, it's probably jQuery. Import it than try
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
EDIT 2
You are missing this :
<script src="http://static-cdn2.ustream.tv/packed/l10n/en_us/v6_home:13721527971.js" type="text/javascript"></script>
EDIT 3
Import this :
<script src="http://static-cdn2.ustream.tv/packed/l10n/en_us/v6_header_static_framework:13718193491.js" type="text/javascript">
You can use FireBug plugin in FF to see console errors
I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.
First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>
Try removing the language attribute..sometimes work for me. It's obsolete now .. i think
You need to include jquery before you can use it.