How to display JSON using ajax - javascript

I want to display the value based on selected value on drop down list with using Get method of Ajax from the url,
based on schema i have to add the value of selected item to the meddle of url and then i can get the relative data from the server:
this is my code:
$.ajax({
type: 'GET',
url: 'url',
success: function(data) {
for (var i = 0; i < data.length; i++) {
$("#tbl2").append("<option>"+data[i]+"</option>");
}
}
});
var one = 'http://gate.atlascon.cz:9999/rest/a/';
var middle = $('#tbl2 :selected').text(); // it should be the selected item from last get method
var end = '/namespace';
var url_t = one + middle + end ;
$.ajax({
type: 'GET',
url: url_t,
success: function(data2) {
$("#text-area").append(data2);
}
but it is not work!
i am new in programming, could you please help me.
thanks.

try this:
$.ajax({
type: 'GET',
url: 'url',
success: function(data) {
for (var i = 0; i < data.length; i++) {
$("#tbl").append("<tr><td>"+data[i]+"</td></tr>");
}
}
});

Add this in your ajax success():
data.forEach(function(item) {
$("#tbl").find('tbody')
.append($('<tr>')
.append($('<td>').text(item))
);
})

Related

Why does the first item of my unordered list doesn't contain a link?

I am doing the Wikipedia Viewer challenge of freecodecamp and when I am itterating through the pages that are found the first item of the list does not contain a link to the Wikiepdia page. Why is that?
JS Code:
function getData(){
var search = $("#searchBar").val();
var url = baseUrl + '/w/api.php?action=query&format=json&origin=*&list=prefixsearch&psoffset=max&pssearch='+search;
$.ajax( {
url: url,
dataType: 'json',
type: 'GET',
success: function(data) {
var html="";
var entries = data.query.prefixsearch;
console.log(url);
html+="<ul class='items'>";
for(var i=0;i<entries.length;i++){
html+="<li><h3>"+entries[i].title+"</h3><a href='http://en.wikipedia.org/?curid="+entries[i].pageid+"'</a></li>";
}
html+="</ul>";
$(".entries").html(html);
}
});
}
Html Code:
<div class="entries">
</div>
As James pointed out in comments, your code outputs <a> without a closing > and with no text.
Change:
html+="<li><h3>"+entries[i].title+"</h3><a href='http://en.wikipedia.org/?curid="+entries[i].pageid+"'</a></li>";
into this:
html+="<li><a href='http://en.wikipedia.org/?curid="+entries[i].pageid+"'><h3>"+entries[i].title+"</h3></a></li>";
Full Code
function getData() {
var search = $("#searchBar").val();
var url = baseUrl + '/w/api.php?action=query&format=json&origin=*&list=prefixsearch&psoffset=max&pssearch=' + search;
$.ajax({
url: url,
dataType: 'json',
type: 'GET',
success: function(data) {
var html = "";
var entries = data.query.prefixsearch;
console.log(url);
html += "<ul class='items'>";
for (var i = 0; i < entries.length; i++) {
html+="<li><a href='http://en.wikipedia.org/?curid="+entries[i].pageid+"'><h3>"+entries[i].title+"</h3></a></li>";
}
html += "</ul>";
$(".entries").html(html);
}
});
}

How to stop execution in jquery for 1 sec

I want to submit form using ajax and hide button and show message.
I used "async:false" into ajax that's why button is not hiding. If I use "async:true" then it working.
$(document).ready(function (e) {
$("#submit_form").on('submit',(function(e) {
$('#btn1').css('display','none');
$("#show1").css('display','block');
e.preventDefault(e);
var chkArray = [];
var chkArray1 = [];
$('#loading').show();
var inps = document.getElementsByName('chk_url[]');
//sleep(1000);
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
if($(inp).is(':checked')){
var site_url=$('#site_urls').val(inp.value);
$.ajax({
url: $('#site_urls').val(),
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
async:false,
success: function(data)
{
if(data=='done'){
chkArray.push($('#site_urls').val());
}else{
chkArray1.push($('#site_urls').val());
}
}
});
}
}
}));
});
Is there another way to execute hide code before ajax execution??
I have used "delay(1000)" and "sleep(1000)".
I cannot use "setTimeout" function.
Don't use the ajax call in for loop, use outside the loop,
I have change your code, let i know it is helpful..
$(document).ready(function (e) {
$("#submit_form").on('submit',(function(e) {
$('#btn1').css('display','none');
$("#show1").css('display','block');
e.preventDefault(e);
var chkArray = [];
var chkArray1 = [];
$('#loading').show();
var inps = document.getElementsByName('chk_url[]');
//sleep(1000);
var fd = new FormData();
for (var i = 0; i <inps.length; i++) {
var inp=inps[i];
if($(inp).is(':checked')){
fd.append( 'site_urls', inp.value );
}
}
/*send call to server start here*/
$.ajax({
url: $('#site_urls').val(),
type: "POST",
data: fd,
contentType: false,
cache: false,
processData:false,
async:false,
success: function(data)
{
if(data=='done'){
chkArray.push($('#site_urls').val());
}else{
chkArray1.push($('#site_urls').val());
}
}
});
/*send call to server ens here*/
}));
});

Dropdown list with AJAX request and response back in JSON format not working

I want all state name of id 1 from static PHP array using ajax request and convert response in json.why it is not running, or it is a wrong way to do so??
country is coming from database and got set.
$(document).ready(function()
{
$("#country_drop").change(function()
{
var cuid = $(this).val();
alert(cuid);
$.ajax(
{
url: 'get_state.php',
type: 'post',
data: {id2:cuid},
dataType: 'json',
success:function(data)
{
var len = data.length;
$("#state_drop").empty();
$('#state_drop').html('<option value="">Select state first</option>');
for( var i = 0; i<len; i++)
{
// var id = data[i]['id'];
//var name = data[i]['name'];
// $("#state_drop").append('<option value="'+id+'">'+name+'</option>');
$('#state_drop').append('<option value="'+data[i].id+'">'+ data[i].name+'</option>');
}
}
});
});
});

Jquery Mobile - onclick not working

The function occurs before anything is clicked...
such as
When i click the name ^ fdsa, for exampmle, i need the id to pop up, but it automatically happens when the page is loaded for some reason
HTML
<ul data-role="listview" id="ccontent" data-inset="true">
</ul>
JS
function getClubs() {
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: '',
success: function (data) {
$('#ccontent').empty();
var json = jQuery.parseJSON(data);
for (var i = 0; i < json.length; i++)
$('#ccontent').append('<li>' + json[i].name + '</li>');
$('#ccontent').listview('refresh');
},
});
}
function getData(id) {
$('#clubcontent').append ('<li>'+id+'</li>');
$('#clubcontent').listview('refresh');
};
I think this is what you're looking for:
$(document).on('click', '#ccontent li a', function () {
getData($(this).data('club-id'));
});
function getClubs() {
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: '',
success: function (data) {
$('#ccontent').empty();
var json = jQuery.parseJSON(data);
for (var i = 0; i < json.length; i++)
$('#ccontent').append('<li>' + json[i].name + '</li>');
$('#ccontent').listview('refresh');
}
});
}
.on() is used instead of an inline onclick event. club-id is used to store the id which is used in the getData() function.

How Can I Do to my textbox autocomplete, works

I'm trying to do an autocomplete to my textbox, but it doesn't work. Follow my code.
$(function () {
var credenciada = '<%= credenciadaId %>';
xml_NomeCompleto = "";
var Nomes = "";
var retorno = '';
var count = 0;
var t = '';
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
t = $(this).find("NOMECOMPLETOUSUARIO").text();
Nomes += ["\"" + t + "\","];
});
}
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
});
The variable 't' receives all the names of my users, normally, but the autocomplete don't work.
Wait for ajax response to complete and then initialize the autocomplete because before you initialize the plugin data is not available. Also the way you are creating Nomes(source) is wrong. Declare it as an array and use push method to populate it.
Try this
var Nomes = [];
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
Nomes.push($(this).find("NOMECOMPLETOUSUARIO").text());
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
}
});

Categories

Resources