Solved

jQuery dialog and PHP grid

Posted on 2011-02-24
6
1,575 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Why do you blog? It’s a question regular bloggers field from time to time, from folks with a preconceived notion that bloggers spend most of their days cranking away on a Comodore in their mother’s musty basement. (I’m an Altair guy myself.) The…
This article will shed light on the latest trends when it comes to your resume building needs. For far too long, the traditional CV format has monopolized the recruitment market.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

688 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