-4

i make a list with php & jquery which shows every row in my database.

i want to add this list an update button. when user clicks on a row, the row will expand and the button will become visible. and the text on that row will go in a textbox.

and my question is, how can i update the text when user click on the button in that row? first i thought, i could put a form in every row.. but i think that's a terrible solution.

can you suggest me an example or source for what i want to do?

2 Answers2

2

Questions asking for code must show the code you've tried. Since you didn't give any code, I'll give a high-level answer:

  1. Attach an event handler to the button (or probably actually to the table and use delegation).
  2. In the the event handler, use jQuery traversal functions to find the row to which the button belongs.
  3. Once you have a reference to the row, use jQuery traversal functions to find the inputs in the row.
  4. Get the values and use ajax to update the database.
Jason P
  • 26,984
  • 3
  • 31
  • 45
  • this is my first question in this site and i don't know all the rules for asking. sorry for that and thank you for the idea. – user2792062 Sep 18 '13 at 16:14
0

This is essentially what you need to do

jsFiddle (all working except AJAX)

Review the above jsFiddle and you can see how the first part of your question will work.

The values will be updated in the database via AJAX, and the code block is present in the jsFiddle example, but jsFiddle cannot demonstrate AJAX so you can't see it in action there.

However, if you copy/paste the following into two files (three if you break out the javascript into its own file), and edit it to match your own database, then you can see it in action.

Two files are required:

One: index.php (or whatever you wish to call it)
Two: my_php_processor_file.php (if change this name, must also change in the AJAX code block in the javascript

HTML:

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">

            //Global var goes here:
            editRow = 0;

            $(document).ready(function() {
                $('#msgbox').dialog({
                    autoOpen:false,
                    width:400,
                    modal:true,
                    buttons: {
                        Submit: function() {
                            var mfn = $('#mfn').val();
                            var mln = $('#mln').val();
                            var mem = $('#mem').val();
                            $('table').find('tr').eq(editRow).find('.fname').val(mfn);
                            $('table').find('tr').eq(editRow).find('.lname').val(mln);
                            $('table').find('tr').eq(editRow).find('.email').val(mem);
            /*                
                            //Now do the ajax transfer to the server
                            $.ajax({
                                type: 'POST',
                                url: 'my_php_processor_file.php',
                                data: 'user_id=' +editRow+ '&first_name=' +mfn+ '&last_name=' +mln+ '&email_addy=' +mem,
                                success:function(recd){
                                    $('#alert').html(recd);
                                    $('#alert').dialog('open');
                                }
                            }); //END ajax code block
            */              //Now, close the dialog -- doesn't happen automatically!
                            $(this).dialog('close');
                        }, //END Submit button
                        Cancel: function() {
                            $(this).dialog('close');
                        } //END Cancel button
                    } //END all buttons
                }); //END msgbox div (dialog)

                $('.editbutt').click(function() {
                    editRow = $(this).parents('tr').index();
                    //alert(editRow);
                    var fn = $(this).parents('tr').find('td').eq(0).find('.fname').val();
                    var ln = $(this).parents('tr').find('td').eq(1).find('.lname').val();
                    var em = $(this).parents('tr').find('td').eq(2).find('.email').val();
                    $('#mfn').val(fn);
                    $('#mln').val(ln);
                    $('#mem').val(em);
                    $('#msgbox').dialog('open');
                }); //END editbutt

                $('#alert').dialog({
                    autoOpen:false,
                    modal:true
                });
            }); //END document.ready

        </script>
    </head>
<body>

    <table id="tbl">
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Email
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class="fname" id="fn1">
            </td>
            <td>
                <input type="text" class="lname" id="ln1">
            </td>
            <td>
                <input type="text" class="email" id="em1">
            </td>
            <td>
                <input class="editbutt" type="button" value="Edit Row">
            </td>
        </tr>
        <tr id="tr2">
            <td id="td2a">
                <input type="text" class="fname" id="fn2">
            </td>
            <td id="td2b">
                <input type="text" class="lname" id="ln2">
            </td>
            <td id="td2c">
                <input type="text" class="email" id="em2">
            </td>
            <td id="td2d">
                <input class="editbutt" type="button" value="Edit Row">
            </td>
        </tr>
    </table>
    <div id="msgbox">
        <h2>Edit User</h2>
        First Name: <input id="mfn" type="text"><br/>
        Last Name : <input id="mln" type="text"><br/>
        Email Addy: <input id="mem" type="text"><br/>
    </div>
    <div id="alert"></div>

</body>
</html>

PHP Processor File: my_php_processor_file.php

<?php

    $fn = $_POST['first_name'];
    $ln = $_POST['last_name'];
    $em = $_POST['email_addy'];
    $uid = $_POST['user_id'];

/*
    //This is where you use the security features of PHP to strip_slashes, and
    //protect html_entities, etc. to guard your database against SQL injection
    //attacks, etc.  SEE THESE POSTS:
    http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php
    http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php
    http://blogs.msdn.com/b/brian_swan/archive/2010/03/04/what_2700_s-the-right-way-to-avoid-sql-injection-in-php-scripts_3f00_.aspx
*/

    //Now, update the database:
    $success = mysql_query("UPDATE `users` SET `email`='$em', `first`='$fn', `last`='$ln' WHERE `user_id` = '$uid'");

    //Now, return a message or something
    if (mysql_affected_rows() == -1) {
        $output = '<h2>Sorry, database update failed</h2>';
     }else{
        $output = '<h2>Update successful</h2>';
    }

    echo $output;
cssyphus
  • 37,875
  • 18
  • 96
  • 111