Wednesday 20 March 2013

Dynamic Data with Modal Pop Using Jquery


You might be interested in getting Pop up window with dynamic data from the Database. One of the common usage you may come up with is:
Suppose you have a student record table, where you are storing detail information about the student. Then you will be obviously having the View student functionality in your application. Here you want to display all the detailed information about student. It's good choice to display all the information about the student, but unfortunately your window size is fixed, so you need to display only important fields of the student record such as Student Name, Address, Contact Number, & Faculty.

Displaying only necessary information has two advantages - One when you look at the student display page, you should not feel like it is too complex, & second important thing: the lesser you display the content , the more faster will be the students records executed.
So, When  you wanted to view the complete details of student, Just give a link to a student name or Id. When it is clicked  display the modal pop up with complete detailed information about the student. Couldn't this quite interesting?

Okey, Diving deep into coding, it pretty easier. Lets check it out.

Say you have list of names & when click on any name, you want to display pop up with his complete details.








So here you have queried through DB & inside loop you have some thing like-
 <td>
   <a href="#" onclick="pop_up('<?php echo $customer['user_id']; ?>')" >
           <?php echo $customer['first_name']." ".$customer['last_name'];?>
  </a>
</td>

When you click on any name, we are passing an Id inside a    java script function  pop_up() .
So the pop up function will receive an Id & through where , I  will Post the id to Php Script using Jquery.
The Php will  select the required data & return back to the same page.  

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>


<script type="text/javascript">


function pop_up(id){

var url = "customer_complete_datail.php?id="+id

$.post(url, function(data) {
 
 
 $('#overlay_form').html(data);  //Setting the content of html 
  
});
//open popup
$("#overlay_form").fadeIn(1000);
positionPopup();

}

             function positionPopup(){

if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left:263,
top:145,
position:'absolute'
});
}
               function close_cd()
{
$("#overlay_form").fadeOut(500); //Closing the opened window
}
</script>

Just create the space using DIV for holding you dynamic data 


<div id="overlay_form" style="display:none;">
 </div>

Give some styles in html head section for Pop up Model:

<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 2px 24px 2px 2px;
background: white;
left:263px;
top:145px;
/*width: 321px;*/
/*height: 400px;*/

}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>

Here is the Page (customer_complete_detail.php) that we are referencing & getting the whole content:



<?php
session_start();
include_once '../config/connect.php';
include_once 'helper.php';
$Helper_admin = new Helper_admin();

$id = $_REQUEST['id'];

$customerDetail = $Helper_admin->getCustomerDetailById($id);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Customer Details</title>
    <style type="text/css">
    .formLayout
    {
        background-color: #f3f3f3;
        border: solid 1px #a1a1a1;
        padding: 10px;
        width: 300px;
    }
    
    .formLayout label, .formLayout input
    {
        display: block;
        width: 120px;
        float: left;
        margin-bottom: 10px;
    }

    .formLayout label
    {
        text-align: right;
        padding-right: 20px;
    }
    .pop_up_form{clear:both;}

    br
    {
        clear: left;
    }
    </style>
</head>
<body>
    <div class="formLayout">
        <h4 class="h4_account">Customer Details</h4>
        <div class="pop_up_form">
       <label>First Name:</label>
       <label><?php echo $customerDetail->first_name; ?></label>
       <br>
       <label>Last Name:</label>
       <label><?php echo $customerDetail->last_name; ?></label><br>
       
       <label>Contact No.:</label>
       <label><?php echo $customerDetail->contact_no; ?></label><br>
       
       <label>Email:</label>
       <label><?php echo $customerDetail->user_email; ?></label><br>
       
       <label>Current Location:</label>
       <label><?php echo $customerDetail->current_location; ?></label><br>
       
       <label>City:</label>
       <label><?php echo $customerDetail->city ; ?></label><br>
       
       <label>State:</label>
       <label><?php echo $customerDetail->state ; ?></label><br>
       
       <label>Country:</label>
       <label><?php echo $customerDetail->country ; ?></label><br>
       
       <label>Zip:</label>
       <label><?php echo $customerDetail->zip  ; ?></label><br>
        </div>
        <div>
           <a href= 'javascript:void(0)' onclick="close_cd()" id='close_cd'>Close</a>
        </div>   
                 
    </div>
   
</body>
</html>

So you are almost done.  !!! Hurray ..

Here is the output when you click on one of the name :




Any Questions.. Queries.. Don't forget write out  !!!
Rock up.. :) !