How to check dynamic group checkbox?

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.

A simple trick to add static content block in template

Just go to your magento admin panel and then CMS -> Static Blocks

Now click on Add New Block button below and there will be a New Block form with some required fields. Now fill up all the required fields and save. Congrats! you have created your new static block . You have an identifier for your static block that you should remember for the next step. Now you can call your static block using the code below

<?php
echo $this->getLayout()->createBlock(‘cms/block’)->
setBlockId(‘yourIdentifierNameHere’)->toHtml()
?>

at anywhere in your template. You must replace setBlockId(‘yourIdentifierNameHere‘) “YourIdentifierNameHere” with your created  Static Block’s  identifier name.

[It may help you :D]

A simple trick to apply alternate css class part 1

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 :)]

URI Routing

Uniform Resource Identifier or URI consists of a string of character used to name a resource on the Internet. The name of a resource on the Internet should be naming conventional so that Search Engine like google , yahoo, ask etc. can easily find out. And it can be possible if we arrange the URI perfectly following some rules of URI Routing. In CodeIgniter the segments in a URI normally follow a pattern like this –

http://www.mysite.com/myclass/myfunction/myparam

Suppose that we have a URL like below –

http://localhost/TestingServer/home/chidc/mid/4/sid/11/chid/12

where “http://localhost/TestingServer/”  is our BASE URL  and others are segments. If we describe the above URI following the CodeIgniter pattern –

http://localhost/TestingServer/home(myclass)/chidc(myfunction)/mid(paramname1)/4(paramvalue1)/sid(paramname2)/11(paramvalue2)/chid(paramname3)/12(paramvalue3)

Now we will apply our own routing rules to the above URL.

In CodeIgniter routing rules are defined in application/config/routes.php file.

// routes.php

<?php  if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
/*
| ————————————————————————-
| URI ROUTING
| ————————————————————————-
| This file lets you re-map URI requests to specific controller functions.
|
| Typically there is a one-to-one relationship between a URL string
| and its corresponding controller class/method. The segments in a
| URL normally follow this pattern:
|
|     example.com/class/method/id/
|
| In some instances, however, you may want to remap this relationship
| so that a different class/function is called than the one
| corresponding to the URL.
|
| Please see the user guide for complete details:
|
|    http://codeigniter.com/user_guide/general/routing.html
|
| ————————————————————————-
| RESERVED ROUTES
| ————————————————————————-
|
| There are two reserved routes:
|
|    $route[‘default_controller’] = ‘welcome’;
|
| This route indicates which controller class should be loaded if the
| URI contains no data. In the above example, the “welcome” class
| would be loaded.
|
|    $route[‘scaffolding_trigger’] = ‘scaffolding’;
|
| This route lets you set a “secret” word that will trigger the
| scaffolding feature for added security. Note: Scaffolding must be
| enabled in the controller in which you intend to use it.   The reserved
| routes must come before any wildcard or regular expression routes.
|
*/

$route[‘default_controller’] = “home”;
$route[‘scaffolding_trigger’] = “”;

/* End of file routes.php */
/* Location: ./system/application/config/routes.php */

?>

Here $route is an array by which we can specify our own routing rules. Now we are going to specify our own routing rules below –

$route[‘childmenu/([0-9]+)/([0-9]+)/([0-9]+)’] = “home/chidc/mid/$1/sid/$2/chid/$3”;

Here segments childmenu and regular expressions will be remapped to the  ‘home’ class ,  ‘chidc’ function and three params value ‘mid’, ‘sid’, ‘chid’.

By adding above code to routes.php file –

// modified routes.php

<?php  if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
/*
| ————————————————————————-
| URI ROUTING
| ————————————————————————-
| This file lets you re-map URI requests to specific controller functions.
|
| Typically there is a one-to-one relationship between a URL string
| and its corresponding controller class/method. The segments in a
| URL normally follow this pattern:
|
|     example.com/class/method/id/
|
| In some instances, however, you may want to remap this relationship
| so that a different class/function is called than the one
| corresponding to the URL.
|
| Please see the user guide for complete details:
|
|    http://codeigniter.com/user_guide/general/routing.html
|
| ————————————————————————-
| RESERVED ROUTES
| ————————————————————————-
|
| There are two reserved routes:
|
|    $route[‘default_controller’] = ‘welcome’;
|
| This route indicates which controller class should be loaded if the
| URI contains no data. In the above example, the “welcome” class
| would be loaded.
|
|    $route[‘scaffolding_trigger’] = ‘scaffolding’;
|
| This route lets you set a “secret” word that will trigger the
| scaffolding feature for added security. Note: Scaffolding must be
| enabled in the controller in which you intend to use it.   The reserved
| routes must come before any wildcard or regular expression routes.
|
*/

$route[‘default_controller’] = “home”;
$route[‘scaffolding_trigger’] = “”;

// Customized routing rules
$route[‘childmenu/([0-9]+)/([0-9]+)/([0-9]+)’] = “home/chidc/mid/$1/sid/$2/chid/$3″;
/* End of file routes.php */
/* Location: ./system/application/config/routes.php */

?>

Below we will go to the  finished step for view –

// view.php

<a href=”<?=base_url()?>childmenu/<?=$id1?>/<?=$id2?>/<?=$id3?>”>Menu name</a>

[ It may help you 🙂 ]

Refresh particular div by jquery

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);
?>