Develop Reference

Reading data from JSON reply with JQuery

I've been having trouble accessing this piece of content in a json object. Here is my code for fetching data:
function getEntries(key){
$.ajax({
url: "https://openlibrary.org/api/books?bibkeys=ISBN:" + key + "&jscmd=details&callback=mycallback",
dataType: "jsonp",
success: function(data){
console.log(data);
}
});
}
The reply I get looks like this:
How do I access the pointed object if the key is different for every search?

Try using
data["ISBN:"+key]
Where key is the key you are passing to the function

I think I found it after all...
function getEntries(key){
$.ajax({
url: "https://openlibrary.org/api/books?bibkeys=ISBN:" + key + "&jscmd=details&callback=mycallback",
dataType: "jsonp",
success: function(data){
console.log(data["ISBN:"+key]);
}
});
}
did the trick.

JQuery text change in h3 tag

I am using ajax to call a page which looks like:
<div class="ui-block-a">
<div class="jqm-block-content invoicehomepage">
<h3>Invoices</h3>
<p>Pages</p>
<p>Navigation</p>
<p>Loader</p>
<p>Transitions</p>
</div>
</div>
and my ajax call is:
var pageContent = '';
$.ajax({
url: 'jsp/home/home.jsp',
type: 'POST',
dataType:'json',
success:function(data) {
$.each(data, function(i, v) {
$.ajax({
url: 'tmpl/homePortlet/'+v.link+'.html',
dataType : "html",
success: function(html_data) {
//var result = $('</div>').append(html_data).find('h3').html();
//$('h3').html(v.portletName);
pageContent += html_data;
//console.log(pageContent);
}
});
console.log(pageContent+'sssss');
});
}
});
I want to change text within h3 tag with the value i got from my second ajax call.
Thanks for help.

You need to change the HTML element h3 by finding it in the content that you have got in your Ajax Call something like this:
pageContent = $(html_data).find("h3:first").html(" YOUR-TEXT-YOU-WANNA-PUT ").parent();
Update:
I think you should use async: false in your second ajax call. And secondly, I don't think so that you needs to store/update html into some Variable as you have used pageContent. You should use JQuery .append() method:
$.ajax({
url: 'jsp/home/home.jsp',
type: 'POST',
dataType:'json',
success:function(data) {
$.each(data, function(i, v) {
$.ajax({
url: 'tmpl/homePortlet/'+v.link+'.html',
dataType : "html",
async: false,
success: function(html_data) {
var new_html_data = $(html_data).find("h3:first").html(v.portletName).parent();
$('.ui-grid-a').append(pageContent);
}
});
});
}
});

use: $('h3').text(v.portletName);

It seems your AJAX request is asynchronous..
You can add async : false, option in ajax request, so when the request end, second request begin and at success of second ajax request you can change text of H3 tag.
var pageContent = '';
$.ajax({
url: 'jsp/home/home.jsp',
type: 'POST',
dataType:'json',
async:false,// add this line so the success callback execute after response receive.
success:function(data) {
$.each(data, function(i, v) {
$.ajax({
url: 'tmpl/homePortlet/'+v.link+'.html',
dataType : "html",
async:false,// add this line so the success callback execute after response receive.
success: function(html_data) {
$('h3').html(v.portletName);
pageContent += html_data;
}
});
console.log(pageContent+'sssss');
});
}
);

Javascript image timout

Good day, i'm having a problem with my code, can't get to show the loading image for few seconds, while POST code is getting in database and gives backinformation to show.
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
$("#poll_content").html(data);
}
});
});
I would hope on your fast help, i'm begginer in java, so can't dicide it myself.

If what you want is to create a delay so the loading animation shows (I believe that is... mmm different, I'm going with that...)
what you need is to set a timeout like so:
setTimeout(function(){ alert("Hello"); }, 3000);
now in your code the function could contain the ajax call:
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
setTimeout(function(){
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
$("#poll_content").html(data);
}
});
}, 3000);
});
or be inside the success function, which I believe is better:
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
setTimeout(function(){$("#poll_content").html(data);}, 3000, data);
}
});
});
I didn't test it, so check if in the second case data can be seen inside the callback function (it should I think...)
Hope it helps.

How to make jQuery JSON request and use response data to change html element values?

I'm not good at JQuery at all, in fact this is my first encounter due to Shopify. In other words I'm completely lost.
This is what I was able to do so far.
function FindPlayer()
{
var playerid = $('input[id=playerId]').val();
var clubname = $('input[id=teamname]').val();
$("#searchBar").attr('data-user-input', value);
$.ajax({
url: "http://website.com/index.php?player=" + playerid + "&club=" + clubname,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
response(data);
}
});
}
The json response is going to look like this:
[{"playerFound":"true","tradeid":"123456"}]
I want to then check if playerFound is true or false before setting this element:
<input id="tradeId" type="hidden" name="attributes[tradeid]" />
This is probably pretty basic for JQuery users but not for me any help would be appericiated.

Try This:-
$.ajax({
url: "http://website.com/index.php?player=" + playerid + "&club=" + clubname,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
if(data[0].playerFound == "true")
{
$('#tradeId').val(data[0].tradeid);
}
}
});

Since content type is JSON you can simply use like this
success: function (data) {
if(data.playerFound == "true"){
$('#tradeId').attr('name',data.tradeid) // if you want to change name
$('#tradeId').val(data.tradeid)// if you want to change value
}
}

Access Javascript variable in php in same page

Hi I am facing problem with json data. Here is my js code.
<script>
$(function(){
$.ajax({
url:"http://example.com/salary?from=USD&to=GBP",
dataType: 'jsonp',
success:function(json){
alert(json['to']);
},
error:function(){
alert("Error");
},
});
});
</script>
I want to use json data in PHP in same page.
I know that you cannot assign Javascript value to PHP variable.
Is there way to do this?
Or is possible to do similar task in php (Jquery Ajax cross domain) like above javascript code ?
Any help?

your js code
var my_json_obj = new Object();
my_json_obj .name = "Lanny";
my_json_obj .age = "25";
my_json_obj .location = "China";
var json_str = JSON.stringify(my_json_obj);
<script>
$(function(){
$.ajax({
type: "POST",
dataType: "json",
url: "my.php",
data: {
postData: json_str
},
success: function (data) { alert(data) },
eror: function (data) { alert(data) }
});
});
</script>
your my.php file
$postData=$_POST['postData'];
$my_obj=json_decode($postData,true);
$name=$my_obj['name'];
$age=$my_obj['age'];
$localtion=$my_obj['location'];

You could do that with AJAX.
You need a script, which will give javascript vars to the PHP Script, like:
var PHPFile = 'PHPFile.php?arg1=' + arg1 + '&arg2=' + arg2;
In the "PHPFile.php" you can access them by
$arg1 = $_GET["arg1"];
$arg2 = $_GET["arg2"];
Or you could do that with jquery $.ajax-> data, too.
You can access them by
$arg1 = $_POST["arg1"];
$arg2 = $_POST["arg2"];
Something like that:
result = $.ajax({
type: 'POST',
async: false,
url: 'PHPFile.php',
data: ({
arg1: arg1,
arg2: arg2
})
}).responseText;
alert(result);
EDIT:
If you want to do that with a json-object, try this:
json_decode();
http://www.php.net/manual/en/function.json-decode.php
http://www.php.net/manual/en/function.json-encode.php