1

I have a div:

<div id="contract"></div>

that gets populated by JQuery using innerHTML with strings from client side javascript and data (HTML) got from my server:

$('#submit').click(function () {       
    document.getElementById('contract').innerHTML = 'foobar';    
    var profile = $('#profile').val();
    var query = {
        'profile': profile
    };
    $.get('/foo/profileViewer', query, function (data) {
        var result = $.parseJSON(data);            
        document.getElementById('contract').innerHTML += result ;  //$('#contract').html(result); doesn't work either         
    })
});

I want to print just the contract div.

I tried the JQuery answers suggested here and here and all point to answers where div already contains the text in HTML to start with and not something which is obtained from a server. Weirdly, if I remove the $.get and implement one of the answers provided, "foobar" does get printed. If I do not remove the $.get, nothing gets printed. I tried using $.ajax instead of $.get but this does not resolve the issue. I tried using the CSS solution here but that messes up my data (HTML) coming from the server side as it already has CSS paged media embedded in it. Hence, I do not want to use the CSS solutions.

Could anyone please suggest me a good way to use JQuery to print a div when the div contains data obtained from the server side?

Community
  • 1
  • 1
Core_Dumped
  • 4,577
  • 11
  • 47
  • 71

3 Answers3

1

Try using a hidden iframe:

$('#submit').click(function (e) {  
    e.preventDefault();     
    $('#contract').empty();    
    var profile = $('#profile').val();
    var query = {
        profile: profile
    };
    $.get('/foo/profileViewer', query, function (data) {            
        $('body').append('<iframe id="printf" style="display:none;" name="printf"></iframe>');
        $('#printf').contents().find('body').append(data);
         window.frames["printf"].focus();
         window.frames["printf"].print();       
    })
});

https://jsfiddle.net/njezoem5/

madalinivascu
  • 32,064
  • 4
  • 39
  • 55
0

Go this way

$('#contract').text(JSON.stringify(data));

or 

$('#contract').append(
    $('<pre>').text(
        JSON.stringify(data, null, '  ')
    )
)
Navoneel Talukdar
  • 4,393
  • 5
  • 21
  • 42
  • I tried `$('#contract').html(result);` too before and it wasn't working for me. Hence,I shifted to `document.getElementById('contract').innerHTML += result ;` – Core_Dumped Dec 10 '15 at 16:20
-1

you can not print a tag directly .But this trick can help:

<script language="javascript" type="text/javascript">
    function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;


    }
</script>
Reza
  • 11
  • 5