Open window in JavaScript with Dynamic HTML page

Question

How would I open a new window in JavaScript and insert HTML data and dynamic content values and finally print that opened window page.

opened window must have each row 2 cards.(depends hidden table),
like - opened window will have if in my hidden table (tblPrintCards) have 1 or 2 rows 2 id cards (HTML CODE) in single row.

My JavaScript Code :

function generateIDCardForPrint() {
    /** get all data **/
    var oTableExt = $('#tblPrintCards').dataTable();//hide jquery table have data//(photo base64 string,name)
    var tablerows = $('#tblPrintCards tr').size();
    /** Finding how many rows */
    var tblTr = (tablerows / 2);
    var t = document.createElement('table');
    t.width = "100%";
    var row = document.createElement('tr');
    var td = document.createElement('td');
    var ImageID = "data:image/jpg;base64," + aData[0][4];
    var images = new Image();
    images.src = ImageID;
    images.id = "EmpImage";
    $('#empImages').html(images);
    $('#empImages img').css("height", "80px");
    $('#empImages img').css("width", "80px");
    $('#empName').text(aData[0][2]);//Hello HTML            
    var HtmlCode = $('#callID').html();//calling HTML Code static content
    td.innerHTML = HtmlCode;
    td.align = "left";
    row.appendChild(td);
    t.appendChild(row);
    //Fetch element where table is created & append
    var id = document.getElementById("tbl");
    //adding table to html code.
    tbl.appendChild(t);
    alert(t.innerHTML)
    var myWindow = window.open("", "MsgWindow", "width=1256, height=300");
    myWindow.document.write(t.innerHTML);
    myWindow.print();
}

MY HTML CODE

<div id="idCard">
    <div class="photoBox">
        <img src="images/photo.jpg" alt=""></div>
    <div class="clear"></div>
    <div class="detailBox">
        <label><strong>HERE Dynamic Name<strong></label>
    </div>
    <div class="clear">
        <!-- idCard ends here -->
    </div>
</div>

above output html (card) will come in new window with based on number of hidden table rows, (if 2 rows data 1 row card, if 4 rows data 2 rows cards)

*, html, body { box-sizing:border-box; }
    body { margin:50px;}
    .clear { clear:both; }
    #idCard {
        width:310px;
        padding:10px;
        border:2px solid #000;
        box-sizing:border-box;
        font-family:Arial, Helvetica, sans-serif;
    }
    #idCard label {
        display:block;
        font-size:13px;
        margin:0 0 5px 0;
    }
    #idCard .photoBox {
        width:80px;
        height:60px;
        background:#306;
        float:right;
        border:0px solid red;
    }
    #idCard .detailBox {
        width:150px;
        height:60px;
        margin:0px 0 0px 0;
        border:0px solid red;
        float:right;
        padding:15px 0 0 0;
    }

<div id="idCard"> 
  <div class="photoBox"><img src="images/photo.jpg" alt=""></div>    
  <div class="clear"></div>
  <div class="detailBox">
    <label><strong>Here Dynamic Name<strong></label>
  </div>
  <div class="clear"><!-- idCard ends here --></div>
</div>

Sample open new widow image is:

enter image description here

i am not able to open html content with dynamic data. and it window must have depends no of rows .above sample o/p image 5rows printing in 3 rows only. — Hydrogen
– Hydrogen, Commented Feb 6, 2015 at 13:55

Fares M. · Accepted Answer · 2015-02-09 16:09:59Z

In this response I created a data array for test since aData array is unknown for us, so array initialization:

var aData =[];
// Just for test purpose, you can provide your own data
function initTestData(max){
    var i = 0, emp = [];
    for(i; i < max; i++){
        emp[0] = "https://t1.gstatic.com/images?q=tbn:ANd9GcTGBDXFOEElnYoEZkYStOBIT_sogGr6zUG44opA4mq7Pf0SgevkGIMjSKmw6oktM4HK5NaKcWuQLA";
        emp[1] = "Emp-"+i;
        aData[i] = emp;
        emp = [];
    }
}

and I modified your generateIDCardForPrint function to fit with what you asked:

function generateIDCardForPrint() {
        // Card model holder
        var idCardElement = $("#idCard");
        // Data rows count
        var tablerows = aData.length;//$('#tblPrintCards tr').size();

        /** Finding how many rows */
        var tblTr = (tablerows / 2);
        var t = $('<table>');
        t.css("width", "100%");
        for(var i= 0; i < tblTr; i++){
            var row = $('<tr>');

            for( var j=0; j < 2; j++){

               if(i * 2 + j < tablerows){
                   var td = $('<td>');
                   var ImageID = aData[i * 2 + j][0];
                   var images = new Image();
                   var empImages = $('.photoBox', idCardElement);
                   var empName = $('.detailBox > label > strong', idCardElement);

                   images.src = ImageID;
                   images.id = "EmpImage";
                   empImages.html(images);

                   empImages.find('img').each(function(a){$(this).css({height: "80px", width: "80px"})});

                   empName.text(aData[i * 2 + j][1]);//Hello HTML          
                   var HtmlContent = idCardElement.html(), 
                       Card = $('<div>').attr("id","idCard").html(HtmlContent);

                   td.html(Card);
                   td.css("align", "left");
                   row.append(td);
               }

           }
           t.append(row);
       }

       var cssStyle= "*,body,html{box-sizing:border-box}body{margin:50px}.clear{clear:both}#idCard{width:310px;padding:10px;border:2px solid #000;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}#idCard label{display:block;font-size:13px;margin:0 0 5px}#idCard .photoBox{width:80px;height:60px;background:#306;float:right;border:0 solid red}#idCard .detailBox{width:150px;height:60px;margin:0;border:0 solid red;float:right;padding:15px 0 0}";

       var myWindow = window.open("", "MsgWindow", "width=1256, height=300");
myWindow.document.write('<html><head><title>Print it!</title><style>'+cssStyle+'</style></head><body>');
       myWindow.document.write('<table>'+t.html()+'</table>');
       myWindow.document.write('</body></html>');
       myWindow.print();
   }

I think you can make this function's code more clean. http://jsfiddle.net/vubkeb5w/3/

thanks @Fares M... please check once jsfiddle, not working,it not showing the new window.
Okay @Hydrogen I just forgot to update my fiddle link, you can check the updated link.

Collectives™ on Stack Overflow

Open window in JavaScript with Dynamic HTML page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related