How to set values for the below div block (setting values in '?' placeholder).
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
? </div>
</td> </tr>
</table>
I have tried with following scenario, but not working
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Your script is working perfectly, it's just that you need to be sure that you are placing the script after the HTML is rendered, so first you need to print the tables out and than use the script tag, because if you place the script before the id="txt3" has rendered, it won't change anything as onload the script didn't find any, so this should be the order...
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
?
</div>
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Side Note : If you are using HTML5, you don't need
type="text/javascript" anymore, as now, default is JavaScript
$(document).ready(function(){
$('#txt3').html("New Text");
});
Be sure your page is loaded before you manipulate it:
<script type="text/javascript">
window.onload = function() {
document.getElementById('txt3').innerHTML = "TEST";
}
</script>
Related
I want to send a angularjs binded value which has mailid's seperated by , to mailto of anchor tag.
team.emails will have a single mail id or many mail id's seperated by comma.
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><a href='mailto:{{team.emails}}'</a></td>
</tr>
On clicking that column in the row should open outlook with the team email addresses in To part.
Kindly let me know if this is the correct approach.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
</head>
<body ng-app = "myapp" ng-controller="homeController">
<table style="width:100%">
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><p>
<a href="mailto:{{team.emails}}" target="_top">
Send Mail</a>
</p></td>
</tr>
</table>
</body>
<script>
angular.module('myapp', []).controller('homeController', ['$scope', function($scope){
$scope.teamsData = [{
name:'john',
emails:'xxx#gmail.com,yyy.gmail.com,zzz.gmail.com'
},
{
name:'mark',
emails:'lll#gmail.com,ppp.gmail.com,ooo.gmail.com'
}]
}])
</script>
</html>
I have sample from Socket.io which is display price ticker of cryptocurrency. I try to find way to parse this socket to HTML table but still not find the resources. Here is the sample code using socket.io javascript :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
<div id='trade'> open console </div>
</body>
<script type="text/javascript">
var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
console.log(tradeMsg);
document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg)
})
</script>
</html>
Here is sample of output string from above code :
{"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"}
I want to parse above value to HTML table like this :
<table>
<tr>
<td>COIN</td>
<td>EXCHANGE</td>
<td>MARKET</td>
</tr>
<tr>
<td>value coin here</td>
<td>value exchange here</td>
<td>value market here</td>
</tr>
</table>
Any idea how to parse json from socket to html table?? thanks for help.
The mere parsing into an HTML table is rather easy. Note, that the following code makes use of template strings. It also has no checks in place to verify the message or the existence of the table. So you might need to add those.
function toTable( msg ) {
document.getElementById( 'results' )
.insertAdjacentHTML( 'beforeend',
`<tr><td>${msg.coin}</td><td>${msg.exchange_id}</td><td>${msg.market_id}</td></tr>`
);
}
toTable( {"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"} );
<table id="results">
<tr>
<th>COIN</th>
<th>EXCHANGE</th>
<th>MARKET</th>
</tr>
</table>
On the other hand, updates will be more interesting, as you have to create a key for each entry and keep track of whether there already a row for that entry or not.
based on above answer, i just modify the code to make it work without adding new row. Here is the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
<div id='trade'></div>
</body>
<script type="text/javascript">
function toTable( data ) {
document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";
document.getElementById( 'results' ).innerHTML += "<tr><td>" + data.coin + "</td><td>" + data.exchange_id.toUpperCase() + "</td><td> " + data.market_id + "</td><td>" + data.message.msg.price + "</td></tr>";
}
var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
console.log(tradeMsg);
//document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg);
toTable(tradeMsg);
})
</script>
</html>
<table border="1" id="results"></table>
Currently i work on a project in asp classic, jquery, and html
Recently, i sucessfully convert a html file to a pdf using "from-html.js", but i got one question wich is:
How can i insert some images in the pdf that i create ? i searched for a long time now and i don't find the way to do it.
I tried to use addhtml.js or addimage.js mixed up with my actual code but it doesn't work.
there's what i have currently done
<title>Recapitulatif Commande</title>
<script type="text/javascript" src="./examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./dist/jspdf.min.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script src='./libs/Blob.js/Blob.js' type='text/javascript'></script>
<script src='./libs/FileSaver.js/FileSaver.js' type='text/javascript'></script>
<script src='./libs/png_support/zlib.js' type='text/javascript'></script>
<script src='./libs/png_support/png.js' type='text/javascript'></script>
<script src='./libs/deflate.js' type='text/javascript'></script>
<script src='jspdf.plugin.png_support.js' type='text/javascript'></script>
<script language="JavaScript">
$(document).ready( function(){
var doc = new jsPDF();
var specialElementHandlers =
{
'#editor': function (element, renderer)
{
return true;
}
};
$('#cmd').click(function ()
{
doc.fromHTML($('#mydiv').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers,
});
doc.save('RecapCommande.pdf');
});
});
</script>
<div id="mydiv">
<h2><center>Bonjour voici un recap des notes</center></h2>
<table id="table" width="100%" border="2px solid">
<thead>
<tr>
<th width="33%" align="center">date : </th>
<th width="33%" align="center">montant : </th>
<th width="33%" align="center">statut : </th>
</tr>
</thead>
</table>
</div> <!-- /container -->
<table id="table14" width="100%" >
<thead>
<tr>
<th width="33%" align="center"><button id="cmd" align="center" >Imprimer votre commande</button></th>
</tr>
</thead>
</table>
If you can help me, i would be so relieve, thanks
you will have to convert your table into a canvas then display it.First attach a hidden canvas to your div.Second copying your div into the hidden canvas.Third hide your table and unhide the canvas.fourth generate pdf.
<Script>
//first
$("#table").append('<div id="can" style="background-color:white" >
<canvas id="canvas" width="300" height="320" style="background-color:white"></canvas> </div>');
//second
canvg('canvas', $("#table").html());
//third
var im = document.getElementById('canvas');
im.style.display = 'block';
var create = document.getElementById('table');
create.style.display = 'none';
//fourth..call function for pdf generation
</Script>
Encode your images to base64, and insert the data blob into the img src area... i.e.:
<img src="data:image/jpeg;base64,/9j/4AA......9k=" />
I know this is an old post, however I've been dealing with this issue today and have found that base64 images are the only way the HTML to PDF conversion can output them.
Can someone tell me why this is not working
<script>
$(document).ready(function() {
$("#driver").ready(function(event){
$('#stage').load('index.php');
});
});
</script>
What I have on the index.php is a table with link, the problem is that is really hard to click on one of those link, I have to click like 10 times to make it to work, any ideas why?
Index.php
<script>
$(document).ready(function() {
$('#stage').load('index.php');
});
</script>
<table width="200" border="1">
<tr>
<td>Name </td>
<td>URL Address</td>
</tr>
<tr>
<td>Googe</td>
<td>Google</td>
</tr>
</table>
I include the same function on my index.php, the idea is if a make a change on the index page, and reflect the change on the test page.
The ready event is only triggered on the document, remove the $("#driver").ready( part.
$(document).ready(function() {
$('#stage').load('index.php');
});
I have an interesting issue. I have a website which sends emails.
The email templates are often straight forward but for one client he wants me to convert content from his public website into email friendly html.
I want to not just solve the problem for his specific website but for other unknown websites.
So I remembered that you can run Razor as a template engine.
Long story short. It is working and working well.
My issue comes down to this. When someone edits the template with razor style for loops Ckeditor acts quite strangely.
Any idea how to keep CKEditor from screwing up?
<table style="width: 100%;" width="100%">
<tbody>
#foreach (var row in body.indexPageRow) {
foreach (var cell in row.teaser) {
<tr>
<td class="row">#Raw(cell.teaserContent.a.Html)</td>
<td class="row">#Raw(cell.teaserContent.div.InnerHtml)</td>
</tr>
}}
</tbody>
</table>
The above code when saved in ckeditor removes the razor information and becomes an empty table
<table style="width: 100%;" width="100%">
<tbody></tbody>
</table>
The only way I can think of to achieve this would be to use html comments in conjunction with razor comments.
Initially you would author the razor template like so:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<tbody>
<tr><td>X</td><td>Y</td></tr>
#*<!--*#
#for (var x = 1; x < 5; x++) {
for (var y = 1; y < 5; y++) {
#*-->*#
<tr>
<td class="row">#Html.Raw(x)</td>
<td class="row">#Html.Raw(y)</td>
</tr>
#*<!--*#
}
}
#*-->*#
</tbody>
</table>
</body>
</html>
The code above is valid and will render without error. But when you put it into the html editor it will be rearranged by the browser, so you will need to alter it just before it is displayed for editing so that the razor comments are removed and only the html comments remain.
So, once you have removed the razor comments by replacing all instances of #*<!--*# with <!-- and all instances of #*-->*# with --> you should have the following
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<tbody>
<tr><td>X</td><td>Y</td></tr>
<!--
#for (var x = 1; x < 5; x++) {
for (var y = 1; y < 5; y++) {
-->
<tr>
<td class="row">#Html.Raw(x)</td>
<td class="row">#Html.Raw(y)</td>
</tr>
<!--
}
}
-->
</tbody>
</table>
</body>
</html>
This will render in the html editor and wont get mangled by the browser as pointed out by Alfonso, an example of this on jsfiddle http://jsfiddle.net/wPGLd/3/
Once the editing is complete you will need to capture the html and reapply the razor comments by replacing all instances of <!-- with #*<!--*# and all instances of --> with #*-->*#
Intercepting the html before and after it enters the ckeditor is fairly straight forward and well documented. I found the following article that explains a little about how to get the ckeditor content on submit
How to update CKEditor content on form submit – equivalent of OnAfterLinkedFieldUpdate FCKEditor
The following question also covers this
Update editor content immediately before save in CKEditor plug-in
You can't.
The browser will rearrange those contents: http://jsfiddle.net/wPGLd/
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
alert(document.body.innerHTML)
}//]]>
</script>
</head>
<body>
<table style="width: 100%;" width="100%">
<tbody>
#foreach (var row in body.indexPageRow) {
foreach (var cell in row.teaser) {
<tr>
<td class="row">#Raw(cell.teaserContent.a.Html)</td>
<td class="row">#Raw(cell.teaserContent.div.InnerHtml)</td>
</tr>
}}
</tbody>
</table>
</body>
</html>