Develop Reference

How to Print XML content using JavaScript or JQuery

I am trying to print XML content in a table using jQuery. This comes blank in table.
data[i].xml_details contains the XML content. I am getting blank display while try printing in table. where as console.log('XML Details' + data[i].xml_details); prints XML content without any issues.
success: function(data) {
// remove all Row items in table, before adding new rows
$('table.others_list tbody tr').remove();
for (var i in data) {
var xml = $.parseXML(data[i].xml_details);
var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
data[i].request_type +
'</div> </td> <td style="display:none;">' +
data[i].rels_others_id +
'</td>' +
'<td class="col-sm-2">' +
data[i].xml_details +
'</td>' +
' <td class="col-sm-2">' + data[i].request_details + '</td>' +
' <td class="col-sm-1">' +
'<a href="#" class="delete-esb" onclick="deleteOthersRow(this);">' +
'<i class="fa fa-trash-o" "> </i> </a>' +
'</td></tr>');
jQuery('table.others_list').append(newRow);
console.log('XML Details' + data[i].xml_details);
}

Extract text content from the parsed XML data. Then construct text string and insert it to the table.
for (var i in data) {
var xml = $.parseXML(data[i].xml_details);
var xmlContent = [];
// Search for the title and content of xml tags
$(xml).find('*').each(function(){
if ($(this).children().length == 0) {
xmlContent.push($(this).prop("tagName") + ': ' + $(this).text());
}
});
var textString = xmlContent.join(', ');
var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
data[i].request_type +
'</div> </td> <td style="display:none;">' +
data[i].rels_others_id +
'</td>' +
'<td class="col-sm-2">' +
textString +
'</td>' +
' <td class="col-sm-2">' + data[i].request_details + '</td>' +
' <td class="col-sm-1">' +
'<a href="#" class="delete-esb" onclick="deleteOthersRow(this);">' +
'<i class="fa fa-trash-o" "> </i> </a>' +
'</td></tr>');
jQuery('table.others_list').append(newRow);
console.log('XML Details' + data[i].xml_details);
}
2nd variant. To print XML string as is, replace special HTML characters in data[i].xml_details with their &-named equivalents:
function escapeHtml(text) {
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """);
}
...
for (var i in data) {
var xml = $.parseXML(data[i].xml_details);
var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
data[i].request_type +
'</div> </td> <td style="display:none;">' +
data[i].rels_others_id +
'</td>' +
'<td class="col-sm-2">' +
escapeHtml(data[i].xml_details) +
'</td>' +
' <td class="col-sm-2">' + data[i].request_details + '</td>' +
' <td class="col-sm-1">' +
'<a href="#" class="delete-esb" onclick="deleteOthersRow(this);">' +
'<i class="fa fa-trash-o" "> </i> </a>' +
'</td></tr>');
jQuery('table.others_list').append(newRow);
console.log('XML Details' + data[i].xml_details);
}

Make dropdown item selected true dynamically

I am making dropdown item selected true dynamically using below lines of code
for(var i in data) {
var book_id = data[i]['book_id'];
var indivudvalbookdetails = data[i]['indivudvalbookdetails'];
var id=1;
for(var j in indivudvalbookdetails) {
if(indivudvalbookdetails[j]['status'] == undefined || indivudvalbookdetails[j]['status'] == "")
{
$('.library_info_tbl tbody').append('<tr>' +
'<td class="text-center centeralign"> ' + data[i]['subject'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['title'] + ' </td>' +
'<td class="text-center centeralign"> ' + data[i]['isbn'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['author'] + ' </td>' +
'<td class="text-center centeralign"> ' + indivudvalbookdetails[j]['acquisitionno'] + '</td>' +
'<td class="text-center centeralign"><div class="btn-group">' +
'<input type="text" class="hide" id="acquisitionno' + id + '" value="' + indivudvalbookdetails[j]['acquisitionno'] + '" class="form-control">' +
'<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>'+
'<option value="Damaged"' +
indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="true"': 'selected="false">Damaged</option>'+
'<option value="Lost"' +
indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="true"' : ' selected="false">Lost</option>' +
'</select>'+
//'<input type="text" id="status' + id + '" class="form-control">' +
'</div></td>' +
'</tr>');
id++;
}
}
It is displaying the code in html like:
"selected="false">Lost selected="false">Lost
selected="false">Lost selected="false">Lost selected="false">Lost"

The string termination is not right and the if condition as well.
Check the code below:
var id = 'select';
var indivudvalbookdetails = [{
status: 'Damaged'
}]
var j = 0;
var select = '<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>' +
'<option value="Damaged"' +
(indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="selected"' : '') + '>Damaged</option>' +
'<option value="Lost"' +
(indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="selected"' : '') + '>Lost</option>' +
'</select>'
document.getElementById('main').innerHTML = select;
<div id="main"></div>

Select html content from an element

I would like to select the content of this element
<div class="entry-content">
comment.body +
</div>
I want to get that comment.body in the function I call below, more precisely in
var body = parent.find('entry-content');
How can I select the content of a certain div? I tried val() and contents() and none of them worked.
Any suggestion?
$("body").on("click", ".show-textarea", function(){
var answerid = $(this).data('answer');
var type = $(this).data('type');
var questionid = $(this).data('question');
var $commentForm = $(this).parent().find('.comment-form').first();
console.log(answerid);
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid,
questionid : questionid,
type : type
}, function (data) {
$commentForm.find('article').remove();
console.log("AID " + answerid);
console.log("Data" + data.length);
$.each(data, function(i, comment) {
console.log("Comment:" + comment);
$commentForm.append('<article class="tweet-data">' +
'<div class="comment-items">' +
'<div class="qa-c-list-item hentry comment" id="c3574">' +
'<div class="asker-avatar">' +
'<a>' +
'<img width="40" height="40" src="' +
comment.user_photo +
'"></a>' +
'</div>' +
'<div class="qa-c-wrap">' +
'<div class="post-button">' +
'<button name="" onclick="" class="btn icon-flag" title="Flag this comment as spam or inappropriate" type="submit">flag</button>' +
'<button name="" class="btn icon-answers" title="Reply to this comment" type="submit">reply</button>' +
'</div>' +
'<span class="qa-c-item-meta">' +
'commented' +
' 1 day' +
' ago' +
' by ' +
'<a style="display: inline" href="" class="qa-user-link url nickname">' +
comment.username +
'</a> ' +
'<span class="qa-c-item-who-points"> ' +
'<span class="qa-c-item-who-points-pad">(</span><span class="qa-c-item-who-points-data">140</span><span class="qa-c-item-who-points-pad"> points)</span> ' +
'</span> ' +
'</span> ' +
'</span> ' +
'<div class="qa-c-item-content" style="color: #2d2727; font-size: 13px"> ' +
'<a name="3574"></a>' +
'<div class="entry-content">' +
comment.body +
'</div> ' +
'</div> ' +
'<div class="comment-edit-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<button class = "edit-comment btn {if !$isMine}hidden{/if}" type="button">Edit</button>' +
'</form>' +
'</div> ' +
'</div> <!-- END qa-c-item --> ' +
'</div>' +
'</div></article>');
});
});
$commentForm.show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
commentsFetched = false;
$('.comment-form').hide();
});
$("body").on("click", ".edit-comment", function(){
console.log("Hello");
var parent = $("body").find('article').last();
var body = parent.find('entry-content');
console.log(body);
var parent_parent = $("body").find('article').parent().last();
parent.remove();
console.log(parent);
var button = $(this),
commentField = $('<div class="comment-form">' +
'<form method="post" action="/controller/actions/comments/edit_comment.php">' +
'<textarea name="comment" rows="4" cols="40" class="qa-form-tall-text">' +
body +
'</textarea>' +
'<input type="hidden" name="answerid" value="" />' +
'<input type="hidden" name="questionid" value="" />' +
'<button type="submit" class="textarea-ok">Edit Comment</button>' +
'</form>' +
'</div>'); // create a textarea element
commentField
// set the textarea's value to be the saved content, or a default if there is no saved content
.val(button.data('textContent') || 'This is my comment field\'s text')
// set up a keypress handler on the textarea
.keypress(function(e) {
if (e.which === 13) { // if it's the enter button
e.preventDefault(); // ignore the line break
button.data('textContent', this.value); // save the content to the button
$(this).remove(); // remove the textarea
}
}).appendTo(parent_parent); // add the textarea to the document
});

Since the binding is on '.edit-comment' which is a child of the '.tweet-data' encapsulating each individual entry (from the looks of your logic) I would suggest doing
$(this).closest('.tweet-data').find('.entry-content').text();
Your current logic is going to the last article for the 'parent' element. So if you tried to click the edit comment option on a tweet data other than the last one, your logic will most likely not work. Doing the lookup contextually by which element was clicked will fix this potential issue.

Target Dynamic ID and hide the div

I have a dynamic html elements that renders in a for loop the dynamic parent element has a dynamic id, how can I hide the dynamic elements or the container and its content if the id which is dynamic has a value lets say "Product".
Thank you in advance.
This is the dynamic elements that i rendered using for loop
for (var i = 0; i < a_data.products.length; i++) {
produst_list += '<a href="#" class="plLinkToFull" data-sn="' + a_data.products[i].serial + '" id="' + a_data.products[i].productName + '">';
produst_list += '<div class="plProductContainer">';
produst_list += ' <div class="plProductBTN">';
//produst_list += ' <div class="plProductThumb pull-left ' + (a_data.products[i].pid === 'TE80'?'apMaximumPanelTi8':'apMaximumPanel') + '"></div>';
produst_list += ' <div class="plProductThumb pull-left ' + getPanelClsss(a_data.products[i].pid) + '"></div>';
produst_list += ' <div class="plProductLeft">';
produst_list += ' <h6 style="margin-bottom: -5px;">' + a_data.products[i].productName + '</h6>';
produst_list += ' <div class="plLowerStatusSN"><span>' + a_data.products[i].serial + '</span></div>';
produst_list += ' </div><div class="plLowerStatus">';
produst_list += ' <div class="' + ((a_data.products[i].remainingDays > 0) ? "plIconGreen" : "plIconRed") + '">';
produst_list += ' <span class="glyphicon glyphicon-time" style=""> </span></div>';
produst_list += ' <span class="' + ((a_data.products[i].remainingDays > 0) ? "plExpiryOK" : "plExpiredDate") + '">Expire: <strong>' + a_data.products[i].expirationDate + '</strong></span>';
produst_list += ' </div></div></div></a>';
}

With filter :
$('a.plLinkToFull').filter(function(){
return this.id.contains("product");
}).hide();

You can make like this:
$('.plLinkToFull').prev('id') = i;
or
$('.plLinkToFull').attr("id", i);
The i have to send to new Method, for saving the loop.

try this:
var id = 'Product';
$('a[id*="'+id+'"]').hide();
if you want to hide it by clicking use event delegation
var el = 'a[id*="'+id+'"]';
$('body').on('click',el,function(){
$(this).hide();
});

why to use '$' in javascript variables?

I've seen others do these things to create a dynamic table element or other HTML on a page:
var $myRow = $('#myRowContainer' + IDRow);
var $column = $('<div />', { 'class': 'col', 'css': { 'width': '30%' } }).appendTo($myRow);
$('<div />', { css: { 'text-align': 'left' } }).append($('<span />', { 'html': objDetails[0].message })).appendTo($column);`
I often create html stuff in javascript like:
jQuery.each(mytable, function (i, obj) {
var newrow = ' <tr> ';
newrow += ' <td> ';
newrow += ' <span> ' + obj.ID + '</span>';
newrow += ' </td> ';
newrow += ' <td> ';
newrow += ' <span> ' + obj.PartNumber + ' </span>';
newrow += '</td>';
newrow += ' <td> ';
var name1 = 'txEI_';
var consecutive = obj.IDc;
var idLabelText = name1 + consecutive;
newrow += ' <input id="' + idLabelText + '" class="' + myCssClassToDetect + '" type="text" value="0" /> ';
newrow += ' </td> ';
newrow += ' </tr> ';
$("#tbDesglose").append(newrow);
//make spinner for new field
makeSpinner(idLabelText);
});
What's the difference? Why choose one over another?

When I see var prefixed with $ in javascript, it just usually means the variable is storing some element that is already wrapped in jQuery.
It's just a coding convention some people do.