Solved

Hiding a button during a function

Posted on 2007-03-22
9
398 Views
Last Modified: 2013-11-23
I've got some Java Script with a button...

<button id="but1" onclick="doFmt();factory.printing.Print(false)">Print</button>

<script defer>
function doFmt() {
factory.printing.Printer = "SATO CX400"
  factory.printing.SetMarginMeasure(2) // set inches
  factory.printing.header = ""
  factory.printing.footer = ""
  factory.printing.portrait = true
  factory.printing.leftMargin = .5
  factory.printing.topMargin = .01
  factory.printing.rightMargin = .01
  factory.printing.bottomMargin = .01
  factory.printing.copies = 1
  factory.printing.printBackground = true
  factory.printing.paperSize = "Index Card"
}
</script>

How do I hide the button until the function is complete, and then make it reappear?



TIA
0
Comment
Question by:Mike Miller
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 9

Expert Comment

by:smidgie82
ID: 18774290
This is a slightly more user-friendly version:

<button id="but1" onclick="doFmt();factory.printing.Print(false)">Print</button>

<script defer>
function doFmt() {
var temp = document.getElementById('but1').text;
document.getElementById('but1').disabled = 'true';
document.getElementById('but1').text = 'Please Wait';
factory.printing.Printer = "SATO CX400"
  factory.printing.SetMarginMeasure(2) // set inches
  factory.printing.header = ""
  factory.printing.footer = ""
  factory.printing.portrait = true
  factory.printing.leftMargin = .5
  factory.printing.topMargin = .01
  factory.printing.rightMargin = .01
  factory.printing.bottomMargin = .01
  factory.printing.copies = 1
  factory.printing.printBackground = true
  factory.printing.paperSize = "Index Card"
document.getElementById('but1').text = temp
document.getElementById('but1').disabled = 'false'
}
</script>

If for some reason the function fails, or throws an exception, or for whatever reason doesn't execute normally, however, the button will not be re-enabled.

I'd recommend wrapping your printer calls in a try{} block.  That way you can add some more user-friendly exception handling as well, and guarantee that regardless of whether the document prints, the button is re-enabled.  for instance:

var temp = document.getElementById('but1').text;
document.getElementById('but1').disabled = 'true';
document.getElementById('but1').text = 'Please Wait';
try
{
factory.printing.Printer = "SATO CX400"
  factory.printing.SetMarginMeasure(2) // set inches
  factory.printing.header = ""
  factory.printing.footer = ""
  factory.printing.portrait = true
  factory.printing.leftMargin = .5
  factory.printing.topMargin = .01
  factory.printing.rightMargin = .01
  factory.printing.bottomMargin = .01
  factory.printing.copies = 1
  factory.printing.printBackground = true
  factory.printing.paperSize = "Index Card"
}
catch(e)
{
alert("something unexpected happened");
}
document.getElementById('but1').text = temp
document.getElementById('but1').disabled = 'false'
0
 

Author Comment

by:Mike Miller
ID: 18774910
smidgie...

It printed ok, but the button was on what i printed. i can't tell if the disabled worked or not from what i printed, but i want it gone completely when it prints.
0
 

Author Comment

by:Mike Miller
ID: 18774919
here's what i tried


<button id="but1" onclick="doFmt();factory.printing.Print(false)">Print</button>

<script defer>

function doFmt() {
var temp = document.getElementById('but1').text;
document.getElementById('but1').disabled = 'true';
document.getElementById('but1').text = 'Please Wait';
try
{
factory.printing.Printer = "SATO CX400"
  //factory.printing.SetMarginMeasure(2) // set inches
  factory.printing.header = ""
  factory.printing.footer = ""
  factory.printing.portrait = true
  factory.printing.leftMargin = .5
  factory.printing.topMargin = .01
  //factory.printing.rightMargin = .01
  factory.printing.bottomMargin = .01
  factory.printing.copies = 1
  factory.printing.printBackground = true
  //factory.printing.paperSize = "Index Card"
}
catch(e)
{
alert("An unexpected error has occurred.");
}
document.getElementById('but1').text = temp
document.getElementById('but1').disabled = 'false'
}
</script>
0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 8

Expert Comment

by:bebonham
ID: 18776719
<script defer>
function doFmt() {
document.all('but1').style.visibility="hidden"
window.print();
document.all('but1').style.visibility="visible"
}
</script>

//or you can put ur factory.printing stuff back in there instead of window.print() I used for testing.
no button shows on my print.
0
 

Author Comment

by:Mike Miller
ID: 18779548
here's what i've got...

<button id="but1" onclick="doFmt();factory.printing.Print(false)">Print</button>

<script defer>
function doFmt() {
document.all('but1').style.visibility="hidden"
factory.printing.Printer = "SATO CX400"
  //factory.printing.SetMarginMeasure(2) // set inches
  factory.printing.header = ""
  factory.printing.footer = ""
  factory.printing.portrait = true
  factory.printing.leftMargin = .5
  factory.printing.topMargin = .01
  //factory.printing.rightMargin = .01
  factory.printing.bottomMargin = .01
  factory.printing.copies = 1
  factory.printing.printBackground = true
  //factory.printing.paperSize = "Index Card"
  document.all('but1').style.visibility="visible"
}
</script>


but the button is still visible when printing :-(
0
 

Author Comment

by:Mike Miller
ID: 18780142
I think I know what's going on. This is on an ASP page. When the page gets posted back, I guess the page rerenders with the print button in tact. Is there any way around this?
0
 
LVL 8

Expert Comment

by:bebonham
ID: 18780342
Actually, it is likely that it has to do with the factory objects method of printing (although I don't know for sure)

What would help is if you could post the page somewhere where we can test it.
Just out of curiosity, did it work the way I originally posted it, with the window.print instead of the factory stuff?

0
 

Author Comment

by:Mike Miller
ID: 18780370
I took out the factory stuff and just did the visibility stuff...worked fine.

I can't post it anywhere either because all that factory stuff is getting the print commands from an active x control on a server at my job. The control was purchased, and I don't have licensing for any other domains.
0
 
LVL 8

Accepted Solution

by:
bebonham earned 500 total points
ID: 18781727
okay, well, I think we are kind of at an impasse, at least as far as this way is concerned.

If it is really important to not have the button, you can have the print button open up the same page (differnt url obviously), but without the button in a new window then put your script with the factory stuff at the bottom of the page after all the html (or trigger the function from the body onload event).  In any case, you just make a copy of the page you have now, and take out the <button> and have the script that prints run on the load. That page gets open by the page u already have.
then maybe you have some code that closes the window.  Let us know if you need further assistance.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question