Freelance Forums

Hi,

I was looking for a solution (using php/jquery) similar to the one as shown in the screen shot.

I have a user database with 3 fields:

id (auto number)
name (varchar)
email (varchar)

the user lists gets populated in a grid (html table), clicking on either the name or the email address would convert the label into an editable text box and after editing once i remove the cursor from the textbox, the data gets saved in the database.

Any help with a code snippet will be highly appreciated.

Thanks

(03-13-2010 06:28 AM)glenntamis Wrote: [ -> ]Hi,

I was looking for a solution (using php/jquery) similar to the one as shown in the screen shot.

I have a user database with 3 fields:

id (auto number)
name (varchar)
email (varchar)

the user lists gets populated in a grid (html table), clicking on either the name or the email address would convert the label into an editable text box and after editing once i remove the cursor from the textbox, the data gets saved in the database.

Any help with a code snippet will be highly appreciated.

Thanks

This was from a while ago, so I'm not sure if you're even still interested in a reply, but here goes anyway:

I've implemented this sort of thing before. The way I did it was I would load both a label and an input field into the cell when the page first loads. The input tag is hidden by default. When a user clicks the cell, the label is hidden and the input field is shown. When the field loses focus, you can submit the change and update the field using JQuery. Here is a snippet to illustrate:

NOTE: I typed this up right here and now, so there could be typos or syntax errors. This is just intended to give you an idea of what I'm talking about.

Code:

<script type='text/javascript'>

function toggleFields(field)

{

        // hide currently showing field (either label or input)

        $(field).toggle();

        // show other field (either label or input)

        $(field).siblings().toggle();

}

function updateField(field)

{

        // send update to server

        $.post('yourpagegoeshere.php', {$(field).attr('name') : $(field).val()});

        // update label

        $(field).siblings('span').html($(field).val());

        toggleFields(field);

}

</script>

<table>

    <tr>

          <td>

                  <input onBlur='javascript:updateField(this)' type='text' name='name' value='James Woods' style='display:none' />

                   <span onClick='javascript:toggleFields(this)'>James Woods</span>

           </td>

       </tr>

       <tr>

          <td>

                  <input onBlur='javascript:updateField(this)' type='text' name='email' value='James.woods@gmail.com' style='display:none' />

                   <span onClick='javascript:toggleFields(this)'>james.woods@gmail.com</span>

           </td>

       </tr>

</table>

If you also need the primary id to update these values on the server side (as I suspect you do), you would have to find a clever way to stash that information along with the fields. One way might be to stick it in as part of the id attribute for your input tags. So the id for an email input tag might look like 'email_15678'. That would keep each field unique (as good form demands), and you could parse that information out to fetch the ID. You could then pass that along in your post request.

glenntamis

jvasilje