I'm reading this tutorial and I'm having some problems with the examples... I tried to run the examples in localhost but I'm encountering with some errors and really don't know what could it be. I should be getting the first post of WP, but instead of that I'm getting this error Uncaught ReferenceError: url is not defined. Any sugestions??? Thanks!
<!DOCTYPE HTML>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(url,target_div) {
var URL = url
jQuery.ajax({
url: URL,
dataType: 'json',
success: function(data) {
jQuery(target_div).html(data.post.content);
}
});
}
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
varurl = "http://localhost/phonegap/?json=get_post&dev=1&p=1";
vartarget_div = "#contents";
readSinglePost(url, target_div);
});
</script>
</header>
<body>
<div id="main">
<div id="title"></div>
</div>
</body>
</html>
It looks like "varurl =" should have a space to be "var url =" and same with "vartarget_div =" should be "var target_div =" instead.
Change a code as var url not varurl and var target_div not 'vartarget_div'. Give space to keyword var and the variable.
jQuery(document).ready(function() {
jQuery("#title").html("<h1>Hello World</h1>");
var url = "http://localhost/phonegap/?json=get_post&dev=1&p=1";
var target_div = "#contents";
readSinglePost(url, target_div);
});
Related
I'm doing the FreeCodeCamp course and i'm trying to build a weather app. I found a nice tutorial on how to get the latitude and longitude with geolocation. But now when I try and run the app it doesn't seem to be retrieving the ajax data for me to parse through. I was trying locally and moved it to hosting thinking that might have been it but now I just get a weird error on line one of my html and i don't see anything wrong. Thanks guy here is the code and it's live on weatherapp.boomersplayground.com
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Weather APP</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<div id="forecast">
<h1>Weather at <span id="location"> </span></h1>
<!-- <div id="imgdiv">
<img id="img" src=""/> -->
</div>
<p>It is currently <span id="temp"> </span>F with <span id="desc"> </span></p>
<p>Wind: <span id="wind"></span></p>
</div>
</body>
</html>
script.js
$(document).ready(function(){
var Geo = {};
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error);
} else {
alert('Geolocation is not supported');
}
function error(){
alert("That's weird! We couldn't find you!");
}
function success(position){
Geo.lat = position.coords.latitude;
Geo.lng = position.coords.longitude;
}
var key = 'c7e3b3ac66e765aa';
var Weather = "http://api.wunderground.com/api/"+ key +"/geolookup/conditions/q/" + Geo.lat + "," + Geo.lng + ".json";
$.ajax({
url : Weather,
dataType : 'jsonp',
success : function(data) {
var location =data['location']['city'];
var temp = data['current_observation']['temp_f'];
var img = data['current_observation']['icon_url'];
var desc = data['current_observation']['weather'];
var wind = data['current_observation']['wind_string'];
}
})
//setting the spans to the correct parameters
$('#location').html(location);
$('#temp').html(temp);
$('#desc').html(desc);
$('#wind').html(wind);
// filling the image src attribute with the image url
// $('#img').attr('src', img);
});
You use the variables initialised at the AJAX response outside of the success callback. You should use them inside the callback, since they're created asynchronously:
$.ajax({
url : Weather,
dataType : 'jsonp',
success : function(data) {
var location =data['location']['city'];
var temp = data['current_observation']['temp_f'];
var img = data['current_observation']['icon_url'];
var desc = data['current_observation']['weather'];
var wind = data['current_observation']['wind_string'];
$('#location').html(location);
$('#temp').html(temp);
$('#desc').html(desc);
$('#wind').html(wind);
}
});
Because you are treating an Asynchronous call as a synchronous one. The Ajax call needs to be in the success callback of getCurrentPosition. You are building the Ajax url before the at and lng is returned.
I have a page containing a set of hyperlinks. Clicking on any of the hyperlinks should take the user to a new page with the url sent as POST data.
What I am able to do:
1. Open the new page.
What issues I am facing:
1. In the new page, I am trying to access the url that was sent across as data. The url is not visible. Where am I going wrong?
The code I have so far:
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function takeMeHome(obj) {
var URL = obj.getAttribute("href");
//alert("Url = " + URL + " with id = " + obj.id);
console.log("URL = " + URL);
$.ajax({
type: 'POST',
url: './bbCloud.php',
data: {'tgt_url': URL},
success:function(data) {
console.log("Function invoked. It seems posting data was a success");
window.location = URL;
//alert('This was sent back: ' + data);
}
});
return false;
}
</script>
</head>
<body>
<p>
Choose one of the links below to access content:</p>
<p>1. Email Etiquette</p>
</body>
</html>
bbCloud.php:
<?php
//the function below displays data from bbMainPage javascript.
function getDataFromLibrary() {
$tgt_url = $_POST["tgt_url"];
echo "Data received = " . $tgt_url . "<br/>";
return $tgt_url;
}
?>
<html>
<head>
<style>
.hlight{background-color:#ffcc00;}
textarea {
width:100%;
height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://myDomain/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
//mention all global variables here.
console.log("this is the start of javascript");
//get all data from the previous script.
var tgtURL = "<?php getDataFromLibrary(); ?>";
console.log("URl obtained = " + tgtURL);
</script>
<body>
<div>
<audio id="playText" src="" controls></audio>
</div>
</body>
</html>
try dynamically creating and submiting a form instead of trying to ajax it:
<script type="text/javascript">
function takeMeHome(obj) {
var URL = obj.getAttribute("href");
$('<form>', {
"html": '<input type="text" name="tgt_url" value="' + URL + '" />',
"action": URL
}).appendTo(document.body).submit();
}
</script>
Hmm, if I recall correctly, what is happening is that your $.ajax does indeed send the POST data to your php file. The problem is, that it sends the post data, the php file is executed, and a response is sent back, but its sent back to the $.ajax call itself. You THEN redirect to the php file (and thus run it again), but without the post data coming along. Also, something along the lines of $.('a').click(function(event) { event.preventDefault(); } might be a good idea. I'll try and make a better answer for you when I get home (currently on my phone, shouldn't be long).
Hello and thanks for looking this over. Very new to jQuery/ajax etc. This website has FTP access to appropriate server, so I (as far as I know) am not violating cross-domain policy.
This is website works fine on any desktop browser but does not work on any mobile browser.
I feel like the issue is obviously but I don't know what to do. Can someone help me with This?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GRID Mobile</title>
<meta name = "viewport" content="width=device-width, user-scalable=no"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: 'GET',
url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>'+title+'</h3><p>'+description+link+'</p>');
});
}
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h1>GRID MOBILE</h1>
</div>
<div data-role="content">
<div id="feedContainer"></div>
<h3></h3>
<p></p>
</div>
<div data-role="footer">
<h4>Advertisements</h4>
</div>
</div>
</body>
</html>
Just a thought, have you tried wrapping your ajax call in a load event. I havent tested this on a mobile browser. However try.
<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
});
}
});
});
</script>
Note the only changes was the $(function() { }); wrapping.
EDIT: Tested on OSX.
Just a quick FYI I tested your page on an IPhone 5s on OSX and there are definitly Cross site origin problems.
The actual error is
XMLHttpRequest cannot load http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 Origin. xxxx is not allowed by Access-Control-Allow-Origin.
Now this is the error that is coming from the IPhone using the Safari web inspector. Additionally when this file was not hosted on a webserver and run as a simple HTML file the request works fine. Its as soon as you host the file in a webserver you will get the CORS issue.
To resolve this you will need to contact the webmaster and allow cross site origin, switch to a different method of retrieving the issue. There are other methods to try and get around CORS issues.
Sorry if this is not that helpful.
FINAL EDIT: The actual problem.
Ok from what I can tell the problem is the fully coded url http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 in your script. As you are on the same webserver on the same host i would suggest using a relative url as
/BayAreaTech/wp-rss2.php?cat=1
The reason for this is if you are browsing without the www. in your browser (or device) then the script thinks it is calling another service as the URLs done match. However as you are hosting the service on the same server you can eliminate the http://www. part and this should work fine.
To test this open your desktop browser to.
http://www.e-grid.net/mobile/index.html
When you do this all works well. Now try. (note without the WWW). This does not work as you are now executing cross domain (as you have hard coded the www portion. portion in the url.
http://e-grid.net/mobile/index.html
Give this a try and let me know how it goes.
Try the following script block.
<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: '/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
});
}
});
});
</script>
I am getting this error Exception: missing } in XML expression and also when i open my html file in FIREFOX and use Firebug 1.9.2, this error appear:
WL is not defined [Break On This Error]
WL.Event.subscribe("auth.login", onLogin);`
Here is my code:
<html><head>
<title>Greeting the User Test page</title>
<script src="js.live.net/v5.0/wl.js" type="text/javascript"></script>
<script type="text/javascript">
var APPLICATION_CLIENT_ID = "id",
REDIRECT_URL = "url";
WL.Event.subscribe("auth.login", onLogin);
WL.init({
client_id: APPLICATION_CLIENT_ID,
redirect_uri: REDIRECT_URL,
scope: "wl.signin",
response_type: "token"
});
WL.ui({
name: "signin",
element: "signInButton",
brand: "skydrive",
type: "connect"
});
function greetUser(session) {
var strGreeting = "";
WL.api(
{
path: "me",
method: "GET"
},
function (response) {
if (!response.error) {
strGreeting = "Hi, " + response.first_name + "!";
document.getElementById("greeting").innerHTML = strGreeting;
}
});
}
function onLogin() {
var session = WL.getSession();
if (session) {
greetUser(session);
}
}
</script>
</head>
<body>
<p>Connect to display a welcome greeting.</p>
<div id="greeting"></div>
<div id="signInButton"></div>
</body>
</html>
I dont know where is mistake, i just copy this sample code from skydrive api tutorial.
Of course, that I id and url strings replace with strings of my personal app.
Thanks for answers.
You need to include the Javascript file from the Microsoft server:
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
Your first <script> tag should look like:
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
or possibly
<script src="//js.live.net/v5.0/wl.js" type="text/javascript"></script>
if that site is configured properly. Without that, your URL was interpreted as being relative to the URL of your page.
This code is working on other test environment but not on mine.
Do you know why?
I am using Amazon EC2 and Cotendo CDN.
The result I am getting is a blank page.
Thanks in advance!
<html>
<head>
<title>Geo Test</title>
<script type='text/javascript' src='http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script>
$(document).ready( function() {
$.getJSON( "http://smart-ip.net/geoip-json?callback=?",
function(data){
console.log(data);
var c = data.countryCode;
if(c=="US" || c=="US" ){
document.getElementById('ddd').innerHTML = 'US'; } else {
document.getElementById('ddd').innerHTML = 'Not US';}
/*
this service needs ip
var ip = data.host;
alert(ip);
$.getJSON( "http://freegeoip.net/json/"+ip,
function(data){
console.log(data);
}
);*/
}
);
});?
</script>
</head>
<body>
<div id="ddd"></div>
</body>
</html>
Change this line:
$(document).ready( function() {
to that:
jQuery(document).ready( function($) {
It's necessary, because inside http://www.101greatgoals.com/wp-includes/js/jquery/jquery.js?ver=1.7.1 you've already got a call of jQuery.noConflict(); , so jQuery is not accessible by using the $
...and also remove the ? (see Pointy's comment above)