Knockout load current view model and html in another page

Question

I have an Html page with a big knockout viewModel and a lot of complexity. The visitor ask for the page to calculate some things which are calculates in the server (ajax call) and it returns json data which bind to the view model.

After that all changes in the page are done through knockout. Certain divs in the HTML are filled and proccesed by knockout. What I would like to do is that upon a button click to open a new page with the contents of a certain div inside the new page. My point is to give the user the ability to print whichever div he wants through his browser, but with without seeing the other stuff on the page.

Is this possible? I don't mind if the new page has only the html output of the viewModel or the viewModel itself. I just want the output but without redirecting to other page.

Thanks

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

To be able to print a single div in a page, you don't need to open it in a new page. It's much easier to use a print media query. There are several samples of this technique all over SO:

Print the contents of a DIV

Print <div id=printarea></div> only?

How to print only one div content from html page using print button

However, if you want to do it in the asked way, you still can do it:

How to open a new window and insert html into it using jQuery?

Open window in JavaScript with HTML inserted

edited May 23 '17 at 11:44

Community

1
1

answered Nov 10 '15 at 11:02

JotaBe

38,030
8
98
117

I tried this solution http://stackoverflow.com/a/2255438/198893 . But if for example I check a checkbox inside the div, the checkbox is showened as checked but the widows is opened and the checkbox isn't check. As if jquery('#id').html() doesn't get the changes – Harris Nov 10 '15 at 14:18
Without seeing any code it's impossible to hlep you. Can you update your question with some code? Thank you! – JotaBe Nov 10 '15 at 14:32

score 0 · Answer 2 · answered Nov 11 '15 at 08:33

For example upon a click, knockout binds some new values and show a div. The div's code is:

<ul class="list-unstyled coverages" data-bind="foreach: optionalNonGroupedCoverages">
                    <li>
                        <input type="checkbox" data-bind="checked: IsChecked" value=""/>
                        <span data-bind="text: Description"></span>
                        <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                tooltip: {title: TooltipText, placement: 'right'}"></i>
                    </li>
                </ul>

and when binding is occured it produces the following html:

<ul class="list-unstyled coverages" data-bind="foreach: optionalNonGroupedCoverages">
                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked" value="">
                            <span data-bind="text: Description">test1</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test2</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test3</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" style="display: none;" data-original-title="" title=""></i>
                        </li>
                    </ul>

So when I grab the html with :

var html = $('#selectedPackage').html();

        var mywindow = window.open('', 'my div');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(html);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        //mywindow.print();
        //mywindow.close();

        return true;

the html appears but if a checkbox is checked it appears as non-checked in the new window. I believe it has something to do with the attribute value in input box which isn't set.

Knockout load current view model and html in another page

2 Answers2