so I have this file called jsonkategoria.json with categories names and links. I want to display these in a table. Somehow (I'm begginer in jQuery programing) my table displays names only. I think the problem may be within the quotes in tag. This is how the table looks in browser. There's no link to the page. I've tried many options with adding each line separately (I mean :
categories_data += '<a href=';
categories_data += '"';
categories_data += value.links;
etc.)
Here's my jQuery code:
$(document).ready(function(){
$.getJSON("jsonkategoria.json", function(data){
var categories_data = '';
$.each(data, function(key, value){
categories_data += '<tr>';
categories_data += '<a href="'+value.link+'" >';
categories_data += '<td>'+value.nazwa+'</td>';
categories_data += '</a>';
categories_data += '</tr>';
});
$('#categories_tab').append(categories_data);
});
});
Here you go with a solution
$(document).ready(function(){
$.getJSON("jsonkategoria.json", function(data){
var categories_data = '';
$.each(data, function(key, value){
categories_data += '<tr>';
categories_data += '<td><a href="' + value.link + '" >' + value.nazwa + '</a></td>';
categories_data += '</tr>';
});
$('#categories_tab').append(categories_data);
});
});
You misplaced anchor tag, it should be inside td not outside td
$(document).ready(function(){
$.getJSON("jsonkategoria.json", function(response){
$.each(response, function (i, value) {
$('<tr>').append(
$('<td>').append('<td><a href="' + value.link + '" >' + value.link + '</a></td>'),
$('<td>').text(value.nazwa).appendTo('#categories_tab');
});
});
});
Related
I currently click a button to show some info, but the info only appears below the button of the first item. I want it to appear below each corresponding button in my index of items.
Appreciate any tips on debugging.
Please see JS code below:
$(function(){
homeButton();
profileButton();
readMoreButton();
});
function readMoreButton(){
$(document).on('click', 'button.read-more.btn-more', function(event){
event.preventDefault();
appendReadMore(this.attributes.href.value)
});
}
function appendReadMore(url){
$.get(url, function (result){
$("#ReadMoreSpan").html("Location:"+result[0].location);
});
}
function iterateJobs(jobs){
var str = "<ul>";
jobs.forEach(function(job){
var job_id = job.id;
var link_path = '/repairmen/' + job['repairman']['id'] + '/jobs/' + job['id'];
str += '<li>Repairman: ' + job['repairman']['name'] + '<br>';
str += 'Customer: ' + job['customer']['name'] + '<br>';
str += '<ul>';
str += iterateTickets(job['tickets']);
str += '</ul>';
str += '<button class="edit btn-info" href="' + link_path + '/edit">Edit Job</button> | ';
str += '<button ' + `id=${job_id} ` + 'class="delete btn-danger" href="' + link_path + '">Delete Job</button> | ';
str += '<button class="read-more btn-more" href="' + link_path + '">Read More</button> <br><br>';
str+='<span id="ReadMoreSpan" ></span>';
str += '</li>';
});
str += '</ul>';
return str;
}
That is because you'll end up with multiple spans with the same id (#ReadMoreSpan), so whenever you call your function it will put the result of the AJAX call into the first one. You need to do two things:
Give all read more spans a unique ID so they can be identified
Pass that id to the event handler for the link click.
Let's start with the ID and add that as a data-parameter on the span (and also remove the #ReadMoreSpan, as ID's should be unique:
str += '<span data-job="' + job_id + '"></span>';
Having done that, we need to be able to access this id when fetching more data, so add the same ID to the button:
str += '<button class="read-more btn-more" data-job="' + job_id + '" href="' + link_path + '">Read More</button> <br><br>';
Now the two functions can be updated to handle this value:
function readMoreButton() {
$(document).on('click', 'button.read-more.btn-more', function(event){
event.preventDefault();
appendReadMore(this.attributes.href.value, this.getAttribute('data-job'))
});
}
function appendReadMore(url, jobId) {
$.get(url, function (result){
$("span[data-job='" + jobId + "']").html("Location:"+result[0].location);
});
}
I have a data coming from the database. And Displaying when the ajax function is called. I am able to display it. But, One of the variable is an array data and saved it using implode function. Data is like (a,b,c,d).
Data is displaying in the below format
data1 Data2 Data3 (a,b,c,d) Data5 and so on.
I want to explode the array data and print one below the another.
I should display it like
data1 data2 data3 a data5
b
c
d
Here is the code which i am written to get the data.
<script type="text/javascript">
$('#genreport').on('click',function(){
var Representativeid = document.getElementById("Representativeid").value;
var dateFrom = document.getElementById("dateFrom").value;
var dateTo = document.getElementById("dateTo").value;
var url = '{{URL::to('/admin/GenReport')}}';
$.ajax({
type : 'get',
url : url,
data : {Representativeid:Representativeid,dateFrom:dateFrom,dateTo:dateTo},
success:function(data){
console.log(data);
var $tabledata = $('#tbody');
$tabledata.empty();
for (element in data)
{
var row = '<tr>' +
'<td>' + data[element].date + '</td>'+
'<td>' + data[element].doctor_name + '</td>'+
'<td>' #foreach(explode(',', data[element].products ) as $product)
{{$product}}
#endforeach '</td>' +
'<td>' + data[element].quantity + '</td>'+
'<td>' + data[element].locations +'</td>'+
'<td>' + data[element].area + '</td>'+
'</tr>';
$('#tbody').append(row);
}
},
error:function(data)
{
alert('fail');
alert(data);
}
});
});
</script>
I am failing in the for-each logic. Please help me to display as i expected.
You cannot use a php function/code(server-side) in your javascript/jQuery code(client-side), as the php code will be parsed before the page is loaded. Instead you need to use javascript code.
First, you need to split the value into an array
var productsArray = data[element].products.split(',');
then you would need to get the array count (.length) to use a rowspan, so it doesn't break your table stucture
var rowSpan = productsArray.length;
....
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
....
finally, you need to loop in javascript, not php, through the array. (note, because the i<0 <td>s go on subsequent rows, you need to add them after)
var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
if(i == 0) {
row += '<td>' + productsArray[i] + '</td>';
} else {
rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
}
}
so it would look something like this -
for (element in data)
{
// get products into an array
var productsArray = data[element].products.split(',');
// get products array count
var rowSpan = productsArray.length;
var row = '<tr>' +
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';
// loop through products array
var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
if(i == 0) {
row += '<td>' + productsArray[i] + '</td>';
} else {
rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
}
}
row +=
'<td rowspan="'+rowSpan+'">' + data[element].quantity + '</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].locations +'</td>'+
'<td rowspan="'+rowSpan+'">' + data[element].area + '</td>'+
'</tr>';
// append both row and the <td>s in rowAfter
$('#tbody').append(row+rowAfter);
}
just add <tr><td> inside foreach.
Edit:
Also, take a look at this link. table inside a td
I have two arrays which is the result.new_record and the result.leave_type i have a loop, $(result.new_record).each(function(index, data) i want to include the result.leave_type and put the data of the result.leave_type to the table tbl_tag but the data says undefined but the data of result.new_record was shown only the result.leave_type is undefined.
here's the result of 'console.log` and the table.
Result of html += '<td>'+ JSON.stringify(leavetype) +'</td>';
jQuery Code
success : function(result)
{
result = JSON.parse(result);
var html = "";
$(result.new_record).each(function(index, data)
{
console.log(result.leave_type);
html += tbl_tag(data,result.leave_type);
});
$(".tbl-tag").html(html);
remove_tag();
}
function tbl_tag(data,leavetype)
{
var html = '<tr>';
html += '<td>' + data.payroll_employee_title_name + ' ' + data.payroll_employee_first_name + ' ' + data.payroll_employee_middle_name + ' ' + data.payroll_employee_last_name + ' ' + data.payroll_employee_suffix_name + ' <input type="hidden" name="employee_tag[]" value="'+data.payroll_employee_id+'"></td>';
html += '<td>'+ leavetype.payroll_leave_hours_cap +'</td>';
html += '<td><i class="fa fa-times"></i></td>';
html += '</tr>';
return html;
}
Update the below line in your tbl_tag function from
html += '<td>'+ leavetype.payroll_leave_hours_cap +'</td>';
to
html += '<td>'+ leavetype[0].payroll_leave_hours_cap +'</td>';
As you are passing Array to function you will select the 1st element by using [0] and then the value by using the property name like leavetype[0].payroll_leave_hours_cap
I retrieve data from an API and I want to get it in my bootstrap layout.
$.ajax({
url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>'
}).done(function(data) {
console.log(data);
var html = "";
$.each(data.results, function(index, item) {
html += "<div class='row'>";
html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
html += "<span class='item-description'>" + item.description + "</span>";
html += "</div>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
});
I tried this, but it is not working? why?
Well, just add a container to your DOM where the markup should be added.
<div class="js-table-container"></div>
And then add the html to this container
var html = "";
$.each(data.results, function(index, item) {
html += "<div class='row'>";
html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
html += "<span class='item-description'>" + item.description + "</span>";
html += "</div>";
});
$('.js-table-container').html(html);
If i understand your problem correctly, that's all.
If you what this data to come after or before an element in Dom use jquery insertAfter or insertBefore. Why are you using timeout function?
You can directly add to Dom after processing.
> $.ajax({
> url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=<myKey>'
> }).done(function(data) {
> console.log(data);
>
> var html = "";
> $.each(data.results, function(index, item) {
> html += "<div class='row'>";
> html += "<div class='item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></div>";
> html += "<span class='item-description'>" + item.description + "</span>";
> html += "</div>";
> });
> // if you want to load all data inside this container use html
> $(".container").html(html);
> // if you want to load after this
> $(".container").insertAfter(html);
> // if you want before this
> $(".container").insertBefore(html);
I am working on my codepen rss feed for my website. I am having small issue limiting the results.
Currently displays over 10 results in the rss feed. But I would like to know the best way to limit results to 5
Question: How could I limit the results of my rss feed to 5 only.
Codepen Example
<script type="text/javascript">
$(document).ready(function(){
url = 'http://codepen.io/riwakawebsitedesigns/public/feed/';
$.ajax({
type: "GET",
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
error: function(){
alert('Unable to load feed, Incorrect path or invalid feed');
},
success: function(xml){
var postlist = xml.responseData.feed.entries;
var html = '<ul class="list-unstyled">';
$.each(postlist, function(idx, data) {
html += '<li>';
html += '<h3 class="codepen_feed_title">' + data.title + '</h3>';
html += '<a href="' + data.link + '" target="_blank">';
html += '<span class="codepen_feed_content">Click Here To View It!</div>';
html += '</a>';
html += '</li>';
});
html += '</ul>';
$(".codepen_feed").append(html);
}
});
});
</script>
Use a return value for your each loop
$.each(postlist, function(idx, data) {
var title = data.title;
html += '<li>';
html += '<h3 class="codepen_feed_title">' + data.title + '</h3>';
html += '<a href="' + data.link + '" target="_blank">';
html += '<span class="codepen_feed_content">Click Here To View It!</div>';
html += '</a>';
html += '</li>';
return idx < 4;
});