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>
Related
I found similar threads but unfortunately didn't help resolve my issue so posting a new thread
I am trying to consume the linked API through localhost. The error I am getting is:
Uncaught Error: You must specify a valid JavaScript API Domain as part of this key's configuration.
Under Javascript Settings, Valid SDK Domains I added
http://127.0.0.1
http://127.0.0.1:8704
http://localhost
http://localhost:8704
http://localhost
I tried adding in https as well but still I am facing the same error.
I tried creating a ASP.NET project in Visual studio and tried running my html file with the associated port number which also I added in valid SDK domain, still the same issue.
My code is below:
<html>
<head>
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
api_key: [MY KEY] //Client ID
onLoad: OnLinkedInFrameworkLoad //Method that will be called on page load
authorize: true
</script>
</head>
<script type="text/javascript">
function OnLinkedInFrameworkLoad() {
console.log('OnLinkedInFrameworkLoad');
IN.Event.on(IN, "auth", OnLinkedInAuth);
}
function OnLinkedInAuth() {
console.log('OnLinkedInAuth');
IN.API.Profile("me").result(ShowProfileData);
}
function ShowProfileData(profiles) {
console.log('ShowProfileData' + profiles);
var member = profiles.values[0];
var id = member.id;
var firstName = member.firstName;
var lastName = member.lastName;
var photo = member.pictureUrl;
var headline = member.headline;
//use information captured above
var stringToBind = "<p>First Name: " + firstName + " <p/><p> Last Name: "
+ lastName + "<p/><p>User ID: " + id + " and Head Line Provided: " + headline
+ "<p/>"
document.getElementById('profiles').innerHTML = stringToBind;
}
</script>
<body>
<div id="profiles"></div>
</body>
</html>
I am using boomerang plugin to check web performance.
Following the code that used to get page load time.
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-base-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/yui/yui-later-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js"></script>
<script src="/js/boomerang.js" type="text/javascript"></script>
<script src="/js/plugins/rt.js" type="text/javascript"></script>
<script src="/js/plugins/bw.js" type="text/javascript"></script>
<script src="/js/plugins/navtiming.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
BW: {
enabled: false,
cookie: 'HOWTO-BA'
},
RT: {
cookie: 'HOWTO-RT'
}
});
YUI().use("io-base", function(Y) {
var uri = "dynamic-content.txt?" + new Date().getTime();
var timer;
function complete(id, o) {
var html = "<p>\n" + o.responseText.replace(/^$/mg, '</p>\n<p>') + "\n</p>";
document.getElementById("dynamic-content").innerHTML = html;
if(timer) timer.loaded();
};
Y.on('io:complete', complete);
timer = BOOMR.requestStart("my-timer");
var request = Y.io(uri);
});
BOOMR.plugins.RT.setTimer("t_js", new Date().getTime() - t_pagestart).
startTimer("t_head");
</script>
script src="/pgr/js/howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.plugins.RT.endTimer("t_howtojs").endTimer("t_body");
</script>
Here YUI that make separate ajax call and adds execrutiont ime in page load time. In my website there are many ajax calls on page load, those execution time I want to add in page load time.
But stuck how to use YIU with existing code.
My ajax call
jQuery(document).ready(function($) {
$.ajax({
type : 'POST',
url : '/getdata/',
data : { sid:retSid},
dataType: 'JSON',
beforeSend: function(){
$('.blocker').show();
},
success : function(result) {
if(result.data)
{
....
}
});
});
You should use one of the SPA plugins to measure single page apps / AJAX apps. It would be better to ask your question on the boomerang support forum. We prefer keeping all discussion and issues in one place so that if a code change is required, we can reference the discussion via a git reference.
You can ask the question here: https://github.com/soasta/boomerang/issues
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).
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);
});
I have a website that loads content via jQuery. When loading all my javascript and css files needed for facebox. It I put a link on the initial page, it works fine. However, when changing the 'innerHTML' of one element, the same links do not function.
And I even tried putting the javascript & css files in the innerHTML and it still doesn't work! It loads up as a new page.
Please help!
Thanks
Edit 1:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://justtwobros.com/actions.js"></script>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
text (this link is the one that works)
<script>
showAllWorkOnLoad();
</script>
actions.js
function showAllWorkOnLoad() {
var thePostData = "filter=allwork";
$.ajax({
type: "POST",
url: "http://justtwobros.com/get_work.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('content').innerHTML = theRetrievedData;
$("#content").fadeIn(20);
focusButtonAllWork();
var count = 0;
$("#content").find('.work_thumbnail_wrapper').each(function() {
count++;
var timeWait = (count * 100) + 500;
var theId = $(this).attr('id');
var theIdDone = "#" + theId;
setTimeout(function(){$(theIdDone).fadeIn(300);},timeWait);
});
}
});
}
get_work.php
text (this link that doesn't work)
It doesn't work because that link does not have a listener attached to it. You can confirm this is your problem by adding this code after your ajax call (on success, after you have inserted the link into the document).
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})