the masonry not working in my ajax response.i have tried some like this but it is not working for me.
my code ajax code is:
<script>
function loadmore(cnt)
{
var val = document.getElementById("result_no").value;
$.ajax({
type: 'get',
url: '{{ URL::route('oi_array3') }}',
data: {
last:val,cnt
},
success: function (response) {
var content = document.getElementById("uf");
if (response == '') {
$("#load").hide();
}
` response.forEach(function(value){
var d = new Date(value.timestamp);
var n = d.toDateString();
var s = d.toLocaleTimeString();
content.innerHTML += '<div class="grid-item oi_data_tile">' +
'<div class="small-12 text-right timestamp columns">' + n + ' ' + s + '</div>' +
'<label class="small-6 columns">Underlying Index</label>' +
'<label class="small-6 text-right nifty_index columns">' +
'<strong>' + value.underlying_index + '</strong>' +
'</label>' +
'<label class="small-6 columns">Diff. in change in OI</label>' +
'<label class="small-6 text-right nifty_index columns">' +
'<strong>' + value.diff_in_change_in_oi + '</strong></label>' +
'<div class="small-12 columns">'+
'<table class="small-12 columns">'+
'<tr class="header">' +
'<td class="small-3">Chng in OI Call</td>' +
'<td class="small-3">Strike<br>price</td>' +
'<td class="small-3">Chng in OI Put</td>' +
'<td class="small-3">Diff in Chng in OI</td>' +
'</tr>'+
'<tr>' +
'<td class="text-right">' + value.derivatives[0].change_in_oi_call + '</td>' +
'<td class="text-right">' + value.derivatives[0].strike_price + '</td>' +
'<td class="text-right">' + value.derivatives[0].change_in_oi_put + '</td>' +
'<td class="text-right bullish">' + value.derivatives[0].diff_in_change_in_oi + '</td>' +
'</tr>' +
'<tr>' +
'<td class="text-right">' + value.derivatives[1].change_in_oi_call + '</td>' +
'<td class="text-right">' + value.derivatives[1].strike_price + '</td>' +
'<td class="text-right">' + value.derivatives[1].change_in_oi_put + '</td>' +
'<td class="text-right bullish">' + value.derivatives[1].diff_in_change_in_oi + '</td>' +
'</tr>' +
'<tr>' +
'<td class="text-right">' + value.derivatives[2].change_in_oi_call + '</td>' +
'<td class="text-right">' + value.derivatives[2].strike_price + '</td>' +
'<td class="text-right">' + value.derivatives[2].change_in_oi_put + '</td>' +
'<td class="text-right bearish">' + value.derivatives[2].diff_in_change_in_oi + '</td>' +
'</tr>' +
'</table>' +
'</div>'+
'</div>'
if(document.getElementById("result_no").value == '0')
document.getElementById("latestvalue").value = value.timestamp;
document.getElementById("result_no").value = value.timestamp;
});
}//response close
});//ajax close
}//loadmore close
$('.grid').masonry({
columnWidth : 320,
gutter: 15,
percentPosition: false,
fitWidth: true,
isFitWidth: true,
itemSelector: '.grid-item'
});
$('.grid').imagesLoaded(function() {
$('.grid').masonry('layout');
});
</script>
and Html code is:
<div class="small-12 columns" id="uf1">
<div class="grid" id="uf">
<!-- ajax response is added here.-->
</div>
<input type="hidden" id="result_no" value="0">
</div>
I want to put ajax response in id, and apply masonry on response.
You need to reinitialize the masonry after the content is added to the DOM. That is the way by which masonry will be able to target the newly added element.
$('.grid').masonry();
Call this after the new content is loaded everytime.
Related
I am getting table data from ajax response as json.Some json datas am not displaying but I want it on a button click for other purpose.How can I get it?Please help me.
function leaveTable() {
for (var i = 0; i < leaveList.length; i++) {
var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn dltLev fa fa-times" onclick="cancelLeave(this)" data-dismiss="modal" value="Cancelled"></i></td><tr>';
$('#levListTable').append(tab)
}
}
from ajax response I want leaveTypeId and pass it into sendCancelReq() function.
Complete code :https://jsfiddle.net/tytzuckz/18/
It is complicated to know exactly what you want. I hope that helps you:
The first, I would change, is not to produce the JavaScript events in your html code var tab = .... I think, it is more clear and readable, when you add your event after the creation of the new dom elements. For example:
var tab = $('<tr id="' + i + '">' +
'<td>' + (i + 1) + '</td>' +
'<td class="appliedOn">' + leaveList[i].appliedOn + '</td>' +
'<td class="levType" >' + leaveList[i].levType + '</td>' +
'<td class="leaveOn" >' + leaveList[i].leaveOn + '</td>' +
'<td class="duration">' + leaveList[i].duration + '</td>' +
'<td class="status">' + leaveList[i].status + '</td>' +
'<td class="approvedOn">' + leaveList[i].approvedOn + '</td>' +
'<td class="approvedBy">' + leaveList[i].approvedBy + '</td>' +
'<td><i class="btn dltLev fa fa-times" data-dismiss="modal" value="Cancelled"></i></td>' +
'<tr>');
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
Then, you are able to send your necessary information more clearly, e.g.:
Instead of the last code
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
you can write
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this, leaveList[i].leaveTypeId); });
and extend your method cancelLeave to:
function cancelLeave(elem, leaveTypeId) {
var id = $(elem).closest('tr').attr('id')
alert(id)
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
sendCancelReq(leaveTypeId);
}
Got solutionPlease check this:https://jsfiddle.net/tytzuckz/19/
function cancelLeave(elem) {
var levTypeId = $(elem).attr('id')
var id = $(elem).closest('tr').attr('id')
$('.currentLevTypeId').val(levTypeId);
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
}
function sendCancelReq() {
var a= $('.currentLevTypeId').val();
alert(a)
}
I have a predefined table head like this:
<div class="container">
<div class="livsmedelsmall">
<h1>Sökning av livsmedel</h1>
<form class="form">
<div class="form-group">
<label for="livsmedelsSokOrd">Livsmedel</label>
<input type="search" class="form-control" id="livsmedelsSokOrd" placeholder="t ex makaroner">
</div>
<button type="button" class="btn btn-default" id="sok-button">Sök</button>
</form>
<table id="tabell" class="table">
<thead>
<tr>
<th>Livsmedel</th>
<th>Energi (kcal/100g)</th>
<th>Kolhydrater</th>
<th>Protein</th>
<th>Fett</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<br>
And I want to add content to it from an array using this code:
// Work with the response
success: function(response) {
console.log(response); // server response
var livsmedelArray = response.livsmedel;
var table = $("#tabell");
console.log(livsmedelArray);
// Itererar genom samtliga rader i resultatet
$.each(livsmedelArray, function(i, livsmedelArray) {
// Skapar en tabellrad för varje apotek och hämtar ut respektive
// attribut för det aktuella apoteket och lägger in cellerna i tabellraden
$('<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'
+
'</tr>').appendTo(table);
$("#tabell").show;
});
}
However it does not work and I have no idea of why it doesn't!
Hope your ajax is successful & response is correct. If it is so then you may need to target tbody for appending the tr
You can try this snippet
var trElement = '';
$.each(livsmedelArray, function(i, livsmedelArray) {
// Skapar en tabellrad för varje apotek och hämtar ut respektive
// attribut för det aktuella apoteket och lägger in cellerna i tabellraden
trElement += $('<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'+
'</tr>').
});
$('#tabell tbody').append(trElement)
Here the trElement variable is outside the each function. You can declare it inside the success function or as a separate variable.
Also dom manipulation is costly so, you can create a the complete object of tr(s) & append it at once.
Hope this will be useful
Try it...
// Work with the response
success: function(response) {
console.log(response); // server response
var livsmedelArray = response.livsmedel;
var table = $("#tabell");
console.log(livsmedelArray);
// Itererar genom samtliga rader i resultatet
$.each(livsmedelArray, function(i, livsmedelArray) {
// Skapar en tabellrad för varje apotek och hämtar ut respektive
// attribut för det aktuella apoteket och lägger in cellerna i tabellraden
$('<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'
+
'</tr>').appendTo("#tabell");
$("#tabell").show;
});
}
You should be appending to body..
try this
var table = $("#tabell tbody");
***************EDIT***************
I am not sure about the rest of your code so why don't you try this..
var block = "";
$.each(livsmedelArray, function(i, livsmedelArray) {
block+='<tr><td>' + livsmedelArray.namn + '</td>' +
'<td>' + livsmedelArray.energi + '</td>' +
'<td>' + livsmedelArray.kolhydrater + '</td>' +
'<td>' + livsmedelArray.protein + '</td>' +
'<td>' + livsmedelArray.fett + '</td>'+
'</tr>';
});
table.html(block);
In the script, we need to just replace only .appendTo(table); with .appendTo('table');
Either we can replace the above script with below mentioned script:
success: function (response) {
console.log(response);
var livsmedelArray = response.livsmedel;
var table = $("#tabell");
console.log(livsmedelArray);
$.each(livsmedelArray, function (i, livsmedelArray) {
$('<tr><td>' + livsmedelArray.namn + '</td>'
+ '<td>' + livsmedelArray.energi + '</td>'
+ '<td>' + livsmedelArray.kolhydrater + '</td>'
+ '<td>' + livsmedelArray.protein + '</td>'
+ '<td>' + livsmedelArray.fett + '</td>'
+ '</tr>').appendTo('table');
$("#tabell").show;
});
}
Here I am creating dynamic table
function addToMLContainer(id, mlName, mlAddress) {
return '<td><s:text>' + mlName + ' ' + mlAddress + '</s:text></td>' +
'<td hidden="hidden">' + id + '<input name="mlId" type="hidden" value = "' + id + '" /></td>' +
'<td hidden="hidden"><input name="mlFullName" type="hidden" value = "' + mlName + ' ' + mlAddress + '" /></td>' +
'<td align="center"><img src="/delete.png" class="remove" onclick="this.closest(\'tr\').remove()"/></td>'
}
And here I am getting value of tr:
var t = document.getElementById("AddedMlsContainer");
for (var i = 1, row; row = t.rows[i]; i++) {
selectedMerchants = selectedMerchants + " " + row.cells[2].children[0].value + "\n";
}
The problem is I can't get value with double or single quotes like <I'm "blabla">
Finally I did it by removing input field and unnesessary td:
'<td>' + mlName + ' ' + mlAddress + '</td>' +
'<td hidden="hidden">' + id + '<input name="mlId" type="hidden" value = "' + id + '" /></td>' +
'<td align="center"><img src="/delete.png" class="remove" onclick="this.closest(\'tr\').remove()"/></td>'
Then I used innerHtml
var t = document.getElementById("AddedMlsContainer");
for (var i = 1, row; row = t.rows[i]; i++) {
selectedMerchants = selectedMerchants + " " + row.cells[0].innerHTML.replace(/ /g,'') + "\n";
}
I have this piece of code where content is generated dynamically and it's executed each time a SELECT change it's value:
var htmlFabricanteBody = '',
htmlSelFabricanteBody;
htmlFabricanteBody += '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
htmlFabricanteBody += '</tr>';
htmlSelFabricanteBody = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlSelFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlSelFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlSelFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlSelFabricanteBody += '</tr>';
$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");
The only difference between htmlFabricanteBody and htmlSelFabricanteBody is this line:
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
In order to avoid DRY, it's possible to remove the line above from htmlFabricanteBody before append to #selFabricanteBody? In other words #fabricanteBody should have the content of htmlFabricanteBody intact as it's, #selFabricanteBody should have the same content of htmlFabricanteBody minus the line I'm talking about, any advice? Workaround?
can combine into a simple function that determines whether to add link or not. Seems a lot easier to read also since your variable names are very similar.
The other benefit is you can move the function out of the logic flow in your script and put it anywhere
function getRowHtml(data, showLink) {
var row = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
row += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
row += '<td>' + data.ent.nombre + '</td>';
row += '<td>' + data.ent.direccion + '</td>';
row += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
row += '<td>' + data.ent.telefono + '</td>';
/* only variation */
if (showLink) {
row += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
}
row += '</tr>';
return row;
}
$(getRowHtml(data,true)).appendTo("#fabricanteBody");
$(getRowHtml(data,false)).appendTo("#selFabricanteBody");
The simplest way, while maintaining your code structure, is this:
var htmlFabricanteBase = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBase += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBase += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBase += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.telefono + '</td>';
var htmlFabricanteBody = htmlSelFabricanteBody = htmlFabricanteBase;
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
htmlFabricanteBody += '</tr>';
htmlSelFabricanteBody += '</tr>';
$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");
However, a more elegant and powerful solution would be to leverage a templating language, like handlebars. If you anticipate the complexity of this increasing, then a template language will become increasingly more useful.
I want the each request type must be displayed in different color based on CSS class name.
code:
mcmShowTaskMessageBox: function(task, menu) {
var message = '<table class="eventTipBig">';
var requestType = task.get('RequestType');
var alert = task.get('Alerts');
if(requestType === 'OA VIP') {
menu.tdCls = 'OAVIP';
} else if(requestType === 'JL VIP') {
menu.tdCls = 'JLVIP';
} else if(requestType === 'BA VIP') {
menu.tdCls = 'BAVIP';
} else if(requestType === 'IB VIP') {
menu.tdCls = 'IBVIP';
} else if(requestType === 'QF VIP') {
menu.tdCls = 'QFVIP';
}
message +=
'<tr>' +
'<td class="icon-task">Name</td>' +
'<td class="value">' + task.get('Name') + '</td>' +
'</tr>' +
'<tr>' +
'<td class="icon-task">Ranking</td>' +
'<td class="value" style="color:red;">' + PriorityGreet + '</td>' +
'</tr>' +
'<tr>' +
'<td class="icon-task">Request Type</td>' +
'<td class="value">' + requestType + '</td>' +
'</tr>' +
'<tr>' +
'<td class="icon-task">Agent</td>' +
'<td class="value">' + task.get('AgentName') + '</td>' +
'</tr>' +
'<tr>' +
'<td class="icon-task">Service Type</td>' +
'<td class="value">' + task.get('TaskType') + '</td>' +
'</tr>' +
'<tr>' +
'<td class="icon-task">Task Status</td>' +
'<td class="value">' + task.get('TaskStatus') + '</td>' +
'</tr>' +
'<tr>' +
'<td class="icon-task">Task Category</td>' +
'<td class="value">' + task.get('TaskCategory') + '</td>' +
'</tr>'+
'<tr>' +
'<td class="icon-task">Notes</td>' +
'<td class="value">' + task.get('Notes') + '</tr>' +
'</tr>' +
'</table>';
App.mcmShowMessageBox({
id: 'TaskGrid' + task.get('Id'),
title: 'Task Information',
message: message,
editOption: { task: task, menu: menu }
});
//modification ended
}