Solved

jQuery dialog and PHP grid

Posted on 2011-02-24
6
1,552 Views
Last Modified: 2012-05-11
Hi guys,
I'm trying to open a dialog box that when edit button is clicked on each row it will pass the row id to the box..

I was able to pass row id to the edit form but with every click, id changes.

here is my code:

 
$('.details').dialog({
          autoOpen: false,
      });
  
          $('a.pop').click(function(e) {
            e.preventDefault();
          
     $("#details").dialog('open');
      });

Open in new window

0
Comment
Question by:Brilliant_EC
  • 4
  • 2
6 Comments
 
LVL 3

Expert Comment

by:vnsmanian2006
ID: 34968836
hi

can u give me a test html page or link to ur page.
0
 

Author Comment

by:Brilliant_EC
ID: 34968977
Hi

Thanks for looking into this for me.  Here is the modified version of my code.

Many thanks.
<?php
$sql="select * from table";
$result = $db->queryDB($sql);
    while ($row = mysql_fetch_array($result))
    {
        extract($row);
   

        $list.="
            <tr>
            <td >
            $name
            </td>
            <td>
			$telephone
            </td>
            <td>
          $address
            </td>
     
            <td>
                    <a class=\"pop\"  href=\"#\">
                    <div class='details' id='details'>
                    <form name='frmEdit' id='frmEdit' action='update.php' method='post'>
                        <table>
                           <input type=\"hidden\" name=\"id\" id=\"id\" value=\"$id\" />
                        <tr>
                            <td>
                                Name<br />
          
                                <input type='text' name='name' id='name' />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Telephone<br />
          
                                <input type='text' name='tel' id='tel' />
                            </td>
                        </tr>
						<tr>
                            <td>
                                Addresss<br />
          
                                <input type='text' name='address' id='address' />
                            </td>
                        </tr>
                     
                        </table>
                    
                    </div>
    
                    <img src='edit.png' border='0' />
                    </a>
            </td>
       
    
            </tr>

        ";
    }
?>
<table class="datagrid" width="890">
   
    <tr  align="center" >
 
        <td>
            Name
        </td>
        <td>
            Telephone
                    </td>
        <td>
            Address
        </td>

        <td>
            &nbsp;
        </td>
    </tr>
    <?php echo $list ?>
</table>
    
</div>
<script type="text/javascript">

$(function(){
    

     $(".details").dialog({
    
    autoOpen:false,
    width: 700,
    height: 400,
    modal: true,
    buttons: {

                    Update: function() {
                          $("#frmEdit").submit();
				},
                    Cancel: function() {
                            $(this).dialog('destroy');
                        
                           
                    }
    }
  });
    $("a.pop").each(function(i){
     

        $(this).live('click', function(e){
      e.preventDefault();

     $("#details").dialog('open');

     

    });
    
  });
 
}); 
  
</script>

Open in new window

0
 
LVL 3

Accepted Solution

by:
vnsmanian2006 earned 500 total points
ID: 34969113
hi

try this one.

I fixed the issue which u had in code. this program is ok for learning . I recommend u to use clean separation between html and php.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<?php
error_reporting(E_ALL);ini_set('display_errors', '1');

mysql_connect('localhost', 'root', 'passwordhere');
mysql_select_db('test2');
$sql="select * from users";
$result = mysql_query($sql); print_r($result);


    while ($row = mysql_fetch_array($result))
    {
        extract($row);
   

        $list.="
            <tr>
            <td >
            $name
            </td>
            <td>
			$telephone
            </td>
            <td>
          $address
            </td>
     
            <td> 
                    <a class=\"pop\" title=\"$id\" href=\"#\"> edit
                    </a>
                    <div class='details' id=\"details_$id\">
                    <form name='frmEdit' id='frmEdit_$id' action='update.php' method='post'>
                        <table>
                           <input type=\"hidden\" name=\"id\" id=\"id\" value=\"$id\" />
                        <tr>
                            <td>
                                Name<br />
          
                                <input type='text' name='name' id='name' value=\"$name\" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Telephone<br />
          
                                <input type='text' name='tel' id='tel'  value=\"$telephone\"/>
                            </td>
                        </tr>
						<tr>
                            <td>
                                Addresss<br />
          
                                <input type='text' name='address' id='address'  value=\"$address\"/>
                            </td>
                        </tr>
                     
                        </table>
                    
                    </div>
    
                    
            </td>
       
    
            </tr>

        ";
    }
?>
<table class="datagrid" width="890">   
    <tr  align="center" > 
        <td>
            Name2
        </td>
        <td>
            Telephone
                    </td>
        <td>
            Address
        </td>

        <td>
            &nbsp;
        </td>
    </tr>
    <?php echo $list ?>
</table>
    
</div>
<script type="text/javascript">

$(function(){
    

     $(".details").dialog({
    
    autoOpen:false,
    width: 700,
    height: 400,
    modal: true,
    buttons: {

                    Update: function() {
                          $("#frmEdit").submit();
				},
                    Cancel: function() {
						$(this).dialog('close');
                            // $(this).dialog('destroy');
                        
                           
                    }
    }
  });
	 
	 
    $(".pop").click(function(){
     

    
      
	var rowId = $(this).attr('title');	//of clicked row
     $("#details_"+rowId).dialog('open');
console.log(rowId);

     

    
    
  });
 
}); 
  
</script>

Open in new window

0
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 
LVL 3

Expert Comment

by:vnsmanian2006
ID: 34969127
hi

remove console.log(rowId); from the above js code -- which i have written for debugging.

(it will shw a js error in IE browser and in FireFox not having firebug addon)
0
 

Author Closing Comment

by:Brilliant_EC
ID: 34969305
Many thanks for your help and point taken,
0
 
LVL 3

Expert Comment

by:vnsmanian2006
ID: 34969316
welcome and thanks for the points :)
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

First things first, I say this in many of my articles, but in this one you can take it as fact. I am not in any way an expert when it comes to WordPress. I am strictly a user. I don't know the programming languages involved, and although I could pro…
Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question