Tuesday, August 31, 2010

Mysql insert multiple/batch of rows using single query

You don't need to loop a mysql insert query to add multiple records to a table. mysql insert support multiple inserts in one query.

Let say you have a table called students with two fields fname and age.

insert into students (fname, age) values
('Kusal', '26'),
('Tom', '18'),
('Ann', '23')

Remember to give the column names in the query.

Quick, Simple and Easy Image Gallery Using jQuery

This is a simple image gallery I wrote for a project. Its small and easy to implement. Ideal if you need to build a simple and quick gallery.
You can improve the code by adding a loading.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to add table rows using jQuery</title>
<style>
.thumb{vertical-align:top; padding:2px; border:1px #CCC solid;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

$(document).ready(function(){    
    
    $(".image").click(function() {    
        //$('#main').hide();
        var image = $(this).attr("href");
        $('#main').attr("src", image);
                
        $('#main').load(function() {            
              $('#main').fadeIn('slow');
        });
        
    return false;
    });
});    

</script>
</head>

<body>
<a href="images/image1.jpg" class="image"><img alt="Image1" src="thumb/image1.jpg" class="thumb" border="0"/></a>
<a href="images/image2.jpg" class="image"><img alt="Image2" src="thumb/image2.jpg" class="thumb" border="0"/></a>
<a href="images/image3.jpg" class="image"><img alt="Image3" src="thumb/image3.jpg" class="thumb" border="0"/></a>
<a href="images/image4.jpg" class="image"><img alt="Image4" src="thumb/image4.jpg" class="thumb" border="0"/></a>
<div id="container" style="height:400px; padding-top:20px;"><img id="main" src="images/image1.jpg" /></div>

</body>
</html>


View Demo


Sunday, August 29, 2010

Wait till a dynamically loaded image fully load using jQuery

I had this problem when I was creating simple jQuery gallery with thumbs. Once the thumb is clicked I wanted to wait till the image is fully loaded until I called the fadeIn.
we can use jQuery load to achieve this.

$('#image').hide();
$('#image').attr("src", image); //next image path
//still in hide
$('#image').load(function() {    
    $('#image').fadeIn('slow');
});        


How to round numbers in JavaScript

JavaScript number rounding is done using Math.round
This will round a given number to the nearest whole number

<script type="text/javascript">

var number = 100.58;
number = Math.round(number);
alert(number); //101

</script>


If you do need some decimal points preserved, following code will round the number to the nearest tenth.

<script type="text/javascript">

var number = 100.58;
number = Math.round(number*10)/10;
alert(number); //100.6

</script>


Javascript Go Back Link With History

Here is a really easy way to add a go back link to your page navigation.
This code uses JavaScript to get the browser history for the specific site.

<a href="#" onClick="history.go(-1)">Back</a> 
<input type=button value="Back" onClick="history.go(-1)">


You can change the -1 to any number of pages you need to go back in history :D

Thursday, August 26, 2010

How to add table row (tr) using jQuery

I think the easiest method is to find the last tr and insert the new row after the last tr.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to add table rows using jQuery</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>

$(document).ready(function(){    
    
    $('#add').click(function(){
                
        $('#my_tbl tr:last').after('<tr><td>&nbsp;</td><td>&nbsp;</td></tr>');        
    });
});    

</script>
</head>

<body>

<table id="my_tbl" border="1" cellpadding="1" cellspacing="1">
    <tr>
        <td> Head1 </td>
        <td> Head2 </td>
    </tr>
</table>

<br />

<input type="button" id="add" value="Add Row" />

</body>
</html>

View Demo

The only place where this code does not work is when there are no tr's in the table to start with. If that is the case you can always add a dummy <tr></tr> block to the top to start with.

Please comment if you know a better solution.

Monday, August 23, 2010

Best way to get all rows in a mysql table - mysql_num_rows() or count()

Normally there are two ways to get the total number of rows in a mysql table.

$result = mysql_query("select count(id) from table");
$data = mysql_fetch_array($result);
$all_rows = $data[0];

Or

$result = mysql_query("select id from table");
$all_rows = mysql_num_rows($result);


As you have guessed the best server resource friendly method is to use mysql count() function instead of returning all the rows as a result-set to use in php mysql_num_rows() function.

Sunday, August 22, 2010

Convert html/css to pdf using php (html2pdf)

All web developers at one point will need to create pdf documents on the fly with dynamic data.
Usaully php developers go for the fpdf class. html2pdf is very effective php converter you could use in your project that convert html/css into a pdf document.

html2pdf