Top SEO Tips » jQuery

jQuery – Add a default button to a page

Dylan — Mon, 29 Dec 2008 21:59:10 +0000

Normally in HTML you can add a ‘input type=”submit”‘ to a page and it acts as a default button. However this only works if the input tag is within a ‘form’. I was using AJAX and found that adding a form caused the AJAX to fail. Instead I ended up with the following code:

$(‘input’).keyup(function(e) {
//alert(e.keyCode);
if(e.keyCode == 13) {
$(‘#btnSubmit’).click() ;
}
});

This adds to all input fields a keyup function that checks for the enter key and if found calls the click function on the button I want to use as the default button – in this case it’s an input button called ‘btnSubmit’.

Post from: Top SEO Tips

jQuery – Add a default button to a page

jQuery Automatic Trim of Input Fields

Dylan — Tue, 23 Dec 2008 16:59:52 +0000

Really common task with a really easy solution

$(function()
{
$(“input”).change( function() { $(this).attr(“value”, $.trim( $(this).attr(“value”) ) ) });
});

This attaches a function to the ‘change’ event of all tags. When the input field is changed it uses the built in ‘trim()’ function of jquery to trim off whitespace.

Post from: Top SEO Tips

jQuery Automatic Trim of Input Fields

Save HTML Table to Excel using jQuery

Dylan — Fri, 07 Nov 2008 18:47:08 +0000

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:

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

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 
 HTML code. The standard jQuery .html() command gets the innerHTML and was cutting off the 
 HTML code. Getting all the HTML code was accomplished using the code $(“#datatodisplay”).val( $(“”).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: ");
?>





Updated: April 8, 2010 – modified to add fix for crappy IE download bug.
Post from: Top SEO Tips

Save HTML Table to Excel using jQuery
Related posts:
jQuery Automatic Trim of Input Fields
HTML Meta Tags – What are they and how do you use them on your website?
jQuery – Add a default button to a page
The Importance of Clean HTML Code
Issues Creating and Downloading File in IE from PHP