provisional header are shown - javascript

I am using the below code first time the code is working when i give print next time print is not working and then when i give refresh the browser is loading long time .
this is php code
<p><img src="images/logo_print.png" width="635" height="143" alt="" /></p>
<h3>Test title</h3>
<h4><strong>Authors : Author name</p>
<h4><strong>Author Address : </strong></h4><p>Author Address</p>
<h4><strong>Abstract : </strong></h4><p style="text-align:justify;"> abstract</p>
<h4><strong>Keywords : </strong></h4><p>Keyword</p>
<div class="cls" style="border-top:1px solid #656565; margin:10px 0px;"></div>
javascript code is
enter code here
function PrintParts(arrElementNames){
var objWindow=window.open("about:blank", "print", "left=0, top=0, width=800, height=430, toolbar=no, scrollbars=yes");
var strHtml="<html><link href='css/style.css' rel='stylesheet' type='text/css' />";
strHtml += "<head>";
strHtml += "</head>";
strHtml += "<body><table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#FFFFFF>";
strHtml += "<tr><td height=10> </td></tr></table>";
strHtml += "<table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#ffffff><tr><td>"
for (var i=0; i<arrElementNames.length; i++){
var element=document.getElementById(arrElementNames[i]);
strHtml += element.innerHTML;
}
strHtml +="</td></tr> ";
strHtml +="</table>";
strHtml += "</body>";
strHtml += "</html>";
objWindow.document.write(strHtml);
objWindow.document.close();
objWindow.print();
objWindow.close();
}
the error is shown as:
CAUTION : Provisional headers are shown.
how can i solve this problem in this coding. i am really wast of my time but i can't solve this.

Related

Display image format base64

I've some problem with this issue., I want to display image.. but it not..
logoSrc in format base64
Issue code
footerLogos(logoSrc) {
var logos = "";
logos += '<tr>';
logos += '<td style="width: 1120px;">';
logos += '<div style="display: flex;align-items: center;font-weight: bold;font-family: arial;font-size: 15px;">';
logos += '</div>';
logos += '</td>';
logos += '<td align="center" width="30" id="footerLogo1">';
logos += '<img src="{{logoSrc}}" height="30"/>';
logos += '</td>';
logos += '</tr>';
return logos;
}
Since your just have base64 data, you need to tell the html that it should be read as a URL. You also need to pass in the variable itself, wrapped in ${} instead of {{}} and `backticks` instead of 'single quotes' because that's how JavaScript does template strings.
footerLogos(logoSrc) {
var logos = "";
logos += '<tr>';
logos += '<td style="width: 1120px;">';
logos += '<div style="display: flex;align-items: center;font-weight: bold;font-family: arial;font-size: 15px;">';
logos += '</div>';
logos += '</td>';
logos += '<td align="center" width="30" id="footerLogo1">';
logos += `<img src="data:image/png;base64,${logoSrc}" height="30"/>`;
logos += '</td>';
logos += '</tr>';
return logos;
}
I will suggest you to revisit the logoSrc and its usage.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
>

How to display correct format of math formular in ckeditor

I'm facing about the problem how to display correct format of match formula in ckeditor, I have tried to search a lot of ways but it seem can not..
This is my sources:
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>
<script type="text/javascript">
$(function(){
init();
});
</script>
<script language="javascript">
function init()
{
var strArea = "";
strArea += "<table border='0' cellpadding='0' cellspacing='0' align='left' valign='top' width='100%' id='contents2'>";
strArea += "<tr><td>";
strArea += "<table border='0' cellpadding='0' cellspacing='0' align='left' valign='top' width='100%'>";
strArea += "<tr><td height='20'></td></tr><tr><td>";
strArea += "<table border='3' cellpadding='0' cellspacing='0' align='left' valign='top'>";
strArea += "<tr>";
strArea += "<td width='20' valign='top' style='line-height:2.1'><div id='quizno'>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</div></td>";
strArea += "<td width='5'></td>";
strArea += "<td style='line-height:2.1'><H1><div id='quiz'>aaaa</div></H1></td>";
strArea += "</tr>";
strArea += "</table></td></tr>";
strArea += "<tr><td height='7'>bbb</td></tr><tr><td>";
strArea += "<table border='1' cellpadding='0' cellspacing='0' align='left' valign='top'>";
strArea += "</table></td></tr></table></td></tr>";
strArea += "</table></td></tr></table>";
document.all.quizdiv.innerHTML = strArea;
// CKEDITOR.instances.ir4.getData()
// CKEDITOR.instances.quizdiv.getData(document.getElementById('quizdiv').innerHTML) = strArea;
}
</script>
</head>
<body>
<div style="overflow: auto; height: 700; width: 100%" id="centerdiv">
<div id="quizdiv" style="width: 100%;"></div>
</div>
</body>
</html>
I try to display with default text of math formula is: (x = {-b \pm \sqrt{b^2-4ac} \over 2a}) but is not correct display
How to display correct format of math formula? thanks..
I've found different problems...
CKEditor has to be applied to a textarea...
<textarea id="quizdiv" style="width: 100%;"></textarea>
You have to use the standard-all version of CKEditor instead of the standard, because the standard doesn't include the extra pluggins...
<script src="https://cdn.ckeditor.com/4.7.3/standard-all/ckeditor.js"></script>
You have to configure the CKEDITOR.config.extraPlugins and CKEDITOR.config.mathJaxLib...
CKEDITOR.config.extraPlugins = 'mathjax';
CKEDITOR.config.mathJaxLib = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML';
You have to put the formulas inside of a <span class='math-tex'>...
<span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>
You're creating the formula inside of a string, so you have to escape the '\' characters to make them appear in the string so the plugin can read them...
strArea += "<td width='50%' valign='top' style='line-height:2.1'><span class='math-tex'>\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)</span></td>";
Here you have a working file...
https://fiddle.jshell.net/rigobauer/3qgeL5ae/
I hope it helps

Javascript programming, function not defined error

Here is my code. Sorry for improper indentation.
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>게시판</title>
<script type="text/javascript" src="../js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../js/addScript.js"></script>
<script type="text/javascript" src="../js/jquery.popupWindow.js"></script>
<script type="text/javascript" src="../js/infobee.common.js"></script>
<script type="text/javascript">
var html = '<table width="100%" cellpadding="0" cellspacing="0" border="0">';
html += '<tr height="5"><td width="5"></td></tr>';
html += '<tr style="background:url('+'img/table_mid.gif'+') repeat-x; text-align:center;">';
html += '<td width="5"><img src="img/table_left.gif" width="5" height="30" /></td>';
html += '<td width="73">번호</td>';
html += '<td width="379">제목</td>';
html += '<td width="73">작성자</td>';
html += '<td width="164">작성일</td>';
html += '<td width="58">조회수</td>';
html += '<td width="7"><img src="img/table_right.gif" width="5" height="30" /></td>';
html += '</tr>';
var domainText = getDomain();
function getDomain() {
return "localhost:8080";
}
function getForumRow() {
var userId = "neogeoss";
var passwd = "1311";
//Map<String, Object> myMap = new HashMap<String, Object>();
// var row = document.getElementById("1stRow");
var params = "userId="+userId+"&userPassword="+passwd;
$.ajax({
type: "GET",
url: "http://"+domainText+"/secure_server/test/test.do",
callback: "callback",
dataType: "jsonp",
data:params,
success: function(data) {
var htmlInner = html;
$.each(data, function(k, v){
htmlInner += "<tr height='25' align='center'>"
htmlInner += "<td> </td>";
htmlInner += "<td>"+v["num"]+"</td>";
htmlInner += "<td align='left'>"+v["title"]+"</td>";
htmlInner += "<td align='center'>"+v["writer"]+"cccc</td>";
htmlInner += "<td align='center'>"+v["date"]+"</td>";
htmlInner += "<td align='center'>"+v["like"]+"</td>";
htmlInner += "<td align='center'>"+v["open"]+"</td>";
htmlInner += "<td> </td>";
htmlInner += "</tr>";
htmlInner += "<tr height="1" bgcolor="#D2D2D2"><td colspan="6"></td></tr>";
htmlInner += "<tr height="1" bgcolor="#82B5DF"><td colspan="6" width="752"></td></tr>";
});
htmlInner += '</table>'
$("#list").html(htmlInner);
$("#test").attr("disabled", true);
/* if(myMap.get("번호")){
row.insertCell(myMap.get("번호")).style.width = "73";
} else if (myMap.get("글쓴이")) {
row.insertCell(myMap.get("글쓴이")).style.width = "73";
} else if (myMap.get("제목")) {
row.insertCell(myMap.get("제목")).style.width = "379";
} else if (myMap.get("등록일")) {
row.insertCell(myMap.get("등록일")).style.width = "164";
} else if (myMap.get("추천")) {
row.insertCell(myMap.get("추천")).style.width = "58";
} else if (myMap.get("조회")) {
row.insertCell(myMap.get("조회")).style.width = "58";
}*/
}
});
}
function init(){
var htmlInner = html;
htmlInner += '<tr align="center" bgcolor="#FFFFFF" height="30">'
htmlInner += '<td colspan="6">등록된 글이 없습니다.</td>'
htmlInner += '</tr>'
htmlInner += '<tr height="1" bgcolor="#D2D2D2"><td colspan="6"></td></tr>'
htmlInner += '<tr height="1" bgcolor="#82B5DF"><td colspan="6" width="752"></td></tr>'
htmlInner += '</table>'
$("#list").html(htmlInner);
$("#test").attr("disabled", false);
}
</script>
</head>
<body onload="javascript:getForumRow()">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr height="5"><td width="5"></td></tr>
<tr style="background:url('img/table_mid.gif') repeat-x; text-align:center;">
<td width="5"><img src="img/table_left.gif" width="5" height="30" /></td>
<td width="73">번호</td>
<td width="73">글쓴이</td>
<td width="379">제목</td>
<td width="164">등록일</td>
<td width="58">추천</td>
<td width="58">조회</td>
<td width="7"><img src="img/table_right.gif" width="5" height="30" /></td>
</tr>
<tr height="25" align="center">
</tr>
<tr height="1" bgcolor="#D2D2D2"><td colspan="6"></td></tr>
<tr id="1stRow">
</tr>
<tr height="1" bgcolor="#82B5DF"><td colspan="8" width="752"></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="4" height="5"></td></tr>
<tr align="center">
<td><input type=button value="글쓰기" OnClick="window.location='boardWrite.jsp'"></td>
</tr>
</table>
</body>
</html>
I am trying to show a forum with a list of Q&As.
When I run it, i get errors.
SyntaxError: missing ; before statement BulletinBoardColumns.jsp:63:32
ReferenceError: getForumRow is not defined BulletinBoardColumns.jsp:1:12
I cannot find any mistakes.. So ask you guys for help..
Map<String, Object> myMap = new HashMap<String, Object>();
Following code is not javascript code. Javascript has Map object, WeakMap.
HashMap is for java.
Replace aboce code with
var myMap = new Map();
All other code looks fine for working.

Controlling table with JS

I have written a very simple code
<!DOCTYPE html>
<html>
<body>
<table id="myTable" border = "1"></table>
<script>
for(var i = 1; i<=5; i++){
var tableRow = "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
</script>
</body>
</html>
I want to generate a table like this code snippet
<table border = "1">
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
</table>
But it's giving only one row while I have set for loop for 5 times. How to solve this.
I am facing one more problem. If I write javascript in head tag, I don;t get any output & it's saying "document.getElementById("myTable").innerHTML" is null. How to rectify it?
<!DOCTYPE html>
<html>
<head>
<script>
for(var i = 1; i<=5; i++){
var tableRow = "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
Problem 1
The problem is that you are overriding your tableRow again and again in the for loop. So, you need to move that outside the for loop. You will need to update your script to
var tableRow = ""; // moved outside the loop
for(var i = 1; i<=5; i++){
tableRow += "<tr>"; // appending <tr>
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
Problem 2
The issue is coming because you are trying to execute the code before the dom is rendered. Try it wrap it inside the onload function i.e.
window.onload = function(){
// your code here
};
For reference - https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var tableRow = "";
for(var i = 1; i<=5; i++){
tableRow += "<tr>";
tableRow += "<td>" + "JS Table" + "</td>";
tableRow += "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
};
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
var tableRow="";
for(var i = 1; i<=5; i++){
tableRow += "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
<table id="myTable"></table>

Create a table inside script tag

How do I create a table inside the script tag without going to another page? I am currently using the document.write() function but it opens a new page but i want it to stay on the page as i click my button? here is my current code:
$( "#searchVehicleDesc" ).button().click(function( event ) {
document.write('<fieldset>');
document.write('<legend>Dashboard<\/legend><br>');
document.write('<table border="1" width="650">');
document.write('<tr bgcolor=#c0c0c0>');
document.write('<td width=100 align="center"><font face="helvetica"><b>Vehicle Name<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Service Type<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Others<\/b></\font><\/td>');
document.write('<td width=100 align="center"><font face="helvetica"><b>Reference No.<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Date<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Type<\/b><\/font><\/td>');
document.write('<\/tr>');
document.write('<\/table>');
document.write('<\/fieldset>');
});
Do something like this:
var myTable =
'<fieldset>' +
'<legend>Dashboard</legend></br>' +
'<table border="1" width="650">' +
'<tr bgcolor=#c0c0c0>' +
'<td width=100 align="center"><font face="helvetica"><b>Vehicle Name</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Others</b></font></td>' +
'<td width=100 align="center"><font face="helvetica"><b>Reference No.</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Reference Date</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Reference Type</b></font></td>' +
'</tr>' +
'</table>' +
'</fieldset>';
$( "#searchVehicleDesc" ).button().click(function( event ) {
$(document.body).append(myTable);
});
Notice that you don't have to escape forward slashes (/) in JavaScript strings.
You can also make the table HTML a lot shorter, while also making it easier to maintain, by using CSS:
In your JavaScript:
var myTable =
'<fieldset>' +
'<legend>Dashboard</legend></br>' +
'<table>' +
'<tr>' +
'<td class="large">Vehicle Name</td>' +
'<td class="small">Service Type</td>' +
'<td class="small">Others</td>' +
'<td class="large">Reference No.</td>' +
'<td class="small">Reference Date</td>' +
'<td class="small">Reference Type</td>' +
'</tr>' +
'</table>' +
'</fieldset>'
CSS file:
table{
border: 1px solid black;
}
table tr{ /* You could use just `tr{` here (leave out `table `), I just prefer this */
background-color: #c0c0c0;
}
table tr td{ /* Same here, for `td{` */
font-family:helvetica;
font-weight:bold;
text-align: center;
}
.large{
width: 100px;
}
.small{
width: 80px;
}
document.write() will overwrite current content in your page. You can use .append() instead:
$("#searchVehicleDesc" ).button().click(function( event ) {
$(document.body).append('<fieldset><legend>Dashboard</legend><br /><table border="1" width="650"><tr bgcolor="#c0c0c0"><td width="100" align="center"><font face="helvetica"><b>Vehicle Name</b></font></td><td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td><td width="80" align="center"><font face="helvetica"><b>Others</b></font></td><td width="100" align="center"><font face="helvetica"><b>Reference No.</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Date</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Type</b></font></td></tr></table></fieldset>');
});
You should create DOM elements in JS using the document.createElement() method. Read this: https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
You could also append the html string like document.getElementById('target_container').innerHTML('<div><-- your über long html string--></div>');
In case of jQuery you can simply append your html string to an object, like $('#target_container').html('<div><-- your über long html string--></div>');
use jQuery's append() function.
$( "#searchVehicleDesc" ).button().click(function( event ) {
$('#searchVehicleDesc').append('<fieldset>');
});
see jsFiddle:
http://jsfiddle.net/L2DEE/
That is because each time you call document.write, you are overriding the document.
Concat all the strings and then append it to some container.
You appear to be using jQuery, there are lots of methods you can use to add content to an existing page:
html
append
appendTo
prepend
prependTo
before
insertBefore
after
insertAfter
...and others. They're all covered, with examples, in the jQuery API documentation.
Just make a div and put your table in it.
<div id="container"></div>
your script should be something like this:
var table = '<fieldset>'+
'<legend>Dashboard</legend><br>'+
'<table border="1" width="650">';
... and so on...
Then simply append to your container.
$("#container").append(table);
You can do following
var myObj, txt;
txt += "<table>"
myObj = JSON.parse(text);
for (x in myObj.issues) {
console.log(myObj.issues[x])
txt += "<tr><td>" + myObj.issues[x].key + "</td>";
txt += "<td>" + myObj.issues[x].fields.summary + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;

Categories