Transmitting a JSON-Object to a new HTML side - html

Hello guys i have a big problem, which i somehow cant fix. I am having some JSON- Objects which i am giving out with a table, this part works perfectly fine. But than i would like to have a button or link that posts one of this JSON- Objects (the ID) to a new .html page. In this new .html page i would like to use the ID in Javascript code.
Does anybody know if there is a way how i can accomplish this and if yes how can i do it?
I tried to post it via the php _get methode but it just doesnt work it tells me that there is an " Uncaught TypeError: Cannot read property 'value' of null"
My JS-Code looks like this:
function dataRequest() {
var output = $('#output').text('Loading data...');
$.ajax({
url: 'http://test/html/getmeineFahrten.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
output.empty();
var ort ='<table border="dashed" width="30%">'
$.each(data, function(i,item){
var ServerDatum = item.abfahrt
var Datumonly = ServerDatum.substring(0,4) + ServerDatum.substring(5,7) + ServerDatum.substring(8,10);
var calcDatum = Datum - Datumonly
if(item.user_user_id == userID){
if(calcDatum < 0){
ort += '<tr>'+'<td>'+item.abfahrt+'</td>'
+ '<td>'+item.rueckfahrt+'</td>'
+ '<td>'+item.StartOrt+'</td>'
+ '<td>'+item.Zielort+'</td>'+'<td>'+'<form action="http://test/html/meineFahrten_Karte.html?FahrtenID= + item.fahrten_id" method="get"><input type="submit" value="Karte">'+'</form>'+'</td>'+'</tr>';
}}
});
ort +='</table>';
output.append(ort);
},
error: function(){
output.text('There was an error loading the data.');
navigator.notification.confirm(
'Something went wrong. Would you like to retry?',
yourCallback,
'Error',
'No,Yes'
);
}
});
}

You can't access URL parameters unless you create your own function to do so. Unfortunately, there is no native function for this yet, however, user Quentin answers this question in greater detail and provides a function for getting URL parameters.
How to get the value from the GET parameters?

Related

data.push is not working with ajax

I am trying to send an extra data with ajax. I used (form).serializeArray() and added an extra data. when I am trying to send it via ajax, the alert showed me that the extra data wasn't added to the the serialized array.
This is my code:
$('#addrows').on('click',function(e){
var imgsrc= document.getElementById("imgz").src;
alert(imgsrc);
e.preventDefault();
var data_save = $('form').serializeArray();
data_save.push({ name: "imgname", value: imgsrc});
$.ajax({
url:"add.php",
cache:false,
method:"POST",
data:data_save,
success: function(data_save){
var obj = JSON.parse(data_save);
console.log(obj);
t.row.add( obj ).draw( false );
alert(obj);
}
});
});
});
I have tested the above example and everything seems fine over there. Also I dont see alert after:
var data_save = $('form').serializeArray();
data_save.push({ name: "imgname", value: imgsrc});
So try adding:
console.log(data_save);
and check the response or send me the screenshot of data that get passed in developer console.
I dont know what was wrong but then suddenly it worked.

jQuery and JSON vs IE - SCRIPT5007: Unable to get value of the property

I'm struggling to get this script working. It's basically a simple ajax call to retrieve data from a php which returns a JSON code.
function refreshWindows(){
if(AjaxPull && AjaxPull.readystate != 4){
AjaxPull.abort();
}
AjaxPull = $.ajax({
type: 'POST',
url: $path,
data: {
ajax: true,
mode: 'update',
to: Math.round(currentDate.getTime() / 1000),
from: Math.round(previousDate.getTime() / 1000)
},
dataType: "json",
success: function (data) {
alert(data); //that's for debug
$replies = data.Updates;
$.each($replies ,function(group,value) {
if (value!=''){
$("#group"+group+" .content").append(value);
$("#group"+group+" .content").stop().animate({ scrollTop: $("#group"+group+" .content")[0].scrollHeight }, 800);
if (!$("#group"+group+" .Window").is(':visible')) {
$("#group"+group+" .BottomBox").fadeTo('fast', 0.5).fadeTo('fast', 1.0);
}
}
});
previousDate = currentDate;
currentDate = new Date();
timeController.push( setTimeout(function(){refreshChatWindows();}, 500) );
}
});
}
The error I get in Internet Explorer is:
SCRIPT5007: Unable to get value of the property 'Updates': object is null or undefined
Everything works fine in Firefox and Google Chrome.
Initially my code was made using .get but someone suggested switching to the .ajax - well, it didn't help. I tried using .done(function(data){ but it didn't work either. I also tried sending all of the data in my URL opposite to the data property, it worked fine in FF, but IE still popped the same error. Finally I tried adding different headers to the PHP, like for example header('Content-Type: application/json'); but it didn't change anything. I run out of ideas / possible solutions I could fine on stackoverflow, so any help would be appreciated.
In IE I went to Developer Tools, network tab and tried to see if everything works - yes, the request is being sent correctly with all the data, and a response I receive is correct JSON, just as it is in Firefox:
{"Updates":{"1":"","2":"","3":"","5":"","6":"","7":"","8":""},"time":{"from":"1367489761","to":"1367489761"}}
which gets me really confused, cause I'd have thought that Undefined error might happen only because something is not being sent back in IE for whatever reason, but clearly: It's not the case. I get my JSON back. Only IE for some unknown reason still thinks that data is undefined.
Ok, I found a solution finally.
Basically:
Remove any headers sent by PHP script. Especially: Content-type headers. (luckily - seems like sessions still can be used)
Use }).done(function ( data ) { instead of success: function (data) {
and that's all. Suddenly it started to work. It's very weird. Seems like the shotgun tactic (randomly changing bits of code till it works) is actually a valid way of solving problems. hehehe
I have a similar json call that returns data that looks like this:
{"GetTombstoneDataRestResult":{"AlphaSort":"Arai Junichi","Classification":"A&D Design Object"...etc
In other words, a lot like your json data. To reference it in jQuery, I use the callback name.
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
success: function (result) {
$('#screenshot').append('<p><strong>Title: ' +
result.GetTombstoneDataRestResult.Title + '</strong><br />Year: ' +
result.GetTombstoneDataRestResult.Dated + '<br />Artist: ' +
result.GetTombstoneDataRestResult.DisplayName + '</p>');
}
});
Looks like you want to try this too:
var replies = data;
$.each(replies.Updates ,function(group,value) {
You have a character called ​ in your JSON.
See a description here:
What's HTML character code 8203?
It's right before your colon here "time"​:
Can you clean your output and validate the JSON and try again?

cross domain reading remote url using Jquery/Ajax/Json

I have an HTML page from which i want to read a remote webpage which is at http://xtremeinspection.com/new2you4kids/app/android/get_product_size.php?productID=113
The webpage returns a value depending on the Query string parameter passed that is the productID
My question is since its cross domain reading data which is the best method to use Jquery/Ajaz/Json or mix of all these ?
I have searched it on Google but i cant find example of reading and displaying the data in a DIV .
I am using this code but it doesnt display anything
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON('http://xtremeinspection.com/new2you4kids/app/android/get_product_size.php?productID=113', function(data){
$.each(data, function(i, tweet){
$('#tweets').append('<li>' + tweet.text + '</li>');
alert(tweet.text);
});
});
});
</script>
<ul id="tweets"></ul>
A basic example like this should help you get started:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: "gulmarg",
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 5 ) return false;
});
});
DEMO

Get request within page

I've been looking around, but I'm not quite sure what to search for...
I want to have a webpage send a Get request to a python script when you first open the page, maybe with the option to refresh it with a button. Is there a way to send a request ("script.py?var=test") and display the results within the page?
What I tried to use earlier: (didn't work..)
Am I doing something stupid? I don't know anything about JavaScript
<p>Highscores:</p>
<p id='scores'>text</p>
<input type='button' onclick='changeText()' value='Change Text'/>
<script type="text/javascript">
function changeText(){
var request = new XMLHttpRequest();
request.open("GET", "../../cgi-bin/highScore.py?scoreMethod=load&game=ulama", true)
request.onreadystatechange = function(){
var done = 4, ok = 200;
if (request.readyState == done && requeset.status == ok){
document.getElementById('scores').innerHTML = request.responseText;
}
};
request.send();
}
</script>
Also, should I have the python script return a full page with the header and all? or just the relevant section?
Use a Jquery call in this case to clean up your code a little bit.
Also in this case you should use a post because of the nature of your 'beast' :)
function changeText(){
$.ajax({
method : "POST",
URL : "../../cgi-bin/highScore.py",
data : {
"scoreMethod" : "load",
"game" : "ulama"
},
success : function(data) {
$("#scores").html(data);
}
});
}
I'd also look into JSON and jquery being returned as its probaly going to be easier in the long term (Though ive never played with python.
why not using jquery for doing this?
$('#scores').load('../../cgi-bin/highScore.py?scoreMethod=load&game=ulama', function(responseText, textStatus) {
alert(textStatus);//check here whether textStatus equals 'success' or something else (maybe an error)
});

Using the Yahoo Weather API with JSON and the script tag

I'm trying to get the Yahoo Weather with JavaScript. I originally made a proxy, but found that clumsy.
So can get the JSON response from http://weather.yahooapis.com/forecastjson?w=9807, and I know that the script tag can avoid the same-domain restrictions, but I'm getting a syntax error.
Yahoo's JSON response isn't padded; I've got the callback working but the browser isn't interpreting the JSON properly.
I've seen many examples like How to read yahoo weather JSON data with Jquery ajax but it's so weird because all those give me the cross-domain error.
Can anyone help me with this? Cross domain, yahoo weather, without special servers or YQL or anything like that. Something that just works out of the box.
If you're expecting JSON-P then you need to add a callback function name to the query. With jQuery, this is always ?. jQuery will substitute it with a randomly generated function name:
var query = escape('select item from weather.forecast where location="CAXX0518"'),
url = "http://query.yahooapis.com/v1/public/yql?q=" + query + "&format=json&callback=?";
$.getJSON(url, function(data) {
console.log( data );
});
If you want to use yql, this is the link:
http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%223015%22&format=json
When you call it just pass that as the parameter in your jquery. So, in other using STeve's code you can simply replace the url passed into the getJSON function call with the yql link and of course replace the zip code you want to use for the location. So, here's the code:
$(document).ready(DocReady);
function DocReady()
{
var Result = $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
function (data)
{
$("body").append("Sunrise: " + data.query.results.channel.astronomy.sunrise + "<br />");
$("body").append("SuntSet: " + data.query.results.channel.astronomy.sunset + "<br />");
});
}
Here is the section you need to replace to get the proper location:
Enter zip code between both %22's
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%22
33333
%22&format=json
Let me know if you have any questions.
Here is some code
$(document).ready(DocReady);
function DocReady()
{
jQuery.support.cors = true;
var Result = $.getJSON("http://weather.yahooapis.com/forecastjson?w=9807", "",
function (data)
{
$("body").append("Sunrise: " + data.astronomy.sunrise + "<br />");
$("body").append("SuntSet: " + data.astronomy.sunset + "<br />");
});
}