getJSON not outputting the html data into a div - javascript

If I try to output that getJSON in console.log(data) is fine, i see it, yet it doesn't go into the div as I am expecting to.
Trying this:
$.getJSON("http://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?",
{
page:"Football", prop:"text"
}, function(data) {
$(".modal-content").html(data);
});
<div class="modal-content"></div>
NOTE: console gives no error and div is empty

You have to access the text property of the returned object correctly. Just trying to set .html(.. by passing the returned object will not work, because jquerys .html() method expects a function or a string as the parameter.
According to wikis API:JSON version 2 you can add the following property to the options object passed to $.getJSON.
formatversion:2
Eliminate useless indirection, e.g. {"text":"..."} instead of {"text":{"*":"..."}} and {"key1":"value1","key2":"value2"} instead of [{"name":"key1","*":"value1"},{"name":"key2","*":"value2"}].
So here is the correct anwser.
var location = "https://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?";
$.getJSON(location, {
page:"Football",
prop:"text",
formatversion: 2
}, function(data) {
$(".modal-content").html(data.parse.text);
//console.log(data.parse.text)
});

Related

How to get the value of an object present inside a div with id using AJAX

I have a view page where i have an object inside a div like :-
<div id="booking_id"><%#booking_id%></div>
I want to get the value of #booking_id to be passed in AJAX data params and my ajax function is like this :
<script type="text/javascript">
$(document).ready(function(){
$("#selecthotel2").change(function(){
var room = $(this).children(":selected").val();
var params = $('#booking_id').filter('#booking_id').val();
$.ajax({
url: "/rooms/assign_room",
data: {
room,
params
}
})
});
});
</script>
But i am not getting the #booking_id value to be passed to another action.
I think i am going somewhat wrong in the ajax syntax,kindly help.
change
$('#booking_id').filter('#booking_id').val();
to simply
$('#booking_id').text();
Currently your code is trying to look inside $("#booking_id") for another element with the same ID, instead of taking the value of $('#booking_id') itself.
Also since $("#booking_id") is a div and not an input, I think you need to get the contents using text(), not val().

What is wrong with this Jquery Ajax request in Chrome?

I am using the following code to make a request to a PHP script:
$.ajax({
method: "POST",
url: "myAPI.php",
data: {
orderById: 2,
action: 'returnStuff',
},
success: function(data){
$.each(data.data, function(key, value) {
var $targetToMove = $('.shape.'+value.attr_name);
//if element already exists on page, move it to the end of the container
if($('.'+value.xml_name).length){
$('.container').append($targetToMove);
}
});
}
});
Here is a simplified example of my return data
{"data":{"0":{"id":"1","name":"This","color":"blue"},
"1":{"id":"2","name":"That","color":"red"},
"2":{"id":"3","name":"whatever","color":"blue"}}}
If the orderById equals 1, the data is returned numerically from lowest to highest by the id. If it equals 2 it is returned numerically from highest to lowest like this:
{"data":{"0":{"id":"3","name":"whatever","color":"blue"},
"1":{"id":"2","name":"That","color":"red"},
"2":{"id":"1","name":"This","color":"blue"}}}
The idea is that the API returns the data in the order I want, then on success in the ajax call, the elements are re-arranged on the page in the order of the returned data object.
This works how I intend in Firefox, but in Chrome, whenever I console log the data on success, the order is always the same, despite the console indicating the response from my API is in the correct order.
What am I missing? I can't tell if this is a caching issue or if I am just overlooking something in my javascript.
Object properties order is not guaranteed in JavaScript. You would rather use Array for that
Format you json to look like this:
{"data":[{"id":"3","name":"whatever","color":"blue"},{"id":"2","name":"That","color":"red"},{"id":"1","name":"This","color":"blue"}]}

js working in console but not from function

I'm calling the below function after the data from an ajax call is returned. It performs the first console.log() which contains the data from the ajax call. But the each() loop iterating through - response, does not console.log anything.
primaSaveOrder.prototype = {
start: function(response){
console.log(response)
$j('#primaId').val('');
$j('#dialog').closest('.ui-dialog-content').dialog('close');
$j.each(response['billing'], function(i, val) {
console.log(response['billing'][i])
});
},
}
I don't think my code is too wrong though because if I manually create a variable in the console equal to the output of - console.log(response) and then run the -
$j.each(response['billing'], function(i, val) {
console.log(response['billing'][i])
});
it works. What I would prefer to run is $j('#' + i).val(response['billing'][i]) instead of console.log(response['billing'][i].
This also works if I do it directly in the browser but not in the file. I assume it's related but I can't figure out how to fix it.
this is an example of what i am iterating with some data changed for privacy
{"billing":{"order-billing_address_firstname":"test","order-billing_address_lastname":"test","order-billing_address_street0":"6 test","order-billing_address_street1":"test","order-billing_address_city":"","order-billing_address_country_id":"GB","order-billing_address_region":"","order-billing_address_postcode":"16","order-billing_address_telephone":"","order-billing_address_vat_id":"","order-billing_address_prima_address_code":"0"},"shipping":{"order-shipping_address_firstname":"test","order-shipping_address_lastname":"test","order-shipping_address_street0":"6 test","order-shipping_address_street1":"test","order-shipping_address_city":"","order-shipping_address_country_id":"GB","order-shipping_address_region":"","order-shipping_address_postcode":"16","order-shipping_address_telephone":"","order-shipping_address_vat_id":"","order-shipping_address_prima_address_code":"0"}}
May be the type of response is String. In that case convert the response into json using
response = JSON.parse(response);
before using response for iteration.
I don't say, it will help, but there are several things that should be checked for issue root:
Check whether the elements exist and they are really unique (since ids are used). console.log(i, $j('#' + i).size()) may do the trick. I believe that there may be no elements to set values.
Use val argument directly instead of referencing it through response['billing'][i]. Though I don't see how the response var may be overridden or hidden, but let's use the value directly since it's passed into callback.

Converting an ajax object into a string

I have an ajaxed in element that I'm trying to convert into a string that can be stored into a variable. After I put it into the variable, the variable does not console.log; it says it's an object. How do I get it to print out the content of the variable?
Here's the code I'm using:
$.get('/Default.aspx?PageID=15018909&A=WebApp&CCID=21437&Page=1&Items=500', function(data){
$('#ajaxResults').html(data).find("ul").remove();
var ajaxResult = $('#ajaxResults').html($('#myArray').text());
console.log(ajaxResult);
});
I also need to run a replace() on that ajax result, but I can't because the object isn't a string.
You are taking the data back from $.get() and sending it to an element, then reading the element in. data already contains the information you need, see $.get
Why wouldn't you just retrieve the unparsed text data from the jqXHR parameter to the success callback?
$.get('/Default.aspx?PageID=15018909&A=WebApp&CCID=21437&Page=1&Items=500', function(data,status,jqXHR){
console.log(jqXHR.responseText);
});
Or conversely, just look at the data itself?
$.get('/Default.aspx?PageID=15018909&A=WebApp&CCID=21437&Page=1&Items=500', function(data,status,jqXHR){
console.log(data);
});
If you know the data is already an object
JSON.stringify(data)

variables showing as undefined in firebug when they are defined

here is my site http://iadprint.com/products?product=Business%20Card
when i select a value for quantity a price is supposed to show in the pricing div on the top right.
this used to work but for some reason today in firebug under dom i can see that a few variables show undefined. when i do the ajax call iadprint.com/ajax.php?id=1 the data shows correctly and the variables in the js are all defined. what can be wrong? here are the variables that i am seeing undefined.
woCoating_price
woColor_price
woDesign_price
woJob_Name_price
woPDF_Proof_price
woQuantity_price
woRound_Corners_price
woTurnaround_price
I replaced your $.get() call with a full $.ajax() call that includes an error: callback.
The result is that you're getting a parse error because your JSON response is invalid.
"parsererror" "Invalid JSON: {"price":"15.00"}<br/>"
You need to get rid of that <br/> tag.
If this isn't it, then you'll need to provide specific detail on how to reproduce the problem, and in which part of your code you expect to see a defined value.
EDIT: Here's the change handler I used after removing yours:
$("#Quantity").change(function () {
hash = $("#Quantity").val();
console.log('hash',hash);
$.ajax({
url:"ajax.php",
data: { id: hash },
dataType:'json',
success:function (out,b,c) {
woQuantity_price = out.price;
displayPrice();
console.log(out,woQuantity_price,b,c);
},
error:function(a,b,c){
console.log('error:',a,b,c);
}
});
});

Categories

Resources