We Keep Coding

JavaScript/jQuery: Setting up IP Geolocation API within CodePen

I am very new to using APIs and am having a difficult time making a GET request to IP Geolocation API. I am not sure if the problem is with my code or with something concerning CodePen (it's probably my code).
I took the JavaScript directly from the example listed on IP Geolocation API page. I was going to modify it after seeing it work in action but I couldn't get it work at all. I tried modifying the URL to include both http:// and https://.
JavaScript:
$(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var table_body = "";
$.each(data, function(k, v) {
table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>";
});
$("#GeoResults").html(table_body);
});
});
HTML:
<div class="weather">
<div class="row title">
<h1>weather</h2>
</div>
<div class="row icon">
</div>
<div id = "GeoResults" class="row temp">
<p class = "city">City here</p>
</div>
</div>
URL to my CodePen: https://codepen.io/mattr8/pen/yXEMRM
API I am trying to use: http://ip-api.com/docs/api:json

Codepen doesn't want to work with ip-api.com because of https. Because codepen is served over https it will block any requests that are not https. If you go to http://ip-api.com/json/?callback=? you will see the information you're trying to reach. If you go to https://ip-api.com/json/?callback=? you will receive an error.
The jsbin example they link to does not use https, so it works fine.
So to fix your issue, create an example on a service or your own machine using http, not https for the request.

my page always redirects me to my server

I'm trying to make a redirection to other page (for example google) but it doesn't work. This is the code:
function algo(a) {
$.get("links/privado/verlink.php?" + a, function(data, status) {
document.getElementById("algunacosa").href = data;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="algunacosa">Ir al link</a>
<button onclick="algo">Retrive link</button>
if the response is: http://google.com it redirects me to http://mrvikxd.ddns.net/m/http://google.com and appears an 403 error
Edit: I've seen the code on the Google Chrome development console and the href of <a id="algunacosa"> is href="http://google.com". I don't know why it doesn't go to Google.

Using the rel attribute on your anchor tag, you should be able to force the link to lead to an external site. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
<a id="algunacosa" rel="external">Ir al link</a>

Just fixed. verlink.php was in UTF-8 BOM and it was producing the \uffef character what is not visible but enought to confuse the browser

jQuery Load XML and Refresh Based on XML Variable

I am building a player for an online radio station. The stream is providing an XML file that displays the current song information. This XML file is hosted on the stream server which is NOT the server the website is running on.
Here is a sample of whats in the XML. Lets pretend it comes from http://randomserver/station.xml
<playlist>
<stationCallSign>KCXR</stationCallSign>
<programType>PGM</programType>
<mediaType>AUD</mediaType>
<title>Break Free</title>
<artist>Decyfer Down</artist>
<album>End of Grey</album>
<cover>
http://cdnrf.securenetsystems.net/file_radio/album_art/O/1/5/51Oo0rBqATL.jpg
</cover>
<duration>199</duration>
<campaignId/>
<fileId/>
<programStartTS>30 Sep 2015 17:48:22</programStartTS>
<adBlockPos>1</adBlockPos>
</playlist>
I need to pull that data to display it on the webpage and then refresh everything based on how many seconds are in the "duration" field. Essentially refresh all of this when the song changes.
Here is the html output I need.
<div id="playerDiv" class="player-div" style="display: block;">
<div id="album-art">
<img id="now-playing-album-art" src="http://cdnrf.securenetsystems.net/file_radio/album_art/e/1/5/51eeZTxMYuL.jpg" class="player-div-img cP" width="250" height="250" title="">
</div>
<div id="now-playing" class="now-playing tS">
<span id="now-playing-title" class="menuHeader f15em">Lights Out</span> - <span id="now-playing-artist">Silverline</span>
<div id="now-playing-album">Lights Out</div>
</div>
[playercode]
</div>
I was hoping to use the mobile jquery so that this functions well on mobile devices.

It sounds like you might need to do a little more research into ajax requests.
setTimeout(function() {
jQuery.ajax('http://randomserver/station.xml', {
success: function() { //Parse xml and update document },
error: function() { //handle error }
}
}, songDuration);
With jQuery you can easily download your xml file and update the song
In the above code setTimeout(callback,timeInMillis) allows you to set a time in milliseconds for the callback to occur. The callback then makes an XMLHTTPRequest to the url of your choice and then updates the page if it is successful in getting the page.
You can use the default Javascript XML parser to parse the response you get from the server.
Resources Used:
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
http://api.jquery.com/jquery.ajax/

external java script file not working

I'm doing a project for school and so far it's been a lot of copy this script and paste it here to make things "work". I don't really have any idea what I'm doing besides comparing one line of code to another and looking for the differences.
I've got javascript that is returning some values to me and it works fine when it's in a simple webpage format but when I insert it into a more complicated page it stops working.
At the very end of the page it should give a line of numeric values and be updated every 1000 milliseconds but what happens is it just sits there displaying Temp()...
I've checked the data.xml and those values are being updated when I push buttons and stuff on my PIC protoboard.
I'm using the same ajax.js file for both the simple webpage and the complicated page.
I'm thinking it is something simple like a missed </p> or </div> tag but my eyes don't seem to see it.
Could some take a look at the code and see what I've missed? Thanks!
ajax.js
var xhr;
function getXMLHttpRequest(){
try { return new ActiveXObject("Msxm12.XMLHTTP"); } catch(e){};
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){};
try { return new XMLHttpRequest(); } catch(e){};
return null;
}
function parseHttpResponse(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("T0").innerHTML=xhr.responseText;
}
else
{
}
}
}
function getTemp(){
xhr = getXMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.onreadystatechange = parseHttpResponse;
xhr.send(null);
}
setInterval("getTemp()", 1000);
Simple webpage - this works great
<html>
<head><title>Ajax test - index1</title>
<script src="ajax.js" type="text/javascript">
</script>
</head>
<body onload="getTemp();">
<h2>Headline</h2>
<p>Paragraph</p>
<div id='T0'>Loading Temp0...</div>
</body>
</html>
"Complicated" webpage - when this is used I get no joy
<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<script src="ajax.js" type="test/javascript">
</script>
<link rel="stylesheet" href="myStyle.css" type="text/css" >
</head>
<body onload="getTemp();">
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">
<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<div class="nav">
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
</ul>
</div>
<!--***************************************************-->
<p>
Welcome to the Elex 267 Demo Web Server for [Name Here].<br>
</p>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
This web page refreshes the data every 3 seconds.
</p>
<center>
<img border="5" src="http://www.northmicro.com/GFX/nm110nm120onproto.jpg" alt="NM110 Proto Pic" width="200" height="200" >
</center>
<br>
<div id="feedback" style="width:500px;float:left;">
Pot RA0: 1022 <br>
Pot RA1: 223
<br><br>
Switch RA2: <img src="Pics/SwitchUp.gif" alt="SwitchOff" width="20" height="20" align="top">
<br><br>
LEDs: RB6 <img src="Pics/LEDOff.gif" alt="LED_Off" width="20" height="20" align="top"> RB5 <img src="Pics/LEDOn.gif" alt="LED_On" width="20" height="20" align="top">
</div>
<div id="input" style="width=50%;margin-left:50%;">
<b>Commands</b><br>
<button align="left" type="button" onclick="alert ('RB5 Activated')">Toggle RB5</button>
<br>
<button align="left" type="button" onclick="alert ('RB6 Activated')">Toggle RB6</button>
</div>
<br><br>
<div id='T0'>Loading Temp0...</div>
</body>
</html>

setInterval("getTemp()", 1000);
does not make sense at this line, and it might be the cause of your problems. This call causes getTemp to be called every second, starting from after this call as returned. In the getTemp function you are reusing the xhr variable, creating a new XMLHttpRequest instance each time. That alone is not necessarily a problem (aside from the "Msxm12.XMLHTTP" which appears to be wrong; should probably be "Msxml2.XMLHTTP").
But in each call of getTemp you are issuing a new request, regardless if the previous request has received a response (the third argument being true means asynchronous request-response handling). Consider this: The readystatechange listener might not have been called (or its readyState == 4 part has not be executed) because the client is waiting for the server to respond. Now your one-second timer kicks in, calls getTemp again and thus overwrites the xhr value that is to be used in the listener code. There is a closure, xhr is a bound variable, and therefore there is a race condition already.
Further, an HTTP client SHOULD NOT (per RFC 2616), and a well-designed Web browser will not, keep more than a specified number of persistent HTTP connections (default: 2 to 8) open to the same server or proxy. So the more complex the document, and the more resources need to be loaded in parallel, the more likely that this approach will fail.
You should remove the setInterval(…) call and add a getTemp() call below the line where you update the innerHTML property (when the request was successful, status == 200), so that only then a new request is issued. You should at least wait for the readyState to become 4 (FINISHED) before you issue a new request. Since you want to wait one second before the next call, use window.setTimeout("getTemp()", 1000).
It should help your understanding if you pretty-print that code, that is, indent function body and block content with a reasonable amount of white-space, and add some white-space, for example between ) and {. There are editors like Eclipse JavaScript Development Tools which can automate much of the code formatting.
Afterwards you should learn to use a debugger (use Firebug for Firefox, newer versions of other browsers have one built-in) and set breakpoints in your code, particulary in getTemp and parseHttpResponse. Step through the code (caveat: step over send(), then continue so that execution halts at the breakpoint in parseHttpResponse) to see what is going on. Good luck.

Links to AJAX calls do not work

Hi all i am writing a Rails application and i include some link_to_remote links
The generated code is
Test
That works perfectly fine on Safari and Firefox but when i try to click the link on IE7 and Opera it does not even hit the server.
Any hints ?

Use a fully qualified URL: http://.....

This is a bad practice to include all of this code in the <a href> tag anyways. I suggest you make a function such as:
function doAjax(url)
{
new Ajax.Request(url, {asynchronous:true, evalScripts:true});
return false;
}
in the javascript code. And change the url to say instead:
<a href="#" onclick="return doAjax('/b10/categories/games?category=Action');">
Test</a>