Firefox jquery ajax JSONP call not working - javascript

I'm trying to get a JSONP $.ajax request working. It works fine in Chrome and IE but it is failing in Firefox v30.
When it fails it doesn't given any error - at least Firebug doesn't show any errors, it just never calls the callback function.
This is a basic demo site (http://andysylvester.com/files/reader/) will work with Chrome and IE but not Firefox.
The nytRiver.js JSON call actually returns a javascript function call to onGetRiverStream see the documentation here: http://riverjs.org/#structureOfRiverjs
<html>
<head>
<title>Minimal River.js Feed Reader</title>
<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
<script>
var theRiver;
function onGetRiverStream (updatedFeeds) {
theRiver = updatedFeeds;
displayFeeds();
}
$.ajax ({
url: "http://rss.scripting.com/rivers/nytRiver.js",
dataType: "jsonp"
});
function displayFeeds() {
var feedText = "";
// Create title
for (var i in theRiver.updatedFeeds.updatedFeed) {
feedText = feedText + theRiver.updatedFeeds.updatedFeed[i].feedTitle + " (Feed) " + "<br>";
feedText = feedText + "" + theRiver.updatedFeeds.updatedFeed[i].item[0].title + "<br>";
feedText = feedText + theRiver.updatedFeeds.updatedFeed[i].item[0].body + "<br>";
feedText = feedText + "<br>";
}
document.getElementById("demo").innerHTML = feedText;
}
</script>
</head>
<body>
<h1><center>Minimal River.js Feed Reader</center></h1>
<p id="demo">Wating for feeds to load....</p>
</body>
</html>

Try
$(function() {
onGetRiverStream = function (updatedFeeds) {
theRiver = updatedFeeds;
displayFeeds();
};
displayFeeds = function() {
var feedText = "";
// Create title
for (var i in theRiver.updatedFeeds.updatedFeed) {
feedText = feedText + theRiver.updatedFeeds.updatedFeed[i].feedTitle + " (Feed) " + "<br>";
feedText = feedText + "" + theRiver.updatedFeeds.updatedFeed[i].item[0].title + "<br>";
feedText = feedText + theRiver.updatedFeeds.updatedFeed[i].item[0].body + "<br>";
feedText = feedText + "<br>";
}
document.getElementById("demo").innerHTML = feedText;
};
$.getScript("http://rss.scripting.com/rivers/nytRiver.js");
});
jsfiddle http://jsfiddle.net/guest271314/T7cZL/
See jQuery.getScript()

The problem was a Firefox add-on Privacy Badger. It was blocking rss.scripting.com as a 3rd party tracker.
I have the same add-on installed for Google Chrome - although in the beginning it was not blocking rss.scripting.com. However once it did block it then Chrome debugging tools manage to better Firebug and it gives the following error:
net::ERR_BLOCKED_BY_CLIENT
A quick SO search brings up this answer: I am getting Failed to load resource: net::ERR_BLOCKED_BY_CLIENT with Google chrome
That implies that its an ad-blocking add-on causing the problem.

Related

How to add target="_blank" into a document.write?

I am doing this on chrome dev tools. The error message I am getting is, "Can't open same-window link to "URL"; try target="_blank". I can't figure out how to incorporate that into this Javascript.
document.write=function(s){
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
lastScript.insertAdjacentHTML("beforebegin", s);
}
var txt = "Let's Start";
document.write("<p>Link: " + txt.link("beginning.html") , "_blank" + "</p>");
First: The link() method is not standard, and may not work as expected in all browsers.
Second: There is no correct way to do it with String object https://www.w3schools.com/jsref/jsref_link.asp
Third:
var link = "<a href='beginning.html' target='_blank'>Let's Start</a>";
document.write("<p>Link: " + link + "</p>");
Have you tried changing that to this line:
document.write("<p>Link: " + txt.link("beginning.html") , "_blank" + "</p>");
to
document.write("<p>Link: " + txt.link("beginning.html") + " _blank" + "</p>");
Strictly a guess as we assume .link() is returning a string (?)

how to show an error when in appbrowser does not load error phonegap

i am developing an application and loading an hosted application using the inapp browser plugin cordova-plugin-inappbrowser
I have gotten most of the functionalities to work but i am unable to get the part of loading an error message when he url does not load, it dosent just work and shows me an error message of the url where i have hosted my application instead.
Which could be embarrassing.
please i need help on this
This is what am working with below thanks for ur potential responses
// my child browser code, the main source of my app content
function fire(){
var ref = cordova.InAppBrowser.open('http://####################', '_blank', 'location=no,zoom=no,hardwareback=yes,clearsessioncache=yes,clearcache=no');
var myCallback = function(event) { alert(event.url); }
ref.addEventListener('loadstart', inAppBrowserbLoadStart);
ref.addEventListener('loadstop', inAppBrowserbLoadStop);
ref.addEventListener('loaderror', loadErrorCallBack);
ref.addEventListener('exit', inAppBrowserbClose);
}
function loadErrorCallBack(params) {
$('#status-message').text("");
var scriptErrorMesssage =
"alert('Sorry we cannot open that page. Message from the server is : "
+ params.message + "');"
inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);
inAppBrowserRef.close();
inAppBrowserRef = undefined;
}
function executeScriptCallBack(params) {
if (params[0] == null) {
$('#status-message').text(
"Sorry we couldn't open that page. Message from the server is : '"
+ params.message + "'");
}
}
Your code is generally fine, but you have no control over the title of the alert() function. You can use some other techniques to display the error message. For example, you can use a div:
function loadErrorCallBack(params) {
$('#status-message').text("");
var scriptErrorMesssage = createMsg('Sorry we cannot open that page. Message from the server is: '
+ params.message);
inAppBrowserRef.executeScript({
code: scriptErrorMesssage
}, executeScriptCallBack);
inAppBrowserRef.close();
inAppBrowserRef = undefined;
}
function createMsg(msg) {
return 'var div = document.createElement("div");'
+ 'div.style.position = "absolute";'
+ 'div.style.top = "50%";'
+ 'div.style.left = "50%";'
+ 'div.style.width = "100px";'
+ 'div.style.height = "100px";'
+ 'div.style.color = "#f00";'
+ 'div.innerHTML = "' + msg + '";'
+ 'document.appendChild(div);'
}

Parsing links from an XML files with JavaScript

To display my latest blog-posts on a different page I want to parse the rss-feed from the blog and then generate elements with it.
I first tried to parse a fixed .xml file for which I wrote the following code:
var maxBlogposts = 5;
var blogPosts = 0;
$.get("rss.xml", function(data) {
$(data).find("item").each(function() {
if(blogPosts === maxBlogposts) return;
var el = $(this);
//Only display 3 posts on small devices.
var extra = (blogPosts >= 3) ? "not-small 12u(small)" : "12u(small)";
var div = $('<div class="6u ' + extra + '" class="blog-entry"></div>');
var h = $('<h4>' + el.find("title").text() + '</h4>');
var description = el.find("description").text().replace('[…]', '[…]');
var p = $('<p>' + description + '</p>');
div.append(h);
div.append(p);
$('#blog').append(div);
blogPosts++;
});
});
This worked perfectly fine. Now I want to parse the actual rss-feed. For this I wrote a PHP script which simply gets the feed and echos it.
<?php
$rss = file_get_contents('http://xn--der-grne-baum-1ob.net/feed/');
die($rss);
?>
And again I get the correct XML file on the frontend.
The problem I have is that now my code is no longer working. Getting the description was failing as well as the links. I fixed the description by accessing
el.find(description")[0].innerHTML
However I can't seem to get the links to work. The data returned from the PHP file contains a node with the link in it. The "el"-element also contains children named "link" but those no longer contain the actual link.
I feel like the links may get "escaped" during parsing? At least that is the only reason i could think of that would result in what I am observing.
The XML I am parsing comes from http://xn--der-grne-baum-1ob.net/feed/
Try
var maxBlogposts = 5
, blogPosts = 0;
$.get("https://query.yahooapis.com/v1/public/yql?q=select"
+ " * from feed where url='http://xn--der-grne-baum-1ob.net/feed/'")
.then(function(data) {
$(data.documentElement).find("results item")
.each(function() {
if(blogPosts === maxBlogposts) return;
var el = $(this);
//Only display 3 posts on small devices.
var extra = (blogPosts >= 3) ? "not-small 12u(small)" : "12u(small)";
var div = $('<div class="6u ' + extra + '" class="blog-entry"></div>');
var h = $('<h4>' + el.find("title").text() + '</h4>');
var description = el.find("description").text().replace('[…]', '[…]');
var p = $('<p>' + description + '</p>');
div.append(h);
div.append(p);
$('#blog').append(div);
blogPosts++;
});
}, function(jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blog"></div>
See YQL Console

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?

Internet Explorer 'null or not an object' error - code works ok in Firefox and Safari

Error: 'document.forms.0.Docunid_5.value is null or not an object
From function in JS Header in Lotus Notes form:
function saveWebViewDSFF(docnumber)
{
var docID = eval("document.forms[0].Docunid_" + docnumber + ".value");
var Comment9 = eval("document.forms[0].Comment9_" + docnumber + ".value");
var agentPath = "//www.mananua.com/foliw/ekupulibrary.nsf/(SaveWebViewDSFF)?openagent&unid=" + docID + "& Comment9=" + Comment9;
document.getElementById("agentOutput").src = agentPath;
}
When are you calling this function? If you are calling it before the form has a chance to load then move the call to the bottom of the HTML or use the window.onload function.
Example
</body>
<script type="text/javascript">
window.onload = function () { saveWebViewDSFF(5); };
</script>
</html>

Categories

Resources