current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

I'm a bit new to ajax and my javascript isn't to shabby I'm having a difficult time figuring this out. I'm trying to add values from a JSON string located on a separate url to my html code through an AJAX Get method.

Currently this is my code:

$.ajax({
dataType: "jsonp",
jsonp: 'callback',
cache: false,

url: "http://www.url.com/userInfo/currentUserInfo",
success: function(data) {
    $("#name").val("firstName");
    $("#avatar").val("userProfileImg");
    $("#notNum").val("numOfNotifications");
}
});

Html 




 <div id="name"></div>
 <div id="avatar"></div>
 <div id="notNum"></div>

I'm pretty sure I'm missing something in the ajax script.. but to be honest I can't figure out what. Could someone lend a helping hand?

Thanks!

share|improve this question
    
is there any error in the console? also are you sure the server is supporting jsonp – Arun P Johny May 31 '13 at 2:47
    
is the success handler fired, or is there a problem elsewhere? – Jason May 31 '13 at 2:53
    
Open up network tab in your chrome console and see if your request is going through or getting CORS related error? – PSL May 31 '13 at 3:01
up vote 1 down vote accepted

You want to use data that the end point is returning in the success function. As you've written it, the contents of the element will be replaced with the strings "firstName", "userProfileImg", "numOfNotifications" which probably isn't your intent.

Also, you will need to use the text() function to add text to a div. If your service is returning HTML, then use the html() function instead.

$.ajax({
dataType: "jsonp",
jsonp: 'callback',
cache: false,

url: "http://www.url.com/userInfo/currentUserInfo",
success: function(data) {
    // use html() if any of the data fields contain markup
    $("#name").text(data.firstName); markup
    $("#avatar").text(data.userProfileImg);
    $("#notNum").text(data.numOfNotifications);
}
});
share|improve this answer
    
Sweet thanks Jason. have are looking on the brighter side now. I am still getting an error though and I'm not sure whether it has to do with the ajax call or the Json string. I'm getting an error in my console that says: "Uncaught syntax error: Unexpected token: and it is pointing to the url of the Json string. Does this mean that there is something wrong with the Json string? or is there something still wrong w/ my ajax script. By the way thanks again for the help – BeDesinged May 31 '13 at 13:46
up vote 2 down vote

val() is for input. So you can use .html() or .text() for the div element here.

If your ajax call reaches success handler this should give your intended result. 

    $("#name").html("firstName"); // or data["firstName"] ?
    $("#avatar").html("userProfileImg"); //or data["userProfileImg"]
    $("#notNum").html("numOfNotifications"); //or data["numOfNotifications"]

.html()

.text()

.val()

share|improve this answer
up vote 0 down vote

1000's of data u can do in single line.

use this. keep your json data as 

{"name":"raja","age":20,"register_no":"19283KSR"}

keep your component id names like

1.cmp_name 2.cmp_age 3.cmp_register_no

do this in your ajax success

for (var index in data){
if ($("#cmp_"+index).length != 0) 
    $("#cmp_"+index).html(data[index]);
}

To validate your json see JSONLint

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.