Solved

jQuery dialog and PHP grid

Posted on 2011-02-24
6
1,569 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
Technology Partners: 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

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

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…
With Wordpress gaining more and more popularity not only as blogging platform but as a shopping or CMS solution, it's worth to know which plugins are the first ones to grab and integrate with your website. We will briefly go over the most useful plu…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

734 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