Develop Reference

Can Anybody Explain Why This Script Cannot Be Uploaded as an External Resource?

I am currently working within Tumblr's theme builder framework, and have been facing some difficulties uploading certain scripts as external resources. Upon several upload attempts, I continuously received an error message implying that Tumblr does not accept .html files to be uploaded as an asset, even though the file I am attempting to upload is a .js file.
I suppose it's worth noting that my site runs via HTTPS, so why would a code, (as shown below), not be able to be loaded as an external source/asset?
UPDATE: Ok, so far the issue has something to do with this portion of HTML in the script:
if (photos[j].alt_sizes[1]) {
imgURL = photos[j].alt_sizes[1].url;
// console.log(imgURL, linkURL);
} else {
continue;
}
$("#tumblr-posts").append(
"<li><a href=" +
linkURL +
"><img src=" +
imgURL +
" /></a>" +
"</li>"
);
}
The denied external JS (mycustomscript.js):
apiKey = "API-HIDDEN";
limit = 4;
$.ajax({
url: "https://api.tumblr.com/v2/blog/MYTUMBLRID.tumblr.com/posts?limit=4",
dataType: "jsonp",
data: {
api_key: apiKey,
tag: "blog"
},
success: function(results) {
var i = 0;
while (i < results.response.posts.length) {
var type = results.response.posts[i].type;
if (type == "photo") {
var photos = results.response.posts[i].photos;
var linkURL = results.response.posts[i].post_url;
var caption = results.response.posts[i].caption;
for (var j = 0; j < photos.length; j++) {
if (photos[j].alt_sizes[1]) {
imgURL = photos[j].alt_sizes[1].url;
// console.log(imgURL, linkURL);
} else {
continue;
}
$("#tumblr-posts").append(
"<li><a href=" +
linkURL +
"><img src=" +
imgURL +
" /></a>" +
"</li>"
);
}
}
i++;
}
console.log(results.response);
}
});
How I've attempted to call for the script, (x's in place to conceal hidden link portions):
<script src="http://static.tumblr.com/x/x/mycustomscript.js"></script>

It’s due the HTML tags in the script. You can work around this by splitting the HTML tags so
"<li>"
Becomes
"<"+"li>"
And do the same with end tags too.

Chrome Extension passing String

I'm trying to write a simple extension to decode a URL that´s given within the body of a page. I've got this contentscript:
function getText(){
var text = document.body.innerText;
return text;
}
var Text = getText();
console.log(Text);
chrome.runtime.sendMessage({ Text: Text});
and this for my popup:
function decodeURL(Encoded) {
var Decoded = decodeURIComponent(Encoded);
return Decoded;
}
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse){
localStorage["Text"] = request.Text;
console.log(localStorage["Text"]);
}
);
var List = localStorage["Text"].split(" ");
var URL = List[List.length - 1];
document.write("<a href=");
document.write(URL);
document.write(">");
document.write("Log In");
document.write("</a>");
Now my content script get´s the text and prints it to the console but the popup script doesn´t seem to be able to access it. I know this has been asked many times but none of the other Threads contained anything I could get to work.

Delay between dynamic posts

I have this JS code that is meant to display each dynamically loaded posts when clicked on:
function showPost(id) {
$.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
}); //get JSON Data for Stories
} //showPost
When I test the page 'http://howtodeployit.com/devotion/' on my mobile or windows browser, clicked on Daily Devotional Messages and I navigate between each posts, I notice the previously accessed post still shows for few seconds before the new post gets displayed.
How do refresh the page or DOM so it clears out previously accessed page.

Just empty() the contents of myPost while clicked on the item or on click of back button. Reason is that your previous content is still there in the mypost div, and your content page becomes visible even before the ajax call is executed which may take some time to complete say 700ms, so you will see the old content for that much period of time.
function showPost(id) {
var $myPost = $('#mypost').empty(); //emtpy it
$.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$myPost.html(output);
}); //get JSON Data for Stories

function start with a line $('#mypost').html(""); before going to another request to clear display content.
Also you can add a waiting message $('#mypost').html("Please wait..."); before showing content from next request.
function showPost(id) {
$('#mypost').html(""); //add this line
//$('#mypost').html("Please wait..."); //also you can add it to show waiting message.
$.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
}); //get JSON Data for Stories
}

You can empty() $mypost
var $myPost = $('#mypost').empty();

Construct the URL from JSON feed

Could anyone please advise me of what am I doing wrong here?
I am trying to construct the image URL but using the flickr.photos.search method
now (I need to display images close to geolocation of the visitor), I had it
working before with groups_pool.gne and the JSON feed was different (simpler)
formatted but now..
The URL is working, I get the array with all the data I need (farm, server,
secret and id) but can't construct the url for the photo.
$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_\
key=KEY&format=json&privacy_filter=0&media=photos&has_geo=1&accuracy=13&sort=int\
erestingness-desc&content_type=1&per_page=32&extras=geo,owner_name&page=1&radius\
_units=km&radius=1.521739&lat=40.952532&lon=-4.1326349999999366&text=Alcazar&jso\
ncallback=jsonp1320163051486", getJSONimages);
function getJSONimages(data) {
var htmlString = "";
$.each(data.photos.photo, function(i,item){
htmlString += '<img src="http://farm'+ item.farm +'.static.flickr.com/'+
item.server +'/'+ item.id +'_'+ item.secret +'_m.jpg" />';
});
$('#slideshow').html(htmlString);
Thank you.
I have added the url_m in the extras, in the URL to get the JSON feed and I get the full URL in my feed and that should help as I do not have to concatenate the rest but still doesn't work.
I can't get it to work, and it's extremely frustrating as I know is very simple.
Well, not for me obviously.
This is my function, after I get the url_m in the loop:
function getJSONimages(data) {
var htmlString = "";
$.each(data.photos.photo, function(i,item){
// var url = (item.url_m).replace("\", "");
htmlString += '<img src="' + item.url_m + '" />';
});
$('#slideshow').html(htmlString);
}
Even if I use the "url" variable or no, same result.
However, I have noticed something.
In the feed using groups_pool.gne, where I am able to pull the photos
successfully, I go to the media.m like that:
$.each(data.items, function(i,item){
var biggestSize = (item.media.m).replace("_m.jpg", ".jpg");
htmlString += '<img src="' + biggestSize + '" />';
Notice that I have items, then media, then m with it's own value! Is actually
items.[media: {m:PHOTOURL}].
Where as in this other JSON feed using the flickr.photos.search method, I have
the following "object path":
jsonFlickrApi.photos.photo[{url_m:PHOTOURL}]
And try to use this loop:
$.each(data.photos.photo, function(i,item){
htmlString += '<img src="' + item.url_m + '" />';
I think this is my problem but I don't have any ideas how to approach it. It's
obvious there is a different structure between the two feeds:
items.[media: {m:PHOTOURL}]
photos.photo[{url_m:PHOTOURL}]
I am going to research more on jQuery loops. Any ideas?

Weirdly these docs don't mention getting the farm. Can you console.log your item in the $.each loop and see what you get?
http://www.flickr.com/services/api/flickr.photos.search.html
It's clearly the right URL format though assuming you get all of those pieces:
http://www.flickr.com/services/api/misc.urls.html
EDIT
Can you tell me what this says (in the alert box):
$.each(data.photos.photo, function(i,item){
var url = 'http://farm'+ item.farm +'.static.flickr.com/' + item.server +'/'+ item.id +'_'+ item.secret +'_m.jpg';
alert(url);
});

A URL is not a JSON object so you cannot parse it.
You're trying get the URL parameters.
Include the following function and use it like this.
lat = querySt('lat');
lon = querySt('lon');
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
You might want to modify this part
hu =window.location.search.substring(1);
to
hu = yourURLVariable;
if you're getting the URL from somewhere else.

Cannot get json results from twitter using PhoneGap and jQuery

I'm trying to get the last 50 tweets using a certain hash tag, on a mobile device using PhoneGap (0.9.6) and jQuery (1.6.1). Here's my code:
function getTweets(hash, numOfResults) {
var uri = "http://search.twitter.com/search.json?q=" + escape(hash) + "&callback=?&rpp=" + numOfResults;
console.log("uri: " + uri);
$.getJSON(uri, function(data) {
var items = [];
if(data.results.length > 0) {
console.log("got " + data.results.length + " results");
$.each(data.results, function(key, val) {
var item = "<li>";
item += "<img width='48px' height='48px' src='" + val.profile_image_url + "' />";
item += "<div class='tweet'><span class='author'>" + val.from_user + "</span>";
item += "<span class='tweettext'>" + val.text + "</span>";
item += "</div>";
item += "</li>";
items.push(item);
});
}
else {
console.log("no results found for " + hash);
items.push("<li>No Tweets about " + hash + " yet</li>");
}
$("#tweetresults").html($('<ul />', {html: items.join('')}));
});
}
This code works great in a browser, and for a while worked in the iPhone simulator. Now it's not working on either the iPhone or Android simulator. I do not see any of the console logs and it still works in a browser.
What am I doing wrong? If it's not possible to call getJson() on a mobile device using PhoneGap, what is my alternative (hopefully without resorting to native code - that would beat the purpose).
Bonus: how can I debug this on a mobile simulator? In a browser I use the dev tools or Firebug, but in the simulators, as mentioned, I don't even get the log messages.
As always, thanks for your time,
Guy
Update:
As #Greg intuited, the function wasn't called at all. Here's what I found and how I bypassed it:
I have this <a> element in the HTML Get tweets
Then I have this code in the $(document).ready() function:
$("#getTweets").click(function() {
var hash = "#bla";
getTweets(hash, 50);
});
That didn't call the function. But once I changed the code to:
function gt() {
var hash = "#bla";
getTweets(hash, 50);
}
and my HTML to:
Get Tweets
it now works and calls Twitter as intended. I have no idea what's screwed up with that particular click() binding, but I ran into similar issues with PhoneGap before. Any ideas are appreciated.

Considering that (a) there isn't much that could go wrong with the first line of your function and (b) the second line is a log command, then it would seem that the function isn't being called at all. You'll have to investigate the other code in your app.
Or are you saying that you don't have a way to read logged messages on your mobile devices?