Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery dialog and PHP grid

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

 
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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Nowadays, it is so easy to get started with a website and all thanks to the Content Management Systems (CMS) like WordPress, Drupal, Joomla, and many others like them. However, if we talk about the reliability and ratings, WordPress definitely rules…
In this blog, I will share you some basic tips for content marketing and to rank your website on Google.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
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…

604 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