Archive for the ‘Jquery + Dynamic’ Category

How to check dynamic group checkbox?

April 6, 2009

Suppose that I have an admin panel and there have a content management system. And contents are belong to  categories. Each category may have lots of contents and I want to delete the contents of each category separately. To make it possible first we will make an interface so that anybody can understand what is going to be happened through this post.

<ul>

<li>
<input type=”checkbox” id=”category_id1″ />
<ul>
<li><input id=”content_id1″ name=”catgroup_id1″ type=”checkbox” /></li>
<li><input id=”content_id2″ name=”catgroup_id1″ type=”checkbox” /></li>
<li><input id=”content_id3″ name=”catgroup_id1″ type=”checkbox” /></li>
</ul>
<li> <input id=”category_id2″ type=”checkbox” />
<ul>
<li><input id=”content_id4″ name=”catgroup_id2″ type=”checkbox” /></li>
<li><input id=”content_id5″ name=”catgroup_id2″ type=”checkbox” /></li>
<li><input id=”content_id6″ name=”catgroup_id2″ type=”checkbox” /></li>
</ul>
</li>

If we extend the above code then the format becomes like below –
<ul> Content_model-&gt;getContentsByParent($category-&gt;cate_id);
?&gt;
<li> <input id=”category_&lt;?=$category-&gt;cate_id?&gt;” onclick=”checkGroupBox(‘&lt;?=$category-&gt;cate_id?&gt;’)” type=”checkbox” />
<ul>
<li><input id=”content_&lt;?=$content-&gt;content_id?&gt;” name=”catgroup_&lt;?=$category-&gt;cate_id?&gt;” type=”checkbox” /></li>
</ul>
</li>
</ul>

and after above done here is our jQuery code to check the group checkbox below –

<script type=”text/javascript”><!–
function checkGroupBox(id){
var groupname = ‘catgroup_’+id;
var checkedvalue = $(‘#category_’+id).attr(‘checked’) ? ‘checked’ : ”;
$(‘input[name=’+groupname+’]’).attr(‘checked’, checkedvalue);
}
// –></script>

You must link  jQuery core file to use this jQuery code that I have done on my some of last post. I have also used CodeIgniter’s code here and iterative looping system but you can use recursive function instead of iterative looping system which is advanced technique and more flexible. I will post some tutorials using recursive function in the future.

Advertisements

A simple trick to apply alternate css class part 1

March 27, 2009

In our professional work sometimes we  need to apply some simple trick to overcome complexity when retrieving data from database and showing those on user interface using loop.

Suppose that we have some data from database and showing them using loop on our interface like below –

First one we have designed static so that we can understand the format

<table>
<thead>
<tr>
<td> Username </td>
</tr>
</thead>
<tbody>
<tr>
<td>Shahriat</td>
</tr>
<tr>
<td>Hossain</td>
</tr>
<tr>
<td>Somel</td>
</tr>
</tbody>
</table>

Now we will apply some style here –

table tbody tr
{
background: url(../img/tbody_tr_bg.png) repeat-x left bottom;
}

After applying style we can get the output –

Shahriat
………………………. // dotted is the png image in our style
Hossain
………………………..
Somel
………………………..

Isn’t it very odd to look at our design has broken ? Certainly under Somel dotted (…..) should not be there. It will be then design broken issue. It can be solved if we keep the design static as it is adding extra class at the last row. But what about when we make it dynamic using loop retrieving data from database like below –

foreach($a as $k=>$v){
echo'<tr>’;
echo'<td>’.$v.'</td>’;
echo'</tr>’;
}

Jquery is our best friend here to solve this type of problem and now we will go with a simple example here –

$(“tr:last”).addClass(“no_bg”);

We have added a class no_bg using Jquery addClass method at the last row of table. Here (:last) is one of the Jquery basic filter which finds the last row of table. Its a single code isn’t it and after all getting out here is our complete code –

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
$(“tr:last”).addClass(“no_bg”);
});
</script>
<style>
table tbody tr {
background: url(../img/tbody_tr_bg.png) repeat-x left bottom;
}
.no_bg {
background: none !important;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td> Username </td>
</tr>
</thead>
<tbody>
<?php
foreach($a as $k=>$v){
echo'<tr>’;
echo'<td>’.$v.'</td>’;
echo'</tr>’;
}
?>
</tbody>
</table>
</body>
</html>

and the output is –

Shahriat
……………..
Hossain
…………….
Somel
// no background image (………..) here

[It may help you :)]

Refresh particular div by jquery

March 19, 2009

First we will make a customize function called getRefresh() –

function getRefresh(){

$(“#auto”).load(“data.php”, ”, callback);

}

Here we have used load( url, [data][callback] ) ajax api. This api load HTML output  from a remote file (data.php) and inject it into the div (auto). Below we have created a callback function named callback() –

function callback(){

setTimeout(“getRefresh();”, 1000);

}

setTimeout() function is used  to call getRefresh() after a specified number of milliseconds (1000). Now we can add some jquery effect to realize that the div is refreshing automatically

function getRefresh(){

$(“#auto”).fadeIn(“slow”);

$(“#auto”).load(“data.php”, ”, callback);

}

function callback(){

$(“#auto”).fadeOut(“slow”);

setTimeout(“getRefresh();”, 1000);

}

After all below is out complete code both for jquery and server scripting language –

// for jquery html

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script type=”text/javascript”>
function getRefresh() {
$(“#auto”).fadeIn(“slow”);
$(“#auto”).load(“data.php”, ”, callback);
}

function callback() {
$(“#auto”).fadeOut(“slow”);
setTimeout(“getRefresh();”, 1000);
}
$(document).ready(getRefresh);
</script>
</head>
<body>
<h1>Auto refresh div by jquery</h1>
<div id=”auto”>
Random text goes here
</div>
</body>
</html>

// for php server scripting language

// data.php

<?php
mysql_connect(“localhost”, “root”, “”);
mysql_select_db(“dbname”);
$result = mysql_query(“select * from tblname”);
while ($row = mysql_fetch_object($result)) {
echo $row->username.'<br/>’;
}
mysql_free_result($result);
?>