Issue in display special characters fetched from AJAX call - javascript

Using AJAX, I fetch data, and I have to dynamically append that data as rows in html table.
There are some special characters which are not being displayed in table. Though, they are currently shown if printed using 'alert' or with html tag.
Here is my code:
var mytext = '';
var color = "black";
for (t in events) {
mytext += '<tr style="color:'+color+';">';
mytext += '<td style="color:blue;"> <a onclick=\'load_iframe(' + events[t].event_id + ',"' + events[t].signature +'");\'>';
mytext += $('<div/>').html(events[t].signature).html();
mytext += '</a> </td>';
mytext += '<td>' + events[t].start_time + '</td>';
mytext += '<td>' + events[t].end_time + '</td>';
mytext += '</tr>';
}
$('#events_table > tbody:last').append(mytext);
The value of events[t].signature being shown in table is "venci\u00f3_humano".
If I print it using html/alert it shows correctly. : venció_humano
Can anybody please tell me how to fix this?
Thanks alot!

I think you should put character encoding in head tag of the page.
<meta charset="UTF-8">
Thanks

The following code working fine.
var mytext = '';
var color = "black";
mytext += '<tr style="color:grey;">';
mytext += '<td style="color:blue;"> <a onclick=\'load_iframe(7 ,"venci\u00f3_humano");\'>';
mytext += $('<div/>').html('venci\u00f3_humano').text();
mytext += '</a> </td>';
mytext += '</tr>';
$('#events_table').append(mytext);
jsfiddle

Related

Right align text in a javascript

I am a beginner in javascript. I have researched the forum for answers to my question. there were a couple that I think I could have used except with my code I am, not sure where or how to put it. Can someone help me? I need to show the eight rows right aligned. Thank you !!!
results.each(function(index) {
var result = "";
var theseClmStats = record.tables.PlanClmStats[index].tables.ClmStats;
var thisPlanClmStats = record.tables.PlanClmStats[index];
//query("#test").append(thisPlanClmStats.fields["PlanName"]+ " (" + index + ') has ' + thisPlanClmStats.tables.length +' table(s)<br/>');
if(thisPlanClmStats.fields.PlanId != null) {
theseClaimSource = thisPlanClmStats.tables.ClmStats.ClaimSource;
result += '<tr data-repeat="" data-breakable="ClaimSource' + index +'">';
result += '</tr>';
var ClmStatslen = theseClmStats.length;
for (var i=0; i < ClmStatslen; i++) {
var thisClmStats = theseClmStats[i];
result += '<tr data-repeat="" data-breakable="ClmStats' + i +'">';
result += '<td><br/></td>';
result += '<td class="data PlanID" textAlign:right>'+ thisClmStats.fields["ClaimSource"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["UniqueParticipants4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["ClaimVolume4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["ClaimAverage4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["PercentageofTOTALVolume4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["Paid4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["Pending4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["Denied4"] + '</td>';
result += '</tr>';
}
}
this.after(result);
});
You seem to be mixing a bunch of concepts together. To make the text right-align in a table cell (<td>), you could just apply CSS to one of the classes you are using, such as:
<style type="text/css">
td.PlanID {text-align:right}
</style>
Then, when you append the HTML, the CSS will automatically be applied.
If you can't adjust the CSS file (or HTML file), then try adding to your JS:
document.getElementsByClassName("PlanID").style.textAlign= "right";
You would then add this line at the end of your Javascript. But it probably is better (and cleaner) to use the CSS method.

How to call a function from outside the window

How can I call a function that is declared on my parent window?
I have a new window that opened through calling window.open, and the content of the new window is a grid, each item in grid has link/anchor. I want in my onclick event of each item is to call a function that declared on my parent html. How can I acheive this?
Below is my sample code.
function showCustomWindow(filter){
var title = '';
source = behindDueDates;
title = 'Client Actions Behind Due Dates';
var htmlContent = '<div id="content"><h2> '+ title +'</h2><table class="table" id="behindActions">';
htmlContent +='<thead class="thead-inverse">';
htmlContent += '<tr class="tableHeader">';
htmlContent += '<td> Subject </td>';
htmlContent += '<td> Regarding </td>';
htmlContent += '</tr>';
htmlContent += '</thead>';
htmlContent += '<tbody>';
$.each(source, function(key, value){
var regarding = value.attributes.regardingobjectid;
htmlContent += '<tr>';
htmlContent += '<td data-id="'+value.Id+'">' + value.getValue("subject") + '</td>';
htmlContent += '<td>' + regarding + '</td>';
htmlContent += '</tr>';
})
htmlContent += '</tbody>';
htmlContent += '</table></div>';
var win = window.open("", title, "location=1,status=1,scrollbars=1,width=1000,height=800");
win.moveTo(10, 10);
win.document.write('<html><head><title> ' + title + ' </title></head><body>');
win.document.write(htmlContent);
win.document.write('</body></html>');
}
function redirectToRecord(value){
alert("Event to call from second window")
}
Any help is much appreciated.
Call parent window function with windiw.opener helper:
if (window.opener != null && !window.opener.closed) {
window.opener.function_in_parent(); //Parent window function
}
parent should refer to the opening window.
parent.method() will call a method. It has to be on the same domain though, no cross domain calls will work.
You can access to the child window in this way:
var w = window.open("/uri", "title");
w.childFunction();
and parent:
<a onclick="parent.anyname();" href="#" > Click me </a>
Or try this approach: Possible to call a Javascript method in the context of another window?

Howto return formated HTML-code with a javascript function

This question is bothering me for quite some time.
Is there a better way to do this, because this is very difficult to code and to maintain?
function format_details ( d ) {
var r = '';
var vaste_afspraak = (d.werkbon.werkbonafspraaktype_id == 1)? 'JA': 'NEE';
r += '<div class="well no-padding"><table id="dt_details" class="table table-bordered table-condensed" class="display" width="100%">';
r += '<tbody>';
r += '<tr>';
r += '<th colspan="2" class="text-center">#' + d.werkbon.id + ' - Details werkbon ' + d.werkbon.nummer + '</th>';
r += '</tr>';
r += '<tr>';
r += '<th style="width:20%;">Locatie naam</th>';
r += '<td>' + d.werkbon.locatie_naam + '</td>';
r += '</tr>';
r += '<tr>';
r += '<th>Adres</th>';
r += '<td>' + d.werkbon.locatie_adres + '</td>';
r += '</tr>';
r += '<tr>';
r += '<th>PC Plaats</th>';
r += '<td>' + d.werkbon.locatie_postcode + ' ' + d.werkbon.locatie_woonplaats + '</td>';
r += '</tr>';
r += '</tbody>';
r += '</table></div>';
return r;
}
People suggest using <script src="..."> and <link rel="stylesheet" href="..." /> for a reason: separation of HTML, JavaScript and CSS.
I would suggest not dumping large amounts of HTML into your JavaScript file for much the same reason.
Instead, consider having the HTML defined in your HTML. One technique might be:
<script type="text/html" id="template-details">
<div><table><whatever>
<th>Adres</th>
<td>{{locatie_adres}}</td>
</whatever></table></div>
</script>
Then in your JavaScript, you can do this:
var r = document.getElementById('template-details').innerHTML;
r = r.replace(/\{\{([a-z0-9_]+)\}\}/g,function(_,key) {
return d.werkbon[key];
});
return r;
This way you have a template saved in your HTML, which will be much easier to manage, and the JavaScript will just take that and put in the data before outputting it.
Personally though, I think a more sensible option would be to send an AJAX request to the server to get the data, and the server can send that data in all its HTML glory.
Although there really isn't any need to format code out from JS to HTML (whitespace is ignored in the browser), you can do this by printing out tabs (\t) as necessary.
EDIT I assumed at first that you wanted to format the outputted HTML, but if you wanted to format the JS function as well, look at the following:
For example:
function format_details ( d ) {
var vaste_afspraak = (d.werkbon.werkbonafspraaktype_id == 1)? 'JA': 'NEE';
return '<div class="well no-padding"><table id="dt_details" class="table table-bordered table-condensed" class="display" width="100%">' +
'\t<tbody>' +
'\t\t<tr>' +
'\t\t\t<th colspan="2" class="text-center">#' + d.werkbon.id + ' - Details werkbon ' + d.werkbon.nummer + '</th>' +
'\t\t</tr>' +
'\t\t<tr>' +
'\t\t\t<th style="width:20%;">Locatie naam</th>' +
'\t\t\t<td>' + d.werkbon.locatie_naam + '</td>' +
'\t\t</tr>' +
'\t\t<tr>' +
'\t\t\t<th>Adres</th>' +
'\t\t\t<td>' + d.werkbon.locatie_adres + '</td>' +
'\t\t</tr>' +
'\t\t<tr>' +
'\t\t\t<th>PC Plaats</th>' +
'\t\t\t<td>' + d.werkbon.locatie_postcode + ' ' + d.werkbon.locatie_woonplaats + '</td>' +
'\t\t</tr>' +
'\t</tbody>' +
'</table></div>';
}
You don't need the r += on each line; just add it all together in one statement. Also,you don't need the r at all; just return the value instead of creating an extra variable.
A solution could be store in a html file your template than make an ajax call to retrieve the html and use jquery to change the dynamic content through id or class attribute. The code could be something like this
$.ajax({
async:false,
url: "fileURL",
contentType: "text/plain",
type: "GET" ,
dataType:"text",
success: function(result) {
$(result).find(".text-center").text("enter the text with your variable");
return $(result).html();
},
error: function(error){
alert (error);
}
});
Please double check the syntax. I didn't tried it

Table population with Javascript not working

I am trying to populate a table in HTML with data from a JSON array using JavaScript. My code is given below:
<head>
<title>Employee page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<div id="tableData"></div>
<script type="text/javascript">
var json_arr = {{ data_arr|safe }};
var tableData = '<table>';
tableData += '<th>' + "Serial no." + '</th>';
tableData += '<th>' + "Name" + '</th>';
tableData += '<th>' + "Age" + '</th>';
for (var i=0;i<json_arr.length;i++){
alert("Hello world!!");
var obj = json_arr[i];
alert(obj.id);
tableData += '<tr>';
tableData += '<td>' + odj.id + '</td>';
tableData += '<td>' + odj.name + '</td>';
tableData += '<td>' + obj.age + '</td>';
tableData += '</tr>';
}
tableData += '</table>';
document.getElementById("demo").innerHTML = tableData;
$('#tableData').html(tableData);
</script>
</body>
The JSON data is coming to the JS properly. The problem in the loop is in the line "tableData += '' + odj.id + '';" (maybe thereafter as well). I don't know how to fix it. No table is appearing in the HTML. Can someone please suggest how to fix this or at least an alternate way to do this? Thanks in advance!!!

Convert a JS Array ìnto HTML Table | Weird <tbody> Tag?

When I use this code, all the information is displayed in only one column. Also, if I check with Google Chrome, there are many <tbody> tags that were added to table.innerHTML .
http://puu.sh/4oLmM.png
How can I make it so it displays the header and each content[i] horizontally?
<table id="table1" border=\"5\" cellpadding=\"10\">
<script>
var table = document.getElementById('table1');
table.innerHTML = '';
var header = ['Method','Gp/Exp','Exp/H']
var content = [
['Kill',1,100],
['Die',42,1222],
['Yo',1,1245]
]
//Header
table.innerHTML += '<tr>';
for(var i in header){
table.innerHTML += '<th>' + header[i] + '</th>';
}
table.innerHTML += '</tr>';
//Content
for(var i in content){
table.innerHTML += '<tr>';
for(var j in content[i]){
table.innerHTML += '<td>' + content[i][j] + '</td>';
}
table.innerHTML += '</tr>';
}
</script>
I suspect this is what Ian meant:
var html = '<tr>';
for(var i in header){
html += '<th>' + header[i] + '</th>';
}
html += '</tr>';
for(var i in content){
html += '<tr>';
for(var j in content[i]){
html += '<td>' + content[i][j] + '</td>';
}
html += '</tr>';
}
table.innerHTML = html;
The way you've done it, you're adding badly formed HTML to the element. The overall string is fine, but my guess is that every time you do table.innerHTML +=, it realises that you're creating a dodgy HTML string, and messes around with it to get something that is valid HTML.

Categories