?
Solved

jQuery dialog and PHP grid

Posted on 2011-02-24
6
Medium Priority
?
1,587 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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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…
SEO can be a real minefield to navigate, but there are three simple ways to up your SEO game just be re-assessing your content output.
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

770 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