Just print!

In my ePoS system project, I have the need to open a popup with javascript and print the contents without seeing the dialog box.

Everywhere I searched, there were the ‘you don’t wanna do that because….’ from know it all keyboard warriors saying it was bad because evil doers could send porn to your printer.

What about intranets and web apps?

Finally, I figured it out and as long as you’re using Firefox and you have access to it then you’re ready to make it print without a nasty dialog…

• Open firefox and put about:config in the address bar and press enter (you will need to click the button that shows to say you know what you’re doing)
• Type print.always_print_silent in the filter box at the top
  If you have an entry already there and it is set to false just right click it and choose ‘toggle’ to set it to true.
  If there is no entry there already then follow on…
  • right click the screen and choose New->boolean
  • enter print.always_print_silent as the preference name when asked and press enter
  • set boolean value to true and press enter

That’s it, you will no longer see the dialog box when you print. Beware though, it will try to print to the last printer you used when you had the dialog box open. If you ever need to change it then you will need to toggle the value for print.always_print_silent by following the above steps.

Open a javascript popup and print the contents

Now you can print without dialogs, you can use the following code to open a popup window and print it.

open the popup


windowname = window.open('url.html','name',options);


the options you have available are:

For example, to open a pop window showing the file called example.html with no menu bar, with a width of 430 pixels, height of 700 pixels, no toolbar, with scrollbars and with the window you would use this command


winname = window.open('/example.html','newwin','menubar=no,width=430,height=700,toolbar=no,scrollbars=yes,screenX=300');


To close that window, you can add this


winname.close();


To print the window, you can add this to the example.html page


self.print();


or to print it from the calling page, you might need to pause for a little while before issuing the print command so it has time to load the page content first..


setTimeout("winname.window.print();",500);


All the commands need to be within <script> /script tags

Here’s a little line of javascript that will work in Firefox to reveal the * characters in an auto populated password field. Just paste the following code into your browser address bar whenever you see an asterisked form field and press enter..

 javascript:var els = document.getElementsByTagName('input'); for(var x=0; x<els.length; x++){ if(els[x].type.toLowerCase() == 'password' ){ var test = els[x].type = 'text';}} 

Useful if if you want to access your sisters email account you forget a password that gets auto filled.

I spent a large part of last weekend coding some changes to CommentLuv, well, changing the way it can be called and how it displays posts and such. Here’s a little preview of what sort of thing it can do on a dummy form, let me know if it can’t pick up your last post or if you experience any issues with it…

This is running as just javascript and jquery without using any of the wordpress core functions and it should work on standard forms on sites that don’t have PHP enabled. I just need to tidy up the code and package it in an easy to install way and it’ll open up CommentLuv to many more platforms…yey!

I’m not 100% sure yet but this could mean a blogspot commentluv plugin, I’m trying some experiments now and so far the results are promising…

This is part 5 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

• Part 1 – An introduction to AJAX
• Part 2 – Hello world!
• Part 3 – The Object of my desire
• Part 4 – Are you ready?

Hurrah! this tutorial will actually download some data (yey!) We will use everything we have learned so far and add just a little bit that will allow us to download data from the server and put it somewhere on the page without a refresh. (I know, you must have goosebumps!)

XMLHttpRequestObject.send(null);

We need this command to initiate the object send. We created an object, created a place for the data to go, we created a routine to wait patiently for the object to be ready and sent the object to the data source using the above command. The patient routine for the waiting will take the response to the data source and put it in the div we created in the HTML of the page.

We can replace the bit from the last bit of complete code (on part 4) with this command and instead of it saying it’s ready to download, it will actually do the fetching for the obj.innerHTML=XMLHttpRequestObject.responseText; which is called when the readyState and Status are ok.

[HTML]

var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open(“GET”, dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}

Fetching data with Ajax

[/HTML]

I’ll try and make this code easier to understand with a picture using pretty colours!

The blue bit gets called when the user clicks the button, if the object was successfully created then create a routine that ‘listens’ to the objects readyState and status. Then the XMLHttpRequestObject.send(null); command does the action and when that goes ahead and activates XMLHttpRequestObject.open(“GET”, dataSource); which goes off and gets the data pointed to by dataSource which of course changes the objects status and readyState. When it is at what we want, we inject the responseText to the div pointed to by divID.

Simple! :-/

You can see it in action here

Exciting huh? LOL . It’ll display anything that is in the oranges.txt file, not much use yet but at least we know we can fetch data!

What if, instead of displaying the contents of a text file, we used a php script to ‘echo’ out something?.. replace oranges.txt with this code..

[PHP]
echo “these are some oranges created by php!”;
echo “
ooooooooooooooooooooooooooooooooo”;
?>
[/PHP]

(don’t forget to enclose any php script with <?php and ?> or it wont work – I cant put them in here otherwise it will run the script instead of showing the code. Also, change the onclick event in the html to call oranges.php (if you saved the php with that name) instead of oranges.txt

You can see that in action here

There may be a pause between you clicking and the message being displayed. We can let the user know that something is happening by adding another if condition to look for a readyState of 1 (loading) and displaying the message “off to get oranges…” like this..

if (XMLHttpRequestObject.readyState == 1)
{
	obj.innerHTML="off to get oranges...";
}

we just chuck that into the anonymous function that is called when the readyState changes…

XMLHttpRequestObject.onreadystatechange = function()
          {
            if (XMLHttpRequestObject.readyState == 4 &&
              XMLHttpRequestObject.status == 200) {
		obj.innerHTML=XMLHttpRequestObject.responseText;

            }
	    if (XMLHttpRequestObject.readyState == 1)
	    {
	 	obj.innerHTML="off to get oranges...";
	    }
          }

See that in action here

You can download all the files used in this tutorial here.

Now we’re getting somewhere! But, what if we want to send data to the php file so it can do something more than print a hardcoded message?
Actually, it’s quite easy! come back next week to see the final part where we’ll send something to the php file and have it send back something it made with what we sent. (it could be a username or contents of a text field – think form validation!)

You can subscribe to my feed with the button at the top right of this blog or add your email to the box on the sidebar of the main page to subscribe by email. I hope you can come back and learn a bit more, enough at least to make your own php script and AJAX page….

This is part 4 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

• Part 1 – An introduction to AJAX
• Part 2 – Hello world!
• Part 3 – The Object of my desire

In this part of the tutorial series we will get ready to rumble! download data using the object we created in the last part…

onreadystatechange

What the hell is that? lol, it’s not move states when you’re ready.. it’s what we use on the object we created to see what state it is in, the different states are:

• 0 – Uninitialized
• 1 – Loading
• 2 – Loaded
• 3 – Interactive
• 4 – Complete

We can check for an objects state to see where it’s at to decide if we can output the result or not, we can combine this with a test for the HTTP status of a download to see if it was successful, we can check for a value of 200 which means everything went ok. (a value of 404 would mean file not found just like normal HTTP status codes).

To use the readystate property, just bang it on the end of the object name and put that in an ‘if’ statement. Ie…

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{do something}

(the && means AND, so we check the readystate AND the status, if they are BOTH correct then execute the code in the curly brackets)

To put that in the code of the last tutorial, replace the bit that outputs the message about the oranges box being collected with an anonymous function that is attached to the objects readystate. It’s not named an anonymous function because it has a secret identity, it is just a nice way of running a function with no name when a certain thing happens like the objects’ readystate being changed.

For example, if we put
XMLHttpReqestObject.onreadystatechange = function()
{
do something
}


We have attached the onreadystatechange to the object we created, as soon as that objects readystate has altered, the anonymous function takes action and executes the commands contained in the curly brackets ({do something }).

That’s exactly where we put the test to see what the HTTP status and readystate number is. Ie.

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
data downloaded, do something with it...
}
}

You may have noticed little graphics that are synonymous with web 2.0 and AJAX ( ). You can add one of those to let the user see something is happening. In the code above, you can check for a readyState of 1 (loading) and add some text like this:

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 1)
{
obj.innerHtml="Loading...";
}

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
data downloaded, do something with it...
}
}

The FiddyP amazing analogy:
Last time we had created a box for the oranges that we want from the AJAX shop
XMLHttpRequestObject = new XMLHttpRequest();
then we opened it and sent it to the AJAX shop with a label of what we want.
XMLHttpRequestObject.open("GET", dataSource);
And we wait for the signal that the box we sent was filled ok and ready to go
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)

Your whole code will now look like this…

    <title>FiddyP AJAX Tutorial Series Part 4</title>

      var XMLHttpRequestObject = false;
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
      function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);

          XMLHttpRequestObject.onreadystatechange = function()
          {
            if (XMLHttpRequestObject.readyState == 4 &amp;&amp;
              XMLHttpRequestObject.status == 200) {
            }
          }
	   obj.innerHTML = "Ready to download";

        }
      }

    <h1>Fetching data with Ajax</h1>
    <form>

    </form>
    <div id="targetDiv">
      <p>The fetched data will go here.</p>
    </div>

OK, so you have your box at the AJAX shop full of oranges.txt, next tutorial we’ll do something with the oranges…

If you’ve been following the other tutorials then the code above shouldn’t be so hard to understand (shyeah right!), it’s just a bit more added to what we’ve already covered. You can copy the code from above and try it out yourself or you can click here to see it in action (hold on to your hat )

We’re still in the AJAX starting blocks waiting for the bang to start us on the AJAX runway but don’t despair, next tutorial we will actually download data from a server and display it on the page without a reload which is what AJAX is all about. Once we can actually display the data, we can start doing things with it and then we can start to make pretty little scripts that do amazing things like count the amount of times a pink box has been clicked. hehehe, we’ll do more than that I promise!

This is part 3 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

• Part 1 – An introduction to AJAX
• Part 2 – Hello world!

In this part of the tutorial series we will open the object that you created in the last tutorial. So far, we have created an object to handle the data and made sure it is created in whatever browser you are using. Now, if we want to work with the created object, we need to open it…

Open The XMLHttpRequest Object

Opening the object prepares it for use to fetch the data from a server, the act of opening the object doesn’t actually fetch any data yet.

The FiddyP amazing analogy :- Imagine you created a page to collect a box of oranges from the local AJAX fruit shop. In the last tutorial, you created the box (object), now you need to open it so the AJAX oranges can fit inside…

The open comand: [square brackets] = optional arguments.

open("method", "url" [, asyncFlag[, "username"[, "password"]]])

Explanation:

• method is the HTTP method to use when opening the connection. It can be ‘GET’, ‘POST’, ‘PUT’ or ‘HEAD’
• url is the URL you want to download from
• asyncFlag is a Boolean (one or the other) value used to indicate that the call is asynchronous. (no waiting for it to finish)
  This defaults to TRUE or 1 so is not needed unless you want to specify that the page waits for completion.
• username is if you need a username to access the page identified by URL
• password is for a password if it’s required.

Make sense? lol, maybe not. Here’s how it looks in use:

XMLHttpRequestObject.open("GET","oranges.txt");

We just add the open bit of code on to the end of the name of the object we created. Here’s an example page where we create a form in HTML and add a button for the user to click to open a remote file on the server with AJAX. Because AJAX uses CSS to change elements of the page, we need to create a <div> on the page to show the data we retrieve from the remote file. We’ll also have to create a function to take action when the button is clicked (we can’t do it the normal way with the <form> action because that would cause the page to reload).

Here’s the form and div html:

<form>

</form>

<div id="targetDiv">
  <p>The oranges box will go here.</p>
</div> 

You can see that the button has an ‘onclick’ event. That’s the javascript bit that calls the function when the button is clicked. The <div> has an id so the function will know where to put the collected data.

The javascript function is held in the <head> part of the document;

function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);

          obj.innerHTML="Oranges Box Opened!";
        }
      }

The function is called with the name of the data file we want (dataSource) and where to put the output (divID)
The first line checks if the XMLHttpRequestObject was created (we did that last time so you know it should get to this point)
If it finds that the object was created, it moves on to set the variable obj to the <div> we created by using getElementByID
Next, we use the open command on the object we created earlier, set the option to GET and point it to the external data file we specified when calling the function.
Once that is done, we can output a message to the <div> we assigned to the variable obj by using .innerHTML=

We’ll just put this function in place of the “hello world” message that we put in the last tutorial..

The whole code looks like this…

    <title>FiddyP AJAX tutorial, open the object</title>

      var XMLHttpRequestObject = false;
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

      function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);
          obj.innerHTML="Oranges Box Opened!";
        }
      }

    <h1>Fetching data with Ajax</h1>
    <form>

    </form>
    <div id="targetDiv">
      <p>The Oranges box will go here.</p>
    </div>

You can copy the contents of the HTML shown above and save it as a HTML file, you can also create a file called oranges.txt and put it in the same directory as the HTML file. (it doesn’t matter what is in the text file as we wont be doing anything with it other than to open it). Open the HTML file in your browser and try it yourself or click here to see it in action if you can’t wait.

That’s it for this week, we’re still not doing anything major yet but, be happy! we have so far, created an object and opened it. YEY! come back for part 4 where we will prepare to download information from the file we opened. (oh, I bet you can’t wait!!)

beep beep w00t!

This is part 2 of the AJAX Tutorial Series. You can see the Beginners AJAX Tutorial Part 1 here.

In this part, we will start you off with some very simple code just to show you how things get started. At the end of this tutorial you will have made your own ‘hello world’ AJAX script… (not a big deal I know, but you have to start somewhere!). I’ll keep these tutorials bitesize and introduce a new command or concept on each tutorial to add to what has already been covered. Today, we start at the beginning with something that will be in all future scripts…

The XMLHttpRequest Object

The what?
The XMLHttpRequest object is at the heart of AJAX. It allows you to send and receive data with javascript without refreshing the page and works on all browsers (except, you guessed it! Internet Explorer). All you have to do is find out if the browser supports it with an ‘if’ statement in the javascript contained in the <head> part of the html page and then create a XMLHttpRequest object using the ‘new’ command;

if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();}

That would create a XMLHttpRequest object and store it in XMLHttpRequestObject.

But, what about Internet Explorer?.. We can’t use XMLHttpRequest so we have to use an ActiveXObject. For us to do anything with an XMLHttpRequest and make sure it works on both IE and Firefox, we can add this to the javascript so we now have..

if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

OK, that should cover us for making a XMLHttpRequest object, we can’t do anything in this tutorial series without it so to be sure, lets just create the whole html document and test to see if it can make an object by adding another ‘if’ statement to output some text to the screen if the object creation was successful using the javascript command ‘document.write()’.

    <title>FiddyP Ajax Tutorial Part 2 - Test object creation</title>

      var XMLHttpRequestObject = false;

      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

      if (XMLHttpRequestObject) {
        document.write("<h1>Hello World! I Created an Object!</h1>");
      }

You can click on the title of the code snippet above and see the plain text version, just copy this to your own file and save it as an HTML document or right click here and save it and test it. If it’s working, it will display the message “hello world! I created an object!” in big letters.

YEY! we created a ‘hello world’ AJAX program!, I know it’s not much use yet but this is the foundation for all future tutorials so even thought it’s not that ‘sexy’ , it IS important to make sure we can create the object that will handle the data being sent to and received from a remote file.

We can get into the sexy ins and outs of using this on the next tutorial. Please come back again to see how we can use this to open a remote file and display it’s contents on a HTML page without a reload…(ooh, I can’t wait….)

please see – http://www.fiddyp.co.uk/animated-div-slide