Develop Reference

Ajax json display data correctly

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>

i want to associate links to respective article on dynamically created p element

here is my codepen link
my html code
<div id="main">
<h1>Wikipedia Viewer</h1>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-4 col-lg-7 col-lg-offset-4">
<div class="form-group">
<label class="sr-only" for="search">search</label>
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></form>
</div>
</div>
</div>
Surprise me!
</div>
<div id="search">
</search>
jquery code for making wikipedia api search call and then displaying title and overview.i want to associate links to respective article on dynamically created p element
$(document).ready(function() {
$("button").click(function() {
var article = $("input").val();
$.ajax({ //wikipedia api call
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + article + "&format=json",
dataType: "jsonp",
success: function(data) {
for (var i = 0; i < data.query.search.length; i++) { //displaying titles and snippets accroding to search query. i want to associate link to each dynamically created p element.
var title = data.query.search[i].title;
var snippet = data.query.search[i].snippet;
$("#search").append("<p>" + title + "<br>" + snippet + "</p>");
}
$("#main").attr({
'style': 'display: none'
});
},
error: function() {
$("h1").html("oops");
}
});
});
});

Change your $("#search").append() as follows:
$("#search")
.append("<p><a href='https://en.wikipedia.org/wiki/" + title + "'>" + title + "</a>" +
"<br>" + snippet + "</p>"
);
Codepen

Git remote repo no showing in <ul>

I am trying to list my github repos through their api but its not showing up on my page but by using the exact same code its working here on JSFiddle
Debugging shows that the script is being called but its just not loading in its <div>:
<div id="repos">
<ul id="repo_list">
</ul>
</div>`
Here is the markup in my source code:
<section id="git-hub">
<div class="container">
<div class="box">
<div class="center">
<h2>GitHub</h2>
<p class="lead">Go on! Take a look through my repos!</p>
<div id="repos">
<ul id="repo_list">
</ul>
</div>
<div id="repo_content"></div>
<script>
$.ajax({
type: "GET",
url: "https://api.github.com/users/google/repos",
dataType: "json",
success: function(result) {
for( i in result ) {
$("#repo_list").append(
"<li><a href='" + result[i].html_url + "' target='_blank'>" +
result[i].name + "</a></li>"
);
console.log("i: " + i);
}
console.log(result);
$("#repo_count").append("Total Repos: " + result.length);
}
});
</script>
</div><!--/.center-->
</div>
</div>
</section><!--/#pricing-->
Does anybody know what could be the reason?

You're putting this script tag above where you're loading your jQuery. Place this script tag below where you're loading your jQuery.

How to display the div elements in row by row

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.

AJAX - doesn't return value

I am trying to show mysql results from images.php to index.php. After I click on one link of my categories(which are named by id) then I want to show values from images.php.
Every category has one <div> which is tagged by id
The script doesn't work well, it only shows Loading...
$("a.load").on('click',function() {
var id = $(this).attr('data-gallery');
$.ajax({
url: 'http://example.com/images.php?c=' + id,
beforeSend: function() {
$("#" + id).html("Loading...");
},
success: function(data) {
$("#" + id).html(data);
}
});
},function() {
var id = $(this).attr('data-gallery');
$("#" + id).html("");
});
Thanks
[EDIT]
Here is my HTML code in index.php
<section class="mainmywork" id="categories">
<div class="container">
<!--<h1 class="myworkheading"><p>CATEGORIES</p></h1>!-->
<?php
foreach($images as $categories) {
echo '<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 categories">
<a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><img class="center-block" src="'.showConfigValues("img_source").'/'.$categories["photos_name"].'" alt=""></a>
<a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><h2><p>'.$categories["name"].'</p></h2></a>
</div>
<div id="'.$categories["code"].'">
</div>';
}
?>
</div>
</section>
and here is the which is in images.php
<?php
if(isset($_GET["c"])) {
$gallery_code = htmlspecialchars($_GET["c"]);
require_once 'init.php';
$db = new DB;
$query = "SELECT *
FROM photos
INNER JOIN gallery
ON gallery.code = photos.gallery_code AND photos.title_photo != 'y'
WHERE photos.gallery_code = '".$gallery_code."' OR gallery.name = '".$gallery_code."'
ORDER BY photos.id";
$photos = $db->get_special($query);
?>
<div id="lk-gallery">
<div class="wrapper">
<main id="main" role="main" class="photo-lk">
<?php
if($photos[0] != '') {
foreach($photos as $image) {
$mask_description = $image["photos_description"];
echo '<img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" />';
}
}
else
{ echo '<p class="inprogress">Sorry, I am working on this one!<br>Check out my other photos</p>'; }
?>
</main>
</div>
</div>
<div class="lk-gallery-touch">
<div class="flexslider">
<div class="wrapper">
<main id="main" role="main" class="photo-lk">
<ul class="slides">
<?php
if($photos[0] != '') {
foreach($photos as $image) {
$mask_description = $image["photos_description"];
echo '<li><img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" /></li>';
}
}
else
{ echo '<p class="inprogress">Sorry, I am working on this one!<br>Check out my other photos</p>'; }
?>
</ul>
</main>
</div>
</div>
</div>
<?php
}
?>

Try this:
$("a.load").on('click',function() {
var id = $(this).data('gallery'); // use .data() method
var $id = '#'+id;
$.ajax({
url: 'http://example.com/images.php?c=' + id,
beforeSend: function() {
$id.html("Loading...");
},
success: function(data) {
$id.html(data);
},
error: function(){
$id.html("Error...");
}
});
});

According to the documentation, the second argument to the .on function when there is more than 2 arguments is a selector string, but you have passed what appears to be your desired event handler. The last argument should be the event handler, in your code sample that is:
function() {
var id = $(this).attr('data-gallery');
$("#" + id).html("");
If you remove that last function, leaving just 2 arguments to .on, your handler should be called as expected.