So heres the deal. I've got an html file, with an id="followers". I'm trying to make a get request with jQuery to get the xml tag from the twitter api:
(http://api.twitter.com/1/users/show.xml?screen_name=nightoutinc
and update the id with the accurate info.
I'm not getting any console errors with my jquery, which leads me to believe everything is hooked up right, I'm just not implementing the get request properly.
My Jquery looks like this:
(function ($){
getFollowers = function(){
$.get("http://api.twitter.com/1/users/show.xml?screen_name=nightoutinc", function(data){
$("followers").follower_count(data);
});
};
});
my html head looks like this
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/getfollowers.js">
$(document).ready(function(){
getFollowers();
});
</script>
please tell me, what is wrong?!?
-brian
Looks like you have scope issues. And it doesn't look like your function is being called; only defined. Try wrapping it up into one parent function that actually gets called.
(function($) {
function getFollowers() {
// Implementation here.
}
$(document).ready(function() {
getFollowers();
});
})(jQuery);
Your jquery object selecter seems wrong
$("followers")
Should be
$("#followers")
Notice the pound sign which indicates ID
did you define follower_count?
I guess it should be $("followers").html(data); NOT $("followers").follower_count(data);
You said the response was XML right? Then data is going to be an XML DOM not a string or HTML you can jsut insert into your page.
I can only find the docs for JSON but assuming the XML has parity:
$(function(){
$.get('http://api.twitter.com/1/users/show.xml?screen_name=nightoutinc', function(xml){
nbFollowers = $(xml).find('followers_count').text();
$('#followers').html(nbFollowers ? nbFollowers : 0);
});
});
Related
Relatively new to JS, and I feel like I'm probably doing something wrong.
I have JQuery downloaded and linked to properly in my script, which you can see in my code below.
console.log("javascript is working");
$(function getRipple() {
$.getJSON("https://api.coinmarketcap.com/v1/ticker/ripple/.json",
function(data) {
$("reply").html(JSON.stringify(data));
console.log(JSON.stringify(data));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Ripple Ticker</h1>
<div id="reply"></div>
When I try to pull the JSON data from the URL in the script and then display it in a div, it doesn't return anything.
I've tried displaying it to the console but it also doesn't display anything, so I'm obviously doing something wrong within my JS. Apologies if this is a really simple error, but I can't really figure it out.
The URL seems wrong, I tried with https://api.coinmarketcap.com/v1/ticker/ripple/ and it works fine, also you need to change the selector to #reply.
console.log("javascript is working");
$(function getRipple() {
$.getJSON("https://api.coinmarketcap.com/v1/ticker/ripple/",
function(data) {
$("#reply").html(JSON.stringify(data, null, 4));
console.log(JSON.stringify(data));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Ripple Ticker</h1>
<pre id="reply"></pre>
Remove '.json' in your URL and it should work for you.
I'm trying very hard to figure out how to get a JS alert to appear only after a previous script (a glossary word replacement script) has finished. Getting this javascript/jquery to run in order is giving me a headache as it either runs out of order, or the second part doesn't run at all.
Here is the code that is presently working WITHOUT the alert:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zglossary.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('body').glossary('listofwords.json');
//want alert('finished') to happen after glossary word replacement is finished replacing words here
});
</script>
</head>
I've tried a lot of different things trying to get an alert to happen where that comment is, and either the alert happens immediately before any words are replaced by the zglossary script, an example of that would be:
<script>
$(document).ready(function () {
$('body').glossary('listofwords.json');
alert('finished');
});
</script>
Or the script will replace all the words and no alert happens at all. An example of that would be:
<script>
$(document).ready(function () {
$('body').glossary('listofwords.json');
}, function() {
alert('finished');
});
</script>
Another example of that happening (words are replaced, but no alert happens) that I've tried would be:
<script>
$(document).ready(function () {
$('body').glossary('listofwords.json', function() {alert('finished');} );
});
</script>
I really just can't figure this out. I'd appreciate any help
I've never used this glossary plugin before - but I downloaded the source and I see the issue is clearly because the glossary plugin does not provide any callback after the JSON data is asynchronously downloaded. Any solution that is not hacky will require a slight modification to the library itself.
Here is a quick way you could do it
By adding this line
typeof options.callback == 'function' && options.callback();
At the end of the success: function(data) {
Then your code would simply be this:
<script>
$(document).ready(function () {
$('body').glossary('listofwords.json', {callback:function() {alert('finished');}} );
});
</script>
Which is similar to your last example, only it puts the callback into an options JSON which is what the plugin expects.
I have no idea what's "Glossary", but you might find a solution with Deferred object supplied by jQuery api. Deferred helps to handle json calls, especially the .done() method to set a caalback when the call is finished.
I'm working in a Joomla environment but I think this is not the source of the problem.
I have a view which renders subviews (containing JavaScript code like <script type="text/javascript></script>) with AJAX. Problem is : the JavaScript code is ignored. I guess that's because it isn't in the document when it is loaded.
Here's the JavaScript code contained in one of the subview :
<script type="text/javascript">
window.addEvent('domready', function() {
$('annuler').addEvent('click', function() {
var a = new Ajax(
'{$url}',
{
method: 'get',
update: $('update')
}
).request();
});
});
</script>
Another basic example, if I load a subview with the following code in it, it won't work either :
<script type="text/javascript">
function test()
{
alert('ok');
}
</script>
<a id="annuler" onclick="test()">Annuler</a>
I'm getting the following error message : "test is not defined"
I can't find a solution to that problem so I'm starting to think that it is not a good way to use JavaScript...and, yes, I'm kind of new to event based JavaScript (with frameworks and so on).
I finally managed to put all the subviews and the JavaScript code into the same page. I'm using the CSS display property to hide/show a subview (<div>) (instead of loading it with Ajax).
Place the code you want to run in a function and call the function from an on ready block
EDIT:
Example:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Found here: http://www.learningjquery.com/2006/09/introducing-document-ready
I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/
It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.
Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});
I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?
I've just attempted to make a simple script to use ajax to load a new part of a page. The class remove/add to change the relevant text colour works fine. However, the new html does not seem to appear. I have a feeling this is to do with my general js syntax but I can't work it out.
Javascript:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page_menu a").click(function() {
$("#page_menu p").removeClass("current");
$(this).children().addClass("current");
var project = $(this).attr("name");
var loadUrl = project + ".html";
$("#project_image").load(loadUrl);
return false;
});
});
</script>
An example of an anchor tag in the html would be:
<a name=example href="#">Example</a>
The html file I'm looking to load would be called "example.html" and the code in it:
<h1>Hello</h1>
I'm sure it's pretty straight-forward but I'm just not seeing it!
Cheers,
Rich
I would use the href of the anchor directly:
Example
<div id="project_image"></div>
And then AJAXify it:
$(function() {
$('#page_menu a').click(function() {
$('#page_menu p').removeClass('current');
$(this).children().addClass('current');
$('#project_image').load(this.href);
return false;
});
});
Anchor's most certainly do have a name attribute, so that part would be okay.. but to make things cleaner, change your anchor to:
Example
For length sake you can use shorthand syntax for $(document).ready, and also do the class changes in one chain. Then just load the page specified in the href and to see if the request actually worked, add a callback, like so:
$(function() {
$("#page_menu a").click(function(e) {
$("#page_menu p").removeClass("current").filter(this).addClass("current");
$("#project_image").load(this.href, function(res) {
// This will allow you to see the response from the server without having to dig through requests
// If you don't have a console for some reason, just change this to alert()
console.log(res);
});
e.preventDefault();
});
});