Receive array from ajax request - javascript

Good day, Please check my script first.
$(document).ready(function() {
$("#findmynip").click(function() {
$("#hasilnip").html('<img src="<?=base_url();?>assets_global/images/loader.gif"> Please wait');
var nipnnya = $("#nipnya").val();
$.ajax({
type: "POST",
data: {
nip: nipnnya
},
datatpe: 'json',
url: "<?=base_url();?>registrasi/cek_ada/",
success: function(hslnip) {
if (hslnip) {
alert(hslnip);
$("#name").html(hslnip);
//How do i do this
$("#name").html(hslnip['FullName']);
$("#birthday").html(hslnip['BirthDate']);
} else {
$("#name").html('Failed');
}
}
});
return false;
});
});
What i want to is receive the ajax request to my html.
When i try to console.log(hslnip); the result is {"FullName":"BUNGA","BirthDate":"1994-10-03 00:00:00.000"}. Any help would be appreciated.
What i want to receive is
<div id='name'></div>
<div id='birthday'></div>
I made typo at this part : datatpe: 'json', and i change it to dataType: 'json'. It's working now, thans for helping guys.

You cannot remove an array in your situation. You can use It do build an HTML content which can be displayed in hasilnama element.
Change this:
$("#hasilnama").html(hslnip);
To this for example:
$("#hasilnama").html('<span>Fullname: ' + hslnip.FullName + '</span><br><span>Birthdate: ' + hslnip.BirthDate.substring(0, 10) + '</span>');

var hslnip = {"FullName":"BUNGA","BirthDate":"1994-10-03 00:00:00.000"}
$('#name').text(hslnip.FullName)
$('#birthday').text(hslnip.BirthDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='name'></div>
<div id='birthday'></div>
Use hslnip.FullName and hslnip.BirthDate

Related

I want to set a url inside my ajax call back function

I want to make a clickable link in my ajax success response. But I could not do this.
<td id="attachment"></td>
function DoAction(id) {
$.ajax({
type: "get",
url: "/view_message",
data: "id=" + id,
dataType: 'json',
success: function(data) {
if (data) {
var text = "No Files There !";
$('#myModal').modal('show');
$('#subject').text(data.subject);
$('#body').text(data.body);
$('#created_at').text(data.created_at);
if (data.attachment) {
$('#attachment').html('<a href="files/' + data.attachment + '" />click</a>');
} else {
$('#attachment').text(text);
}
}
}
});
}
I want to display a clickable link in my .
I always encounter this when using ajax calls so;
Update your code from this.
$('#attachment').html('<a href="files/' + data.attachment + '" />click</a>');
To This.
$(document).find('#attachment').html('<a href="files/' + data.attachment + '" />click</a>');
if the code doesn't work add a console.log("working") function to see if your code is really reaching the success function.
I hope it helps.

How to use pass ajax data that is displaying in html?

I have a question, that I can't seem to find the 'best' solution for my question.. I have an AJAX call that displays data in the DOM, via jQuery.
JSON
[{
"id":"123"
},
{ "id":"456"
}]
JS
$(document).ready(function() {
$.ajax({
url: 'get/data',
dataType: 'json',
data: '{}',
success: function(data) {
var html = '';
$.each(data, function(i) {
html += '<p>My ID: ' + data[i].id + '</p>';
}
$('#id').append(html);
},
error: function(err) {
console.log(err);
}
})
});
As you can see I am displaying that data here. I would like to pass that ID to another AJAX call by selecting a checkbox and pushing a button or perhaps clicking a link. Whats the best way to accomplish this?
EDIT: I apologize, my actual issue is related to array data. I have updated the code. I am displaying an JSON array in the html now, and I want to pass the id of the user/row that I click?
Thanks,
Andy
$(document).ready(function() {
var resid;
$.ajax({
url: 'get/data',
dataType: 'json',
data: '{}',
success: function(data) {
resid = data.id;
var html = '';
html += '<p>My ID: ' + data.id + '</p>'; $('#id').append(html);
},
error: function(err){
console.log(err);
}
});
$('link').click(function () {
// pass id to second ajax
});
});
try jquery-template
https://github.com/codepb/jquery-template
hope help you

Jquery ajax issue in php and ajax code

Here in the following code in jquery i get the alert test1 but when i try to get alert test2 i dint got that... there is some issue in code please help me to resolve.
$(document).ready(function() {
$(".delete-item-details").click(function() {
alert('test1');
var id = $(this).attr('ids');
alert('test2');
var order_id = $("#order_id").val();
goto_url = "/order/DeleteOrderDetailItems/" + id;
dataString = 'id=' + id + '&order_id=' + order_id;
$.ajax({
type: "POST",
url: goto_url,
data: dataString,
cache: false,
success: function(html) {
$("#row-id-" + id).fadeOut();
$("#total_span").html(html);
}
});
});
});
Please change this three lines in code and you will definitely get alert !!
alert('test1');
var id=$(this).attr('id'); // here you have written ids
alert('test2');
The default attribute is 'id' not 'ids'
If still now clear let me know i will help you out.
TRY
var id = $(this).prop('ids');

What's the error in following function code of jQuery?

I've written one jQuery function to get the city and state code based upon the zip code value but facing some issue with some errors. Can someone please help me in correcting the mistakes I'm making here.
Following is my code :
$(document).ready(function() {
$("#zip_code").keyup(function() {
var el = $(this);
var module_url = $('#module_url').val();
if (el.val().length === 5) {
$.ajax({
url : module_url,
cache: false,
dataType: "json",
type: "GET",
data: {'request_type':'ajax', 'op':'get_test_category_list','zip_code =' + el.val()},
success: function(result, success) {
$("#city").val(result.city);
$("#state_code").val(result.state);
}
});
}
});
});
Thanks in advance.
The issue is in your data object, you have invalid syntax. Change this:
'zip_code =' + el.val()
To this:
'zip_code': el.val()
The full object should look something like this:
data: {
'request_type': 'ajax',
'op': 'get_test_category_list',
'zip_code': el.val()
},
I think the problem is with data part of the ajax
Change it like this
data: {request_type:"ajax", op:"get_test_category_list",zip_code : el.val()},

Parsing json synchronously from url in javascript

I'm trying to get title of a youtube video. So i'm using jQuery to parse json. But it works asynchronously, so the answer comes after the page loaded. The result is:
http://www.youtube.com/watch?v=Ym0hZG-zNOk (undefined)
How can i fix it?
Thanks.
http://jsfiddle.net/3vQht/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var link = "http://www.youtube.com/watch?v=Ym0hZG-zNOk";
var videoID = link.substring(link.indexOf("=") + 1, link.length);
document.writeln("<a target='_blank' href='" + link + "'>" + link.bold() + "</a> (" + name(videoID) + ")<br>");
function name(value) {
var source = "http://gdata.youtube.com/feeds/api/videos/" + value + "?v=2&prettyprint=true&alt=jsonc&callback=?";
var fin;
$.getJSON(source, function(json) {
fin = json.data.title;
console.log(fin);
});
return fin;
}
</script>
</head>
<body>
</body>
</html>
Hy,
here is the solution :)
<script type="text/javascript">
function name(value) {
var source = "http://gdata.youtube.com/feeds/api/videos/" + value + "?v=2&prettyprint=true&alt=jsonc";
$.ajax({
type: 'GET',
url: source,
contentType: "application/json",
dataType: 'json',
success: function (json) {
alert("here is the title: "+json.data.title+" .Use it how you want!");
},
error: function (e) {
alert("error");
}
});
}
$(document).ready(function() {
var link = "http://www.youtube.com/watch?v=Ym0hZG-zNOk";
var videoID = link.substring(link.indexOf("=") + 1, link.length);
name(videoID);
});
</script>
If you want to get your data sync just use this version:
$.ajax({
type: 'GET',
url: source,
async: false,
contentType: "application/json",
dataType: 'json',
success: function (json) {
alert("here is the title: "+json.data.title+" .Use it how you want!");
},
error: function (e) {
alert("error");
}
});
}
getJSON is asynchronous, so when the return fin; is reached, the data hasn't been fetched yet.
Everything that depends on the JSON MUST be inside the success callback.
If you prefere, you can also fetch your data synchronously. Check the jQuery.ajax() documentation for the async parameter.
EDIT: Just figured that you're loading your data using JSONP and that it's not possible to do that synchronously. You need to use asynchronous callbacks instead.
I haven't played with their api, but a quick look at
https://developers.google.com/youtube/2.0/developers_guide_json
indicates that they support jsonp callbacks so that you can prepend a script that does sends the data to a callback function (just add &callback=yourFunction to the end of the url)
function prependScriptFromUrl(s){
var a=document.createElement("script");
var b=document.getElementsByTagName('head')[0];
a.src=s;
b.insertBefore(a,b.firstChild)
}

Categories

Resources