I'm trying to display the data from json in my HTML. It doesn't seem to get the data properly.
I'm running it on my localhost so I can see the json properly. here on my demo, the json is hosted on my personal FTP.
How can I display the data in my HTML?
$(function() {
ajaxJS();
function ajaxJS(e) {
if (e) {
e.preventDefault();
}
$.ajax({
url: "http://www.domenghini.com/sample-data.json",
method: "GET",
success: function(data) {
console.log(data);
var html_to_append = '';
$.each(data.items, function(i, items) {
html_to_append +=
'<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
name.first +
'<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
name.last +
'</p></div><img class="image img-fluid" src="' +
picture +
'" /><p class="company">' +
company +
'</p></div>';
});
$("#items-container").html(html_to_append);
},
error: function() {
console.log(data);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="items-container" class="row"></div>
</div>
I think the issue is you are trying to access name.first name.last in $.each without specifying items.name.first
$(function() {
ajaxJS();
function ajaxJS(e) {
if (e) {
e.preventDefault();
}
$.ajax({
url: "http://www.domenghini.com/sample-data.json",
method: "GET",
success: function(data) {
console.log(data);
var html_to_append = '';
$.each(data, function(i, item) {
html_to_append +=
'<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
item.name.first +
'<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
item.name.last +
'</p></div><img class="image img-fluid" src="' +
item.picture +
'" /><p class="company">' +
item.company +
'</p></div>';
});
$("#items-container").html(html_to_append);
},
error: function() {
console.log(data);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="items-container" class="row"></div>
</div>
Related
I need to make a dynamic running banner in one line, it works but it spans two lines. I can't figure out why it spans 2 lines. Please help.
$(document).ready(async function() {
GetBannerMessages();
});
async function GetBannerMessages() {
$.ajax({
url: '/Banner/Banner',
type: 'POST',
data: {
},
datatype: "html",
success: function(res) {
console.log(res);
var holder = $('#bannerHolder');
for (var i = 0; i < res.length; i++) {
var row = "<div class='text-container' > <a data-fancybox-group='gallery' class='fancybox' href='#' title='" + res[i].Msg_Text + "'>" + res[i].Msg_Text + "</a></div>" +
"<div class='text-container'> <a data-fancybox-group='gallery' class='fancybox' href='#'> </a></div>";
holder.append(row);
}
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="runtext-container col-12" style="margin-top: 5%;">
<div class="main-runtext">
<marquee direction="right" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
<div class="holder" id="bannerHolder"></div>
</marquee>
</div>
</div>
Requesting path for img src via below code:
$.ajax({
url: 'api/catalogs.php?action=fetchimg&CatalogId=' + d.CategoryId,
type: 'GET',
dataType: "json",
success: function(response) {
var path = response.path;
console.log(path);
$.each(response, function(key, value) {
$("#images").attr('src', value.path);
})
},
});
But code displaying only one photo, API returning many photos and need to display all.
For displaying I am using below code.
return '<div class="container">'+
'<div class="row justify-content-center text-center my-3"></div>'+
'<div class="row justify-content-center text-center">'+
'<div class="col-md-4 mb-3">'+
'<img id="images" src="" class="img-fluid img-thumbnail"></a>'+
'</div>'+
'</div>'+
'</div>';
Your code is only editing one image src. You should do something like this in your success in $.ajax
$.each(response, function(key, value){
$("body").append($("<img>", { src: value.path } ));
})
This will add an image to the body for each of the paths in your response. Then you can start modifying this to your requirements
Because you are using the same ID for all elements (#images). You need to make it dynamic like add counter with it like ('#images' + counter);
and the same thing needs to change in HTML.
Finally, see below
$.ajax({
url: 'api/catalogs.php?action=fetchimg&CatalogId='+d.CategoryId,
type: 'GET',
dataType: "json",
success: function(response) {
var images = "";
$.each(response, function(key, value){
images+='<div class="col-md-4 mb-3">'+
'<img src="'+value.path+'" class="catalog-image img-responsive thumbnail"></a>'+
'</div>';
})
$('#photos').html(images);
},
in HTML above code inserting into below div:
<div class="container">
<div id="photos" class="row justify-content-right text-right my-3"></div>
<div class="row justify-content-right text-right">
</div>
</div>
I'm trying to fade out and fade in a card element. My html looks like this:
<form class=" mt-4 mw-800 center-block animated fadeInUp">
<div class="row">
<div class="col-lg-12 content">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">{{ $random_idea->title }}</h3>
</div>
<div class="card-body">
{{ $random_idea->description }}
</div>
</div>
</div>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button id="idea" type="button" class="btn btn-raised btn-primary btn-block">
Geef mij een ander idee</button>
</form>
My jQuery code looks like this:
$( "#idea" ).click(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
});
$.ajax({
type: "POST",
url: "/idea",
success: function(response) {
$(".card").fadeOut();
$('<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description +
'</div>' +
'</div>').appendTo('.content').fadeIn();
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
The card div is fading out and fading in. But there is a delay, it's not shown good.
My lay-out looks like this:
When you click on the button the card fades out and another card fades in. But it's not smooth. Do you have any ideas to help me?
jQuery fadeIn() and fadeOut() are asynchronous. So, the new and old elements are fading in/out together. But, those methods gets a callback will call after the animation. So, you can rewrite your success function as follows:
$(".card").fadeOut(function() {
$(this).remove();
$('<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description + '</div>' +
'</div>').appendTo('.content').fadeIn();
});
Try using this
var html = '<div class="card card-primary">' +
'<div class="card-header">' +
'<h3 class="card-title">' + response.title + '</h3>' +
'</div>' +
'<div class="card-body">' + response.description +
'</div>' +
'</div>';
$(html).hide().appendTo(".content").fadeIn(300);
The reason its not going smooth is because you didnt give a speed within your fadeout/fadein function.
If you read the docs on https://www.w3schools.com/jquery/eff_fadeout.asp you notice the syntax accepts a speed $(selector).fadeOut(speed,easing,callback)
Wenn you fill in the speed of your fadein() and your fadeout() it should go smooth.
I'm using Blueimp File Upload, and I want to upload only a single file. When I click on choose file for the 2nd time after one file is uploaded, the 2nd file gets append below.And what I want is to replace the old file when the new file is selected for 2nd time. Code for this is as below:
Form
<form id="import_form">
<div class="row">
<div class="col-md-12">
<div class="row upload_text" id="category_import" style="background: #eee; padding: 10px 0;">
<div class="col-md-12">
<span style="color: #888;"><i class="fa fa-file"></i> Choose File</span>
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary btn-sm" id="import_link">Import</button>
Download Demo File
</div>
<input type="file" name="files" id="add_upload_file" style="visibility: hidden; height:0; padding: 0;" />
</div>
<div class="clear"></div>
</div>
<div class="row loader" style="display: none;">
<div class="col-md-12">
<p><i class="hi hi-refresh text-info fa-spin"></i> Please wait while file is being uploaded.</p>
</div>
<div class="cleafix"></div>
</div>
</div>
</div>
Javascript for Blueimp
<script>
$(document).ready(function(){
$("#attach_file").click(function(e) {
e.preventDefault();
$("#add_upload_file").click();
});
var i = 0, a_ele;
$('#add_upload_file').fileupload({
url: '{{route("uploadCategory")}}',
autoUpload: true,
maxNumberOfFiles: 1,
limitConcurrentUploads: 1,
acceptFileTypes: /(\.|\/)(xlsx?|csv)$/i,
submit: function(e, data) {
if (!$(".attachment").is(":visible"))
$(".attachment").css({display: 'block'});
var html = "<div class='col-md-12 attachment_box_wrapper'>" +
"<div class='attachment_box' id='attachment_" + i + "'>" +
"<div class='file_name'>" +
data.files[0].name +
"</div>" +
"<div class='file_progress'>" +
'<div class="progress progress-striped active">' +
'<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>' +
'</div>' +
'</div>' +
'<div class="cancel_upload" id="' + data.files[0].name + '"><i class="fa fa-times"></i></div>' +
"</div>" +
"</div>" +
"<div class='clearfix'></div>";
$(".upload_text").append(html);
data.context = $("#attachment_" + i);
i++;
$(".message_wrapper").css("height", "calc(100% - " + $(".upload_text").outerHeight() + "px)");
},
processfail: function(e, data) {
alert(data.files[data.index].name + "\n" + data.files[data.index].error);
},
progress: function(e, data) {
var percent = parseInt(data.loaded / data.total * 100, 10);
$(data.context).find(".progress .progress-bar").attr("aria-valuenow", percent).css("width", percent + "%").html(percent + "%");
},
done: function(e, data) {
$(data.context).find(".progress").remove();
},
fail: function(e, data) {
console.log(data);
}
});
});
</script>
I had the same problem. I fixed it without using options.
$('#add_upload_file').fileupload({
url: "",
add: function (e, data) {
if($(".attachment_box").length > 0) { //Just count file listing div
alert("Only single file can be uploaded")
return;
}
},
formData: {
},
progress: function (e, data) {
},
done: function (e, responseJSON) {
}
});
I have a html code which displays ads ,but the ads are display like a coloumn vise, but I want them to display in a horizontal row .How can we display the horizontal rows.And ads are which are coming dynamically based on the user selection.How can we display these ads in a row wise fashion .
Html code is :
<div class="row">
<div class="col-md-3" id="adsid"></div>
</div>
Code snippet from JS:
<input type="checkbox" id=' + s[i]['id']['0'] + ' />
<a href="#" class="list-group-item ">
<input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/>
<h4 class="list-group-item-heading">
<font color="blue">' + s[i]['hea']["0"] + '</font>
</h4>
<p class="list-group-item-text">' + s[i]['desc']["0"] + '</p>
<p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p>
<p class="list-group-item-text">
<font color="green">' + s[i]['url']["0"] + '</font>
</p>
</a><br/>
And JS is :
$("#groupid").change(function () {
$("#adsid").html("");
var grpvalue = $("#groupid").val();
var accid = $('#accountid').val();
var adsarray = [];
$.ajax({
type: "post",
dataType: 'json',
url: "pages/ads.php",
data: "adgroup=" + grpvalue + "&accid=" + accid,
success: function (s) {
for (var i = 0; i < s.length; i++) {
var head = s[i]['hea']["0"];
//alert(head);
var adid = s[i]['id']["0"];
var desc1 = s[i]['desc']["0"];
var desc2 = s[i]['desc2']["0"];
var url = s[i]['url']["0"];
var p = document.createElement('p');
var txt = document.createTextNode(head);
p.appendChild(txt);
//$('adsid').append(p);
adsarray.push(head, adid, desc1, desc2, url);
$("#adsid").append("");
$("#adsid").append('<input type="checkbox" id=' + s[i]['id']['0'] + ' /><input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/><h4 class="list-group-item-heading"><font color="blue">' + s[i]['hea']["0"] + '</font></h4><p class="list-group-item-text">' + s[i]['desc']["0"] + '</p><p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p><p class="list-group-item-text"><font color="green">' + s[i]['url']["0"] + '</font></p><br/>');
}
}
});
});
And Json Data is:
[{
"hea": {
"0": "Kidney Stone Removal"
},
"id": {
"0": "40602813172"
},
"desc": {
"0": "Get treated at top kidney center"
},
"desc2": {
"0": "Take a free advice from our experts"
},
"url": {
"0": "www.ainuindia.com"
}
}]
I think your questions i answered here:
http://www.w3schools.com/css/css_float.asp
Use float to place the "rows" next to each other.
Though i would recommend you to change your "row" class to something more appropriate if possible. Since row are explicitly saying that it's a row, in other words a vertical alignment.
You can use ul li tag as bellow give style to li as list-style:none
<div class="row">
<ul >
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
</ul>
</div>
If you can modify the html of ad, try replacing col-md-3 by col-sm12 so the whole thing would read:
<div class="row">
<div class="col-sm-12" id="adsid">
</div>
</div>
I'm assuming you're using bootstrap, so having col-md-3 makes it float left with width 33%. On medium screen.