Execution of Javascript Function Prevents Subsequent Uses Of Separate jQuery UI

[phdphd]

Hi All,

 

My page contains a JS function that enables to print the content of a DIV, and contains also a jQuery Autocomplete textbox that does not belong to that DIV.

 

Here is the JS for printing the div

function printContent(el){
        var restorepage = document.body.innerHTML;

        var printcontent=document.getElementById(el).innerHTML;
        document.body.innerHTML = printcontent;
        window.print();
        document.body.innerHTML = restorepage;
        }

The HTML attached to it is

<div id="div1">DIV 1 content...

</div> <button onclick="printContent('div1')">Print Content</button>

If the user clicks the button to print the content of  the DIV, they cannot afterwards make use of the Autocomplete textbox.

 

It seems the issue occurs with any kind of jQuery UI, not just autocomplete.

 

In this case, the HTML of the Autocomplete is

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>

and the script

$(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl"
            
            ];

          $("#tags").autocomplete({
                source: availableTags,
                
           
                minLength: 0,
                delay: 0
            });
 });

jquery-ui-1.10.3.custom.css, jquery-1.9.1.js and jquery-ui-1.10.3.custom.js are used.

 

Any idea of how to keep the jQuery UI functional after the div-printing JS function has been used ?

 

Thanks for your help.

 

[kicken]

If the user clicks the button to print the content of  the DIV, they cannot afterwards make use of the Autocomplete textbox.

 

It seems the issue occurs with any kind of jQuery UI, not just autocomplete.

It would affect any element that has javascript events attached to it. The reason why is because when you set innerHTML you are destroying the original elements and creating new fresh elements. This means they will no longer have any of their event handling because the new elements never had any event handling attached to them.

 

What you need to do is accomplish what you want without destroying the elements. Either that or re-attach the event handling after you've re-generated the document.

 

The first thing I would suggest looking into is a print stylesheet. This will let you modify how the document looks when someone prints it automatically without any need for javascript manipulation.

 

The second option would be a better print function that doesn't use innerHTML to re-create the document but rather just moves the existing nodes around.

 

function printContent(el){
	var printElement = document.getElementById(el);
	var newBody = document.createElement('body');
	var oldBody = document.body;
	var marker = document.createElement('span');

	printElement.parentNode.replaceChild(marker, printElement);
	newBody.appendChild(printElement);

	oldBody.parentNode.replaceChild(newBody, oldBody);
	window.print();
	newBody.parentNode.replaceChild(oldBody, newBody);
	marker.parentNode.replaceChild(printElement, marker);
}

JSFiddle Demo

 

What that does is move the target div into a new body element, then replace the existing body element with the new one. After printing, it then move the element back to where it was in the original body and puts the original body element back in place.

 

This means the original elements never get destroyed so they never lose there event handling.

Edited December 13, 2014 by kicken

[phdphd]

Thank you very much, kicken! Your solution is a great Christmas gift

[phdphd]

Me again. I reopen the topic despite the main point was solved.

 

Is it possible to prepend the div with a string? I tried to add the following at the beginning of the JS function, but it does not fire.

var printElement = 'text to add before the div to print<br>';	
printElement+=document.getElementById(el);

Thanks.

[kicken]

You'd add something like this to the function:

    var prepend = document.createElement('div');   
    prepend.innerHTML = 'This is some data that has been added.<br><br>';
    newBody.appendChild(prepend);

Put it after the variables are defined.

[phdphd]

thanks !