By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,913 Members | 1,379 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,913 IT Pros & Developers. It's quick & easy.

update data using jquery

semanticnotion
P: 66
I have a page that lists records from a database call. I want to have an 'edit' link on each row that will popup a Jquery dialog so that the row can be edited. My question is how do I pass the data from the selected row to the jquery dialog box so that it can be edited?
i have the code which open jquery popup but the textboxes are empty.

Expand|Select|Wrap|Line Numbers
  1. <div id="boxes">
  2.  
  3. <div id="dialog2" class="window">
  4. <form method="post" action="update_books_a.php">
  5.   <input name="name" type="text" value="<?php echo $ing['book_name']; ?>"/><br/>
  6.   <input name="author" type="text" value="<?php echo $ing['author']; ?>"/>
  7.  
  8.     <input type="hidden" name="book_id" value="<?php print $ing['book_id'];?>" />
  9.     <br/><br/>
  10. <input type="submit" value="Update" class="close"/>
  11. </form>
  12. </div>
myphp code is
Expand|Select|Wrap|Line Numbers
  1. $select=mysql_query("select * from books where book_id='$book_id'") or die(mysql_error());
  2. while($ing=mysql_fetch_array($select))
  3. {
  4.  ?>
  5. <tr>
  6.     <td><a href="#dialog2" name="modal"><?php echo $ing['book_name'];?></a></td>
  7.     <td><?php echo $ing['author'];?></td></tr>
  8. <?php
  9. }
  10. ?>
and the java scipt is
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  2. <script>
  3.  
  4. $(document).ready(function() {
  5.  
  6.     //select all the a tag with name equal to modal
  7.     $('a[name=modal]').click(function(e) {
  8.         //Cancel the link behavior
  9.         e.preventDefault();
  10.  
  11.         //Get the A tag
  12.         var id = $(this).attr('href');
  13.  
  14.         //Get the screen height and width
  15.         var maskHeight = $(document).height();
  16.         var maskWidth = $(window).width();
  17.  
  18.         //Set heigth and width to mask to fill up the whole screen
  19.         $('#mask').css({'width':maskWidth,'height':maskHeight});
  20.  
  21.         //transition effect
  22.         $('#mask').fadeIn(1000);
  23.         $('#mask').fadeTo("slow",0.8);
  24.  
  25.         //Get the window height and width
  26.         var winH = $(window).height();
  27.         var winW = $(window).width();
  28.  
  29.         //Set the popup window to center
  30.         $(id).css('top',  winH/2-$(id).height()/2);
  31.         $(id).css('left', winW/2-$(id).width()/2);
  32.  
  33.         //transition effect
  34.         $(id).fadeIn(2000);
  35.  
  36.     });
  37.  
  38.     //if close button is clicked
  39.     $('.window .close').click(function (e) {
  40.         //Cancel the link behavior
  41.         e.preventDefault();
  42.  
  43.         $('#mask').hide();
  44.         $('.window').hide();
  45.     });
  46.  
  47.     //if mask is clicked
  48.     $('#mask').click(function () {
  49.         $(this).hide();
  50.         $('.window').hide();
  51.     });
  52.  
  53. });
  54.  
  55. </script>
  56. <style type="text/css">
  57. body {
  58. font-family:verdana;
  59. font-size:15px;
  60. }
  61.  
  62. a {color:#333; text-decoration:none}
  63. a:hover {color:#ccc; text-decoration:none}
  64.  
  65. #mask {
  66.   position:absolute;
  67.   left:0;
  68.   top:0;
  69.   z-index:9000;
  70.   background-color:#000;
  71.   display:none;
  72. }
  73.  
  74. #boxes .window {
  75.   position:absolute;
  76.   left:0;
  77.   top:0;
  78.   width:440px;
  79.   height:200px;
  80.   display:none;
  81.   z-index:9999;
  82.   padding:20px;
  83. }
  84.  
  85.  
  86.  
  87. #boxes #dialog2 {
  88.   background:url(../images/notice.png) no-repeat 0 0 transparent;
  89.   width:326px;
  90.   height:229px;
  91.   padding:50px 0 20px 25px;
  92. }</style>
Dec 14 '10 #1
Share this Question
Share on Google+
1 Reply


P: 23
you could use jquery to execute the php script and return values to a named div for example

the html code
Expand|Select|Wrap|Line Numbers
  1. Bla Bla Bla Title <br />
  2. <div style="width:950px">
  3. <div style="float:left; width:450px">
  4. Your List of Book here
  5. <div id="dialog2" class="window">
  6. <form method="post" action="javascript: editBook();">
  7.   <input name="name" type="text" value="<?php echo $ing['book_name']; ?>"/><br/>
  8.   <input name="author" type="text" value="<?php echo $ing['author']; ?>"/>
  9.  
  10.     <input type="hidden" name="book_id" value="<?php print $ing['book_id'];?>" id="book_id" />
  11.     <br/><br/>
  12. <input type="submit" value="Update" class="close" onclick="javascript: editBook();"/>
  13. </form>
  14. </div>
  15.  
  16. <div style="float:left" id="showedit">
  17. <!--your edit will show here-->
  18. </div>
  19. </div>
Note the form action attribute value well as well as the div id showedit and the hidden form field id book_id. your html ends here...


Now time for the javascript function

Expand|Select|Wrap|Line Numbers
  1.     <script type="text/javascript" language="javascript">
  2.        function editBook(){
  3.     $("#showedit").html("Preparing Book Edit <br /><img src=\"images/load.gif\" />"); $.get("edit.php",{ cmd: "edit", b_id: $("#book_id").val() } ,function(data){  $("#showedit").html(data); });
  4.        }
  5.     </script>
your javascript ends here...

Now the php file named edit.php should be on the same directory as your current page...

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.  
  3. include 'my_database_connection_file or settings.php';
  4.  
  5. $b_id = mysql_real_escape_string($get['b_id']);
  6.  
  7. $select=mysql_query("select * from books where book_id='$b_id'") or die(mysql_error());
  8. while($ing=mysql_fetch_array($select))
  9. {
  10.  ?>
  11. <tr>
  12.     <td><a href="#dialog2" name="modal"><?php echo $ing['book_name'];?></a></td>
  13.     <td><?php echo $ing['author'];?></td></tr>
  14. <?php
  15. }
  16. }
  17.  
  18. ?>
this should work without reloading the page and if you run into error please let me know.
Jan 18 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.