Top SEM and SEO Tips    

Archive for the ‘Web Design and Development’ Category

Save HTML Table to Excel using jQuery

Friday, November 7th, 2008

After a few hours work looking into this, this turned out really easy to implement using jQuery and server side PHP programming as follows:

On the client side the following HTML code needs adding to the page (note this is older code – for newer code follow link at bottom):

<form action="/SaveToExcel.php" method="post" target="_blank"
onsubmit='$("#datatodisplay").val( $("&lt;div&gt;").append( $("#ReportTable").eq(0).clone() ).html() )'>
<input  type="image" src="/images/icons/Floppy-48x48.png" width="12" height="12" >
<input type="hidden" id="datatodisplay" name="datatodisplay" />
</form>

Note – variables used above – ReportTable is the id of the table you want to save and datatodisplay is a hidden variable used to post the table to the server.

The jQuery commands were added to the form’s onsubmit event but could easily be in your $(function(){}); fuction

The hard part here was getting all of the <table> HTML code. The standard jQuery .html() command gets the innerHTML and was cutting off the <table> HTML code. Getting all the HTML code was accomplished using the code $(“#datatodisplay”).val( $(“<div>”).append( $(“#ReportTable”).eq(0).clone() ).html() ) which effectively gets the outerHTML of the named HTML object (in this case the table we want to save to excel).

On the server side create a file called’SaveToExcel.php’ and add the following code:

<?php
header("Content-type: application/vnd.ms-excel; name='excel'");

header("Content-Disposition: filename=export.xls");
// Fix for crappy IE bug in download.
header("Pragma: ");
header("Cache-Control: ");
?>
<html>
<head></head>
<body><?=$_REQUEST['datatodisplay']?>
</body>
</html>

Updated: April 8, 2010 – modified to add fix for crappy IE download bug.
Update: September 11, 2011 – new version of jquery save to excel javascript code at http://www.topsemtips.com/2011/09/jquery-save-to-excel-ii/



More on PHP Error Handling

Wednesday, September 24th, 2008

OK so I’ve been talking about PHP errors for a while now but one more post. I found some code for customizing error handing in PHP , I installed it and got overwhelmed with emails reporting errors on my sites. I had to spend most of yesterday fixing issues on my sites. Most were minor issues of course – the worse is using uninitialized variables such as $ret = $Data['notset']; where the value in $Data hasn’t been set. In reality the code works and its being pedantic but it still needs fixing with:

$ret = isset( $Data['notset'] ) ? $Data['notset'] : “” ;

But some reports were real errors, such as unitialised variables that needed a value, referencing arrays using -> instead of [], and other nasties. Some I can do nothing about – WordPress plugins seem to be especially bad for using uninitialised variables. For now I’m using the code on custom applications and avoiding WordPress.



Typical Lazy PHP Programmer

Wednesday, August 27th, 2008

That’s me, write a program and it works, don’t bother initializing variables, etc. That was until I moved to a new host that had display errors turned off. It is pretty much impossible to debug without errors being displayed so I went rummaging around for ways around this and found the following code:

error_reporting(E_ALL);
ini_set(“display_errors”,1);

I turned this on and suddenly the code was spitting out warnings and messages all over the place. Some trivial but some really fixed issues that I didn’t know. Now I’ve got it turned on all the time in development and on internal systems.

As the ‘Practical PHP Programming’ manual says:
Always set your PHP error level to the most verbose level, E_ALL. All too often people don’t realise that PHP is outputting various complaints about variables not being set, etc, which you can just do away with entirely by cleaning up your code.



Make WordPress Mobile Friendly

Tuesday, July 15th, 2008

Following on my theme for this week, here are the steps to make WordPress mobile friendly. This assumes you are using a separate URL for your mobile friendly wordpress (such as sitename.mobi):

1 – Buy your domain and park it on your current WordPress site, so sitename.com and sitename.mobi are generating the same content

2 – Add (or modify) the file /wp-content/themes/yourtheme/functions.php and add the following lines:

<?php
remove_action(‘template_redirect’, ‘redirect_canonical’);

function elixir_urlrewrite( $url ) {



Making Your Site Mobile Friendly – CSS

Tuesday, July 8th, 2008

CSS is vitally important in making your site mobile ready. I ended up making 3 CSS media sections in one CSS file:

  • @media screen – contains all the CSS positioning informaiton, font sizes needed for the screen, etc.
  • @media handheld – the CSS for handhelds. This removed a lot of unneeded parts of the screen (footer text), and doesn’t include positioning information.
  • @media print – CSS for when the page is printed. This changes the font size for printing, labels links for printing, turns off unnecessary navigation (left hand menus, footer, etc) and anything else to make your site look good when printed.

All CSS for these sections should be contained within curly brackets {}

@media print{



Making Your Site Mobile Friendly

Thursday, July 3rd, 2008

Setting up CSS for mobile phones is easy enough but what about modifying your site to handle these users. Considering the total people using a mobile phone to surf in a business environment is minimal so you want to minimize the additional webmaster time spent supporting this implementation.

I found this script at http://www.brainhandles.com/2007/10/15/detecting-mobile-browsers/



We are the Web: The Field and What it Means

Friday, December 2nd, 2005

But my Grandmother worried that Amah might be poisoning my mind.