I am trying to create dynamic. I fetch data with an ajax request and want to display it sorted. It will also receive the category name. My current result is that it is sorting but it is making a new optgroup instead of adding it to the old one
(https://i.imgur.com/P3oGXKl.gifv)
$.each(response, function(index, value) {
if (value['categories_name'] != current_sub) {
console.log(current_sub);
if (current_sub) {
tr += '</optgroup>'
}
tr += "<optgroup label='" + value['categories_name'] + "'>";
current_sub = value['categories_name'];
}
tr += '<option value="' + value['product_id'] + '">' + value['product_name'] + '</option>';
});
tr += '</optgroup>';
Related
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 a table where I want to show the last column only if the column before is hovered. The table data is parsed with JSON.
<script type="text/javascript">
$( document ).ready(function() {
var tag_id = $('#tag_id_hidden').val();
$.getJSON("/tags/get_who_tagged/" + '{{tag.tag_id}}' + "/", function(data) {
var lines = '';
for (var i = 0; i < data.length; i++) {
lines += '<tr id="' + data[i]['entity_id'] + '">';
lines += '<td id="button_id"><button id="prefix_' + data[i]["entity_id"] + '" class="js-programmatic-set-val" value="' + data[i]["entity_id"] + '" name="' + data[i]["title"] + '"><i class="fa fa-plus"></i></button></td>';
lines += '<td>' + data[i]['title'] + '</td>';
lines += '<td id="hover_' + data[i]["entity_id"] + '">' + data[i]['count'] + '</td>';
lines += '<td id="hidden_' + data[i]["entity_id"] + '" style="display:none;">'
for (var j = 0; j < data[i]['usernames'].length; j++) {
lines += data[i]['usernames'][j]['username'] + ', '
}
lines += '</td>';
lines += '</tr>';
//$("#count_user_table").empty();
$('#count_user_table tbody').html(lines);
}
});
});
</script>
<script>
$(document).on("mouseenter", "#hover_9242411", function() {$("#hidden_9242411").show();
});
$(document).on("mouseleave", "#hover_9242411", function() {$("#hidden_9242411").hide();
});
</script>
in the example above the code is working but I have to reference the id as "#hover_9242411" and "#hidden_9242411". the part after hover_/hidden_ is dynamically added to each column with a for loop. How can I dynamically reference the second part (9242411)?
Consider modifying your hover cell to something like this:
'<td id="hover_' + data[i]["entity_id"] + '" class="hover-cell" data-target="#hidden_' + data[i]["entity_id"] + '">'
You could then simply use:
$(document).on("mouseover", ".hover-cell", function() {
var target = $(this).data('target');
$(target).show();
});
Fiddle
If it will always be the previous column showing/hiding the next column, you could write your event handlers like this
$('#mytable').on('mouseenter', 'td.hover-column', function(){
$(this).next().show();
}).on('mouseleave', 'td.hover-column', function(){
$(this).next().hide();
});
For that example to work you would need to add a class to the hover column (the one that you want to hover over in order to show the next column). I also gave an id to the table and assigned the event handler to it so the event doesnt have to bubble all the way to the top.
Here is a fiddle
If later on you find that you arent showing/hiding the NEXT column but some other one, you could also put a specific class on that hidden column and instead of using
$(this).next().show();
you could use something like
$(this).closest('tr').find('td.hidden-column').show();
I'm trying to get content from a json file, but until now I get nothing.
I have the status connection == 200 and I can see the content in the chrome console
but I get nothing when I try to display the data to html table, but when I use the same jquery code with api from another service like import.io things works fine.
Can you tell me what am I doing wrong?
This api is from kimonolabs.
$(document).ready(function () {
var tabel = '<table><THEAD><caption>Calendário</caption></THEAD>';
tabel += '<th>' + 'Hora' + '</th>' + '<th>' + 'Equipas' + '</th><th>' + 'jornda' +
'</th><th>' + 'Data' + '</th>';
$.ajax({
type: 'GET',
url: 'https://api.myjson.com/bins/1dm6b',
dataType: 'json',
success: function (data) {
console.log(data);
$('#update').empty();
$(data.m_Marcadores).each(function (index, value) {
tabel += '<tr><td>' + this.posicao + '</td>' + '<td>' + this.golos + '</td></tr>';
}); //each
tabel += '</table>';
$("#update").html(tabel);
} //data
}); //ajax
}); //ready
According to JSON structure you should iterate over data.results.m_Marcadores array:
$(data.results.m_Marcadores).each(function (index, value) {
tabel += '<tr><td>' + this.posicao + '</td><td>' + this.golos + '</td></tr>';
});
Another problem. In header of the table you setup 4 colums, but in loop you are creating only two of them. Number of header columns should be the same as other row td.
Also you need to wrap th elements in tr. For example, fixed table header:
var tabel = '<table>' +
'<THEAD><caption>Calendário</caption></THEAD>' +
'<tr>' +
'<th>Hora</th><th>Equipas</th><th>jornda</th><th>Data</th>' +
'</tr>';
Demo: http://jsfiddle.net/onz02e43/
I'm having problems with dynamically adding a row to a table using data stored in two arrays (categories and treatments). The arrays are fine, I've determined that.
When passing just the categories array the new row displays but the select box reads [object:object], it's clearly blank.
When I pass a second array with it, as shown below, the console reads 'undefined is not a function'.
Any help would be hugely appreciated!
// Add an extra row when button is clicked
var counter = 1;
$('input.add').click(categories, treatments, function(){
counter++;
var newRow = '<tr><td><label for="category' + counter + '">Category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';
$.each(categories, function(key, value) {
$('#category' + counter)
newRow += '<option value ="' + key + '">' + value + '</option>';
});
newRow += '</select></td><td><label for="treatment' + counter + '">Treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';
$.each(treatments, function(key, value) {
$('#treatment' + counter)
newRow += '<option value ="' + key + '">' + value + '</option>';
});
newRow += '</select></td></tr>';
$('table.treatments').append(newRow);
});
});
The first parameter for the jQuery .click() is an Object, and you're trying to pass two arrays.
This should work for you (remember to check for the missing semi-colons):
// Create an Object obj containing the two arrays.
$('input.add').click(obj = { categories: categories, treatments: treatments }, function () {
counter++;
var newRow = '<tr><td><label for="category' + counter + '">Category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';
// Use the obj.
$.each(obj.categories, function (key, value) {
$('#category' + counter);
newRow += '<option value ="' + key + '">' + value + '</option>';
});
newRow += '</select></td><td><label for="treatment' + counter + '">Treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';
// Use the obj.
$.each(obj.treatments, function (key, value) {
$('#treatment' + counter);
newRow += '<option value ="' + key + '">' + value + '</option>';
});
newRow += '</select></td></tr>';
$('table.treatments').append(newRow);
});
Demo
jQuery .click()
I am trying to make a select with the option value and text coming from two separate arrays (one is called like_list and the other like_list_name). The '$.each' joins two arrays and makes list of options. When I look in console.log I can see the options looking good:
$.each(like_list, function(i, item) {
console.log('<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>');
});
But when I name the output as 'optionlist' and try to put 'optionlist' into the div 'friendselect' with Inner HTML it doesn't work:
var optionlist = $.each(like_list, function(i, item) {
'<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>';
});
document.getElementById('friendselect').innerHTML = '[select]' + optionlist + '[/select]';
Is there anyway to get this select box into the 'friendselect' div? NOTE: i USED '[' because the side arrow wasn't working.
You should try with map function:
var optionlist = $.map(like_list, function(i, item) {
return '<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>';
}).join('');
document.getElementById('friendselect').innerHTML = '<select>' + optionlist + '</select>';
$.each() doesn't return the values in it's function, you will have to add them toghether yourself.
The best thing you can do is add the options to the select in the each loop like so:
$.each(like_list, function(i, item) {
$("#friendselect").append('<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>');
});