Drag and Drop dashboard using jquery and save state of each change

Tags

dashboard, drag, Drag & Drop, drop, jquery, jqueryui, sortable

I found some solution to make drag and drop on dashboard. After drag and drop we need to keep save the state for each user so when user login they can get their own dashboard what they saved last time.
First download and add jquery and jqueryui to your page

Lets assume we have 3 column, here is the code

<!-- This is first column -->
<div id="column_1" class="column">
  <div id="item_1" class="dragbox">
    <!-- this one is first item of 1st column -->
    <h2>Title for 1</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_2" class="dragbox">
    <!-- this one is second item of 1st column -->
    <h2>Title for 2</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_3" class="dragbox">
    <!-- this one is third item of 1st column -->
    <h2>Title for 3</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
</div>

<!-- 2nd Column -->
<div id="column_2" class="column">
  <div id="item_4" class="dragbox">
   <!-- this one is 4th item of 2nd column -->
   <h2>Title for 4</h2>
   <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_5" class="dragbox">
    <!-- this one is 5th item of 2nd column -->
   <h2>Title for 5</h2>
   <div class="dragbox-content">Your contents goes here...</div>
  </div>
</div>

<!-- Third column -->
<div id="column_3" class="column">
  <div id="item_6" class="dragbox">
    <!-- this one is 6th item of 2nd column -->
    <h2>Title for 6</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_7" class="dragbox">
    <!-- this one is 7th item of 2nd column -->
    <h2>Title for 7</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
</div>

Make sure your column id is unique and your all item id under any column should be unique. Here is use id like “item_1”, “item_2″……”item_5″…etc.
Here is the css code

.column{
	width:32%;
	margin-right:.5%;
	float:left;
        min-height: 300px;
}
.column .dragbox{
	margin:5px;
	background:#fff;
	position:relative;
	border:1px solid #ddd;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	padding:5px;
	background:#f0f0f0;
	color:#000;
	border-bottom:1px solid #eee;
	font-family:Verdana;
	cursor:move;
}
.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #f0f0f0;
	border:2px dashed #883533;
}

You can customized css based on your design but make sure that your .column class should have min-height or height if you remove that then you cann’t drag the item.
h2 used for your dragable item,
.placeholder is used when you drag some box and place holder will showing where it need to be place.
here is the javascript code

  $('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
        stop: function(event, ui){
            //saveState();
        }
})
.disableSelection();

h2 used as handle, you can change it, we’ll discuss about stop in next section.

your outcome something like this, here when I trying to drag item 2

Now In this way we just drag and drop but when we need to save each state and when user logout and again login the dashboard should be same when they logout, I used here php and mysql to save state,
Here is the database table

CREATE TABLE IF NOT EXISTS `dashboard_items` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `column_no` int(11) NOT NULL,
  `order` int(11) NOT NULL,
  `widget` char(100) COLLATE utf8_unicode_ci NOT NULL,
  `last_update_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `user_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

‘id’ is used for item id (e.g. item_1, item_2….. item_8 etc.)
‘column_no’ is column number here we used just 3 column
‘order’ it used for item order in a column,
‘widget’ it uses when we do for loop we might need to call some widget which we need to put here..
‘user_id’ if you have multiple user and you can keep user id and save its state.

now, how we fetch the data

$column = array();
for($i = 1, $i <= 3; $i++){
$sql = "SELECT `DashboardItem`.`id`, `DashboardItem`.`column_no`, `DashboardItem`.`order`, `DashboardItem`.`widget`, `DashboardItem`.`last_update_date`, `DashboardItem`.`user_id` FROM `dashboard_items` AS `DashboardItem` WHERE `DashboardItem`.`column_no` = $i and  `DashboardItem`.`user_id` = 1 ORDER BY `DashboardItem`.`order` ASC";
$column[$i] = $this->DashboardItem->query($sql); // here is used cakephp syntex which will output like the following section 
}

the output for one column

Array
(
    [0] => Array
        (
            [DashboardItem] => Array
                (
                    [id] => 3
                    [column_no] => 1
                    [order] => 2
                    [widget] => 0
                    [last_update_date] => 2012-02-17 11:41:49
                    [user_id] => 1
                )
        )
    [1] => Array
        (
            [DashboardItem] => Array
                (
                    [id] => 2
                    [column_no] => 1
                    [order] => 1
                    [widget] => 0
                    [last_update_date] => 2012-02-17 11:41:49
                    [user_id] => 1
                )
        )
    [2] => Array
        (
            [DashboardItem] => Array
                (
                    [id] => 1
                    [column_no] => 1
                    [order] => 0
                    [widget] => 0
                    [last_update_date] => 2012-02-17 11:00:42
                    [user_id] => 1
                )
        )
)

Now here is the html code

	<div class="column" id="column_1">
		<?php foreach($column[1] as $col){ ?>
                <div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
			<h2> Call your header based on the widget</h2>
			<div class="dragbox-content" >
                            put your contents based on your widget
			</div>
		</div>
                <?php } ?>
	</div>
	<div class="column" id="column_2" >
		<?php foreach($column[2] as $col){ ?>
                <div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
			<h2>put your contents based on your widget</h2>
			<div class="dragbox-content" >
                             put your contents based on your widget
			</div>
		</div>
                <?php } ?>
	</div>
	<div class="column" id="column_3" >
		<?php foreach($column[3] as $col){ ?>
                <div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
			<h2>put your contents based on your widget</h2>
			<div class="dragbox-content" >
                            put your contents based on your widget
			</div>
		</div>
                <?php } ?>
	</div>
<div id='result'></div>

Now we have to pass ajax requset based on the change of dahboard which will keep your dashboard same

   $('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
        stop: function(event, ui){  
            saveState();
        }
})
.disableSelection();

function saveState(){
    var items = [];
    // traverse all column div and fetch its id and its item detail. 
    $(".column").each(function(){
        var columnId = $(this).attr("id");
        $(".dragbox", this).each(function(i){ // here i is the order, it start from 0 to...
           var item = {
               id: $(this).attr("id"),
               column_no: columnId,
               order: i
           }
           items.push(item);
        });
        
    });
    $("#results").html("loading..");
    var shortorder = {items : items};
        $.ajax({
          url: "<?php echo "/dashboard_item.php"; ?>",
          async: false, 
          data: shortorder,
          dataType: "html",
          type: "POST",
          success: function(html){
            $("#results").html(html);
          }
        });    
}

saveState() is calling when you do any drag and drop of any item.
under saveState() it fetch the data based on column and make an array which we passing to ajax request then we save

$data = $_POST;
foreach($data as $d){
   $item_no = split("_",$d['id']); //split item_3 to get 3 and that is our item table id 
   $d['id'] = $item_no[1];
            
   $col_no = split("_", $d['column_no']); //split 
   $d['column_no'] = $col_no[1];
   
    $this->Dashboard->save($d); // I used cakephp syntax here, it will update database  You have to update each row based on the column no and user id
}

In this way we can keep save the drag and drop state. 🙂

Advertisement

Remove Skype Plugin from browser using jQuery

Tags

jquery, Markup, skype, skype number

I got some problem after installing the skype plugins on my browser. This plugin always convert to a call now button to numbers, sometime some number is not a phone number, which cause problem for our web design. I found a solution which we can used for stop converting the call now button for numbers on the webpage.

<script src="YOUR_JQUERY_PAT/jquery.min.js" language="javascript"></script>
<script language="javascript">
	$(document).ready(function() {
		window.setTimeout(function() {
			$('.skype_pnh_container').html('');
			$('.skype_pnh_print_container').removeClass('skype_pnh_print_container');
		}, 700);
	});
</script>

Its work for me. I found it form here

cakephp ajax pagination using jquery

Tags

ajax, ajax pagination cakephp, jquery, paginator

I tried to use cakephp default ajax pagination, it seems not working with me. I tried with different way.

The following code using for pagination.

<div class="paginator">
        <?php echo $paginator->first(' First ', null, null, array('class' => 'disabled')); ?>
        <?php echo $paginator->prev('Previous ', null, null, array('class' => 'disabled')); ?>
        <?php echo $paginator->numbers(); ?>
       <?php echo $paginator->next(' Next ', null, null, array('class' => 'disabled')); ?>
        <?php echo $paginator->last(' Last ', null, null, array('class' => 'disabled')); ?>
</div>   

Now below that code I used the following java script code

<script>
    $(document).ready(function(){
        $(".paginator a").click(function(){
            $("#updated_div_id").load(this.href);
            return false;
        })
    });
</script>

Here, I just fire an event on click under paginator div, once you click on a link under that div, it fetch the url (this.herf) and calling page using ajax, You must prepared the controller for ajax based.

for example your controller calling ‘ajax_pages’ action.

function ajax_pages(){
        $this->layout = 'ajax';
        $this->paginate = array(
                                'order' => array('Module.created_date' => 'desc'), 
                                'recursive' => -1,
                                "limit" => PAGINATION_LIMIT
                                );
        
        $conditions['Module.module_type'] = $module_type;
        $data = $this->paginate("Module", $conditions);
        $this->set(compact("data"));  
}

Its work for me 🙂

check username availability on keypress using jquery

Tags

ajax, availability, jquery, keypress, keyup, validation

Username or email availability or any other types of availability check we can do in this way. When user type on a text box an ajax request has made and check what if its available or not.  we only required jquery.js

HTML CODE:

<input name="username" type="text" id="username" />
<label id="user_msg" style="color:#CC0000;"></label>

Javascirpt:

$(document).ready(function() {

		var timeOut = null;	// this used for hold few seconds to made ajax request

		var loading_html = '<img src="ajax-loader.gif" />'; // just an loading image or we can put any texts here

		//when button is clicked
		$('#username').keyup(function(e){

			// when press the following key we need not to make any ajax request, you can customize it with your own way
			switch(e.keyCode)
			{
				//case 8:   //backspace
				case 9:		//tab
				case 13:	//enter
				case 16:	//shift
				case 17:	//ctrl
				case 18:	//alt
				case 19:	//pause/break
				case 20:	//caps lock
				case 27:	//escape
				case 33:	//page up
				case 34:	//page down
				case 35:	//end
				case 36:	//home
				case 37:	//left arrow
				case 38:	//up arrow
				case 39:	//right arrow
				case 40:	//down arrow
				case 45:	//insert
				//case 46: 	//delete
					return;
			}
			if (timeOut != null)
			    clearTimeout(ajaxCallTimeoutID);
			timeOut = setTimeout(is_available, 1000);  // delay delay ajax request for 1000 milliseconds
			$('#user_msg').html(loading_html); // adding the loading text or image
		});
  });
function is_available(){
	//get the username
	var username = $('#username').val();

	//make the ajax request to check is username available or not
	$.post("availability.php", { username: username },
	function(result)
	{
		if(result != 0)
		{
			$('#user_msg').html('Not Available');
		}
		else
		{
			$('#user_msg').html('<span style="color:#006600;">Available</span>');
		}
	});

}

PHP: Put your way to searching, you can make any array search or you can check it from database or flat file. I check it from database here is the code

<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('db_name');
$username = mysql_real_escape_string($_POST['username']);
$result = mysql_query('select username from user_table where username = "'. $username .'"');
$cnt = mysql_num_rows($result);
print($cnt);
?>

Its work with me very well 🙂

jQuery Mega Menu Customization and Fixed Conflict with jQuery UI

Tags

conflict, customization, jkmegamenu, jquery, menu

Recently I’ve used jQuery Mega Menu on a site. The default style for this menu it appear from left corner to below the link/button when mouse is over. But I wanted it appear above the link/button when mouse is over, here is the code we need to change  on line 76 of jkmegamenu.js file

//existing line
// megamenu.offsety= megamenu.$anchorobj.offset().top
//Change to
megamenu.offsety= megamenu.$anchorobj.offset().top - (megamenu.$menuobj.outerHeight() + megamenu.$anchorobj.outerHeight())

Just subtract top position with total of menu object height and anchor so the bottom line of new box will appear just above the link/button.

But I got some problem when I was adding this code to a page where already have jQuery UI  items, both jquery ui tabs/accordion/dialog…etc. and mega menu wasn’t work. After check the mega menu js file I got the solution, we just need to comemnted out or remove the following line at the begianing of file

//jQuery.noConflict();

Done, everything working with me properly hope it will work with you as well 🙂

jquery-thickbox

Tags

jquery, thickbox

uery is really excellent javascript framework. I’m really enjoining with this. But when I use this I’ve faced some problem, which I wanna share with you.

Thikbox is very helpful for image gallery or any types of pop up options. But I’ve faced some problem when viewed in browser all Flash objects in the page are displayed on top of my thickBox pop up. I want the popUp to be at the top level (above flash objects)
How to work with thickbox? I’ve decribe the whole thing as follows.
Download jquery latest verison first. The latest version will support more. You can get more examples and documentation from here about jquery.
Download thickbox, “thickbox.js “, “ThickBox.css,”, “loadingAnimation.gif” and “macFFBgHack.png ” download this, you can get more example and help from download link.

In your main html/php/asp file you have to add the follwoing

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

You must have to add the image location in your js and css file
Suppose at the begaining in thickbox.js file The follwing should be accurate link

var tb_pathToImage = "[your-path]/loadingAnimation.gif";

Set the thikbox to view the images use the image as follows (add to your html/php/asp file)

<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank"class="thickbox" rel="gallery-plants"><imgsrc="images/plant2_t.jpg" alt="Plant 2"/>
</a>

You can run this gallery easely. But If your file contain some embeded flash object then you have to follow the following options
Wrap your flash content in a div
Add to your object tag
Set

wmode="transparent"

in the embed tag
Use css to set the position and z-index for your div (don’t set negative z-index values as it will make your flash disappear)
Use the following CSS

#flash {
position: relative; /*or absolute*/
z-index: 0;
}

Use the following XHTML

<div id="flash">
<object ...>
<param name="wmode" value="transparent">
<embed ... wmode="transparent">
</object>
</div>

I’ve already tried and just say WoW!! Now you can try.
Yes, it’s really cool.