Smalltalk › Frameworks & Tools › Seaside › Seaside General

Print only a particular div

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

7 messages Options

Rajeev Lochan

Print only a particular div

Hi,
One of the hurdles I am facing is printing only a part of the page/ a particular html div. By googling, I tried to do the following steps, but still not able to succeed.

I followed instruction given in http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm

1) created a Javascript printWindow.js   with the Js code mentioned there.

MyLibrary>>printwindowJs
    ^ '<script type="text/javascript">

</script>'

2) Added the above Js in #updateRoot: of my rootComponent

MyRoot>>updateRoot: anHtmlRoot
    super updateRoot: anHtmlRoot.
    anHtmlRoot javascript url: '/seaside/files/ToDoLibrary/printwindow.js'

3) MyRoot>>renderContentOn: html

html div id: 'div1'; with: [ ........... ].
html div id: 'div2'; with: [ ........... ].
html div id: 'div3'; with: [ ........... ].
html div id: 'div4'; with: [ html text: 'Print this Div'.
                                 html space.
                                 html html: '<a href="#null" onclick="printContent( ' 'div4' ' );">Click to print div 4</a>'.

    html anchor url: '#'; onClick: 'printContent( ' 'printListView' ' )';
                                    with: 'Print div 4 ' .

I have used both raw html code and modified Seaside/squeak code (I hope its equivalent). When I click on any of the anchors, nothing happens. I get the following error in Firebug(firefox)

printContent is not defined

onclick (click clientX=0, clientY=0)

I crosschecked the inclusion of printwindow.js and it is indeed included in the Firebug Js browser.

I hope you people can help me where I am committing a dumb mistake(maybe) or is there a better way to print only a div.

Thanks & Regards,
Rajeev

--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Rajeev Lochan

Re: Print only a particular div

>MyRoot>>updateRoot: anHtmlRoot
> super updateRoot: anHtmlRoot.
> anHtmlRoot javascript url: '/seaside/files/ToDoLibrary/printwindow.js'

Theres a typo in the above code, it is MyLibrary instead of ToDoLibrary

On Jan 2, 2008 10:37 PM, Rajeev Lochan <[hidden email]> wrote:

Hi,
One of the hurdles I am facing is printing only a part of the page/ a particular html div. By googling, I tried to do the following steps, but still not able to succeed.

I followed instruction given in http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm

1) created a Javascript printWindow.js   with the Js code mentioned there.

MyLibrary>>printwindowJs
    ^ '<script type="text/javascript">

</script>'

2) Added the above Js in #updateRoot: of my rootComponent

MyRoot>>updateRoot: anHtmlRoot
    super updateRoot: anHtmlRoot.
    anHtmlRoot javascript url: '/seaside/files/ToDoLibrary/printwindow.js'

3) MyRoot>>renderContentOn: html

html div id: 'div1'; with: [ ........... ].
html div id: 'div2'; with: [ ........... ].
html div id: 'div3'; with: [ ........... ].
html div id: 'div4'; with: [ html text: 'Print this Div'.
                                 html space.
                                 html html: '<a href="#null" onclick="printContent( ' 'div4' ' );">Click to print div 4</a>'.

    html anchor url: '#'; onClick: 'printContent( ' 'printListView' ' )';
                                    with: 'Print div 4 ' .

I have used both raw html code and modified Seaside/squeak code (I hope its equivalent). When I click on any of the anchors, nothing happens. I get the following error in Firebug(firefox)

printContent is not defined
onclick (click clientX=0, clientY=0)

I crosschecked the inclusion of printwindow.js and it is indeed included in the Firebug Js browser.

I hope you people can help me where I am committing a dumb mistake(maybe) or is there a better way to print only a div.

Thanks & Regards,
Rajeev

--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873

Philippe Marschall

Re: Print only a particular div

In reply to this post by Rajeev Lochan

2008/1/2, Rajeev Lochan <[hidden email]>:

> Hi,
> One of the hurdles I am facing is printing only a part of the page/ a
> particular html div. By googling, I tried to do the following steps, but
> still not able to succeed.
>
> I followed instruction given in
> http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm
>
> 1) created a Javascript printWindow.js with the Js code mentioned there.
>
> MyLibrary>>printwindowJs
> ^ '<script type="text/javascript">
> 
> </script>'

Why do you put <script>-Tags in JavaScript code?

Cheers
Philippe

> 2) Added the above Js in #updateRoot: of my rootComponent
>
> MyRoot>>updateRoot: anHtmlRoot
> super updateRoot: anHtmlRoot.
> anHtmlRoot javascript url:
> '/seaside/files/ToDoLibrary/printwindow.js'
>
>
> 3) MyRoot>>renderContentOn: html
>
> html div id: 'div1'; with: [ ........... ].
> html div id: 'div2'; with: [ ........... ].
> html div id: 'div3'; with: [ ........... ].
> html div id: 'div4'; with: [ html text: 'Print this Div'.
> html space.
> html html: '<a
> href="#null" onclick="printContent( ' 'div4' ' );">Click to print div
> 4</a>'.
>
> html anchor url: '#'; onClick: 'printContent( ' 'printListView' ' )';
> with: 'Print div 4 ' .
>
> I have used both raw html code and modified Seaside/squeak code (I hope its
> equivalent). When I click on any of the anchors, nothing happens. I get the
> following error in Firebug(firefox)
>
> printContent is not defined
> onclick (click clientX=0, clientY=0)
>
>
> I crosschecked the inclusion of printwindow.js and it is indeed included in
> the Firebug Js browser.
>
> I hope you people can help me where I am committing a dumb mistake(maybe) or
> is there a better way to print only a div.
>
> Thanks & Regards,
> Rajeev
>
>
>
> --
> Rajeev Lochan
>
> Co-founder, AR-CAD.com
>
> http://www.ar-cad.com
> +91 9243468076 (Bangalore)
> 080 65355873
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Rajeev Lochan

Re: Print only a particular div

Thanks Philippe for correcting me.
After some modifications the Js code is

printwindowJs
    ^ '
function chkstate(){
if(document.readyState=="complete"){window.close()}
else{setTimeout("chkstate()",2000)}}

function print_win(){
window.print();chkstate();}


    function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('''',''printwin'',''left=100,top=100,width=400,height=400'')
newwin.document.write(''<HTML>\n<HEAD>\n'')
newwin.document.write(''<TITLE>Print Page</TITLE>\n'')
newwin.document.write(''</HEAD>\n'')
newwin.document.write(''<BODY onload="print_win()">\n'')
newwin.document.write(str)
newwin.document.write(''</BODY>\n'')
newwin.document.write(''</HTML>\n'')
newwin.document.close()
}

'

Now, I am getting a popup browser with the div rendered in it. But the automatic printerSelection menu is not coming. I hope I am closer than last time.

Regards,
Rajeev

On Jan 2, 2008 11:47 PM, Philippe Marschall <[hidden email]> wrote:

2008/1/2, Rajeev Lochan <[hidden email]>:
> Hi,
> One of the hurdles I am facing is printing only a part of the page/ a
> particular html div. By googling, I tried to do the following steps, but

> still not able to succeed.
>
> I followed instruction given in
> http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm
>
> 1) created a Javascript printWindow.js with the Js code mentioned there.
>
> MyLibrary>>printwindowJs
> ^ '<script type="text/javascript">
> 
> </script>'

Why do you put <script>-Tags in JavaScript code?

Cheers
Philippe

> 2) Added the above Js in #updateRoot: of my rootComponent
>
> MyRoot>>updateRoot: anHtmlRoot
> super updateRoot: anHtmlRoot.
> anHtmlRoot javascript url:
> '/seaside/files/ToDoLibrary/printwindow.js'
>
>
> 3) MyRoot>>renderContentOn: html
>
> html div id: 'div1'; with: [ ........... ].
> html div id: 'div2'; with: [ ........... ].
> html div id: 'div3'; with: [ ........... ].
> html div id: 'div4'; with: [ html text: 'Print this Div'.
> html space.
> html html: '<a
> href="#null" onclick="printContent( ' 'div4' ' );">Click to print div
> 4</a>'.
>
> html anchor url: '#'; onClick: 'printContent( ' 'printListView' ' )';
> with: 'Print div 4 ' .
>
> I have used both raw html code and modified Seaside/squeak code (I hope its
> equivalent). When I click on any of the anchors, nothing happens. I get the
> following error in Firebug(firefox)
>
> printContent is not defined
> onclick (click clientX=0, clientY=0)
>
>
> I crosschecked the inclusion of printwindow.js and it is indeed included in
> the Firebug Js browser.
>
> I hope you people can help me where I am committing a dumb mistake(maybe) or
> is there a better way to print only a div.
>
> Thanks & Regards,
> Rajeev
>
>
>
> --
> Rajeev Lochan
>
> Co-founder, AR-CAD.com
>
> http://www.ar-cad.com
> +91 9243468076 (Bangalore)
> 080 65355873
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Rajeev Lochan

Re: Print only a particular div

For the above code, I am getting the following error in fireBug

print_win is not defined

Any idea, where I am wrong.

Regards,
Rajeev

On Jan 3, 2008 12:16 AM, Rajeev Lochan <[hidden email]> wrote:

Thanks Philippe for correcting me.
After some modifications the Js code is

printwindowJs
    ^ '
function chkstate(){
if(document.readyState=="complete"){window.close()}
else{setTimeout("chkstate()",2000)}}

function print_win(){
window.print();chkstate();}



    function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('''',''printwin'',''left=100,top=100,width=400,height=400'')
newwin.document.write(''<HTML>\n<HEAD>\n'')
newwin.document.write(''<TITLE>Print Page</TITLE>\n'')
newwin.document.write(''</HEAD>\n'')
newwin.document.write(''<BODY onload="print_win()">\n'')
newwin.document.write(str)
newwin.document.write(''</BODY>\n'')
newwin.document.write(''</HTML>\n'')
newwin.document.close()
}

'

Now, I am getting a popup browser with the div rendered in it. But the automatic printerSelection menu is not coming. I hope I am closer than last time.

Regards,
Rajeev

On Jan 2, 2008 11:47 PM, Philippe Marschall <[hidden email]> wrote:
2008/1/2, Rajeev Lochan <[hidden email]>:
> Hi,
> One of the hurdles I am facing is printing only a part of the page/ a
> particular html div. By googling, I tried to do the following steps, but

> still not able to succeed.
>
> I followed instruction given in
> http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm
>
> 1) created a Javascript printWindow.js with the Js code mentioned there.
>
> MyLibrary>>printwindowJs
> ^ '<script type="text/javascript">
> 
> </script>'

Why do you put <script>-Tags in JavaScript code?

Cheers
Philippe

> 2) Added the above Js in #updateRoot: of my rootComponent
>
> MyRoot>>updateRoot: anHtmlRoot
> super updateRoot: anHtmlRoot.
> anHtmlRoot javascript url:
> '/seaside/files/ToDoLibrary/printwindow.js'
>
>
> 3) MyRoot>>renderContentOn: html
>
> html div id: 'div1'; with: [ ........... ].
> html div id: 'div2'; with: [ ........... ].
> html div id: 'div3'; with: [ ........... ].
> html div id: 'div4'; with: [ html text: 'Print this Div'.
> html space.
> html html: '<a
> href="#null" onclick="printContent( ' 'div4' ' );">Click to print div
> 4</a>'.
>
> html anchor url: '#'; onClick: 'printContent( ' 'printListView' ' )';
> with: 'Print div 4 ' .
>
> I have used both raw html code and modified Seaside/squeak code (I hope its
> equivalent). When I click on any of the anchors, nothing happens. I get the
> following error in Firebug(firefox)
>
> printContent is not defined
> onclick (click clientX=0, clientY=0)
>
>
> I crosschecked the inclusion of printwindow.js and it is indeed included in
> the Firebug Js browser.
>
> I hope you people can help me where I am committing a dumb mistake(maybe) or
> is there a better way to print only a div.
>
> Thanks & Regards,
> Rajeev
>
>
>
> --
> Rajeev Lochan
>
> Co-founder, AR-CAD.com
>
> http://www.ar-cad.com
> +91 9243468076 (Bangalore)
> 080 65355873
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

--

Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873

Keith Roberts-4

Re: Print only a particular div

In reply to this post by Rajeev Lochan

I think you may need to specify the chrome for the new
window, possibly the main window toolbar. See this link for
more details:

http://www.w3schools.com/htmldom/met_win_open.asp

What browser are you using? Have you tried Firefox or
Netscape, any Gecko based browser should work fine.

HTH

Keith Roberts

-----------------------------------------------------------------
Websites:
http://www.karsites.net
http://www.raised-from-the-dead.org.uk

All email addresses are challenge-response protected with
TMDA [http://tmda.net]
-----------------------------------------------------------------

On Thu, 3 Jan 2008, Rajeev Lochan wrote:

> To: Seaside - general discussion <[hidden email]>
> From: Rajeev Lochan <[hidden email]>
> Subject: Re: [Seaside] Print only a particular div
>
> Thanks Philippe for correcting me.
> After some modifications the Js code is
>
>
> printwindowJs
> ^ '
> function chkstate(){
> if(document.readyState=="complete"){window.close()}
> else{setTimeout("chkstate()",2000)}}
>
> function print_win(){
> window.print();chkstate();}
>
>
> function printContent(id){
> str=document.getElementById(id).innerHTML
> newwin=window.open
> ('''',''printwin'',''left=100,top=100,width=400,height=400'')
> newwin.document.write(''<HTML>\n<HEAD>\n'')
> newwin.document.write(''<TITLE>Print Page</TITLE>\n'')
> newwin.document.write(''</HEAD>\n'')
> newwin.document.write(''<BODY onload="print_win()">\n'')
> newwin.document.write(str)
> newwin.document.write(''</BODY>\n'')
> newwin.document.write(''</HTML>\n'')
> newwin.document.close()
> }
>
> '
>
> Now, I am getting a popup browser with the div rendered in
> it. But the automatic printerSelection menu is not coming.
> I hope I am closer than last time.
>
> Regards,
> Rajeev

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Rajeev Lochan

Re: Print only a particular div

Hi Keith,
I use FireFox, IE6, IE7 and Safari on WinXp simultaneously. The code in previous mail didnt seem to work in any. The Js code was further simplified as below.

printwindowJs
^ '

function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('''',''printwin'',''left=100,top=100,width=400,height=400'')
newwin.document.write(''<HTML>\n<HEAD>\n'')
newwin.document.write(''<TITLE>Print Page</TITLE>\n'')

newwin.document.write(''</HEAD>\n'')
newwin.document.write(''<BODY onload="window.print()">\n'')
newwin.document.write(str)
newwin.document.write(''</BODY>\n'')
newwin.document.write(''</HTML>\n'')
newwin.document.close()
}

'

This time the popup was rendered perfectly and PrinterSelector popup window is also displayed. When I take a print(virtual printer), only 'Print Page' (title of the browser) and url info is printed.
Somehow "str" is not passed on to printer. I changed that line to

newwin.document.write(''FooBar'')

and then when print button is triggered, I get 'PrintPage' and FooBar also in the printout.

After all these, modification of our own #popupAnchor seemed a nice option and following is a working code :)

MyRoot>>renderContentOn: html

html div id: 'div1'; with: [ ........... ].
html div id: 'div2'; with: [ ........... ].
html div id: 'div3'; with: [ ........... ].
html div id: 'div4'; with: [ html render: self model. " an Instance Variable "
                                  html popupAnchor name: 'PrintList';
                                                extent: 800 @ 600;
                                                toolbar: true;
                                                scrollbars: true;
                                                resizable: true;
                                                menubar: true;
                                                callback: [self printPopup]
                                  ]

MyRoot >> printPopup
    | temp |
    temp := MyPopupPrintView new.
    temp model: self model.
    WARenderLoop new call: temp

MyPopupPrintView>>renderContentOn: html

html render: self model.
html image url: '/seaside/files/MyLibrary/logo.jpg'; onLoad: 'window.print();'.

This is the Catch. From
http://www.w3schools.com/jsref/jsref_onload.asp

onLoad can be used with <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

and I preferred an image to trigger window.print()

Can anyone enlighten on how <body> tag could have been used in the above #popupAnchor method.

Alas, something is working for me. I have also figured out another way to print a particular(predefined) div element as hinted at

http://www.ozzu.com/ftopic32846.html
and
http://www.w3.org/TR/2003/WD-CSS21-20030915/media.html#at-media-rule

Shall try to share it when possible. Looks like I can start a Blog with whatever little knowledge I have. Till now I was hesitant because I feared if newbies would commit the mistakes which unknowingly I would have written.

Thanks again for the support and help of list members,

Rajeev

On Jan 3, 2008 12:48 AM, Keith Roberts <[hidden email]> wrote:

I think you may need to specify the chrome for the new
window, possibly the main window toolbar. See this link for
more details:

http://www.w3schools.com/htmldom/met_win_open.asp

What browser are you using? Have you tried Firefox or
Netscape, any Gecko based browser should work fine.

HTH

Keith Roberts

-----------------------------------------------------------------
Websites:
http://www.karsites.net
http://www.raised-from-the-dead.org.uk

All email addresses are challenge-response protected with
TMDA [http://tmda.net]
-----------------------------------------------------------------

On Thu, 3 Jan 2008, Rajeev Lochan wrote:

> To: Seaside - general discussion <[hidden email]>
> From: Rajeev Lochan < [hidden email]>
> Subject: Re: [Seaside] Print only a particular div
>

> Thanks Philippe for correcting me.
> After some modifications the Js code is
>
>
> printwindowJs
> ^ '
> function chkstate(){
> if(document.readyState=="complete"){window.close()}
> else{setTimeout("chkstate()",2000)}}
>
> function print_win(){

> window.print();chkstate();}
>
>
> function printContent(id){
> str=document.getElementById(id).innerHTML
> newwin=window.open
> ('''',''printwin'',''left=100,top=100,width=400,height=400'')
> newwin.document.write(''<HTML>\n<HEAD>\n'')
> newwin.document.write(''<TITLE>Print Page</TITLE>\n'')
> newwin.document.write(''</HEAD>\n'')
> newwin.document.write(''<BODY onload="print_win()">\n'')
> newwin.document.write(str)
> newwin.document.write(''</BODY>\n'')
> newwin.document.write (''</HTML>\n'')
> newwin.document.close()
> }
>
> '
>
> Now, I am getting a popup browser with the div rendered in
> it. But the automatic printerSelection menu is not coming.
> I hope I am closer than last time.
>
> Regards,
> Rajeev
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside