jQuery advice please

G

Geriatrix

Executive Member
Joined
Nov 22, 2005
Messages
6,554
Reaction score
3
Location
Right here
Noob fyi.

Ok so I've got a php page that writes out listings from a database into table format.

Lets say I've got 2 <td>'s per row. One is contains a usercode and one contains a name. I want each name to be clickable so that the <td> content changes to a textfield where you can change the name and onblur it updates the database with the new name. I got this working via JS and some ugly ass homebrew Ajax.

But now I'm learning jQuery because it seems it would be more efficient and useful for some of the other features on my site.

Now, I made the php script give each name <td> a class of 'username' and a unique id created with the related usercode read from the database, so that when I edit a name the corresponding usercode is passed to my database updating script.

jQuery and me aren't friends yet.
Which jQuery Ajax function should I use and how would I pass the related usercode from the previous <td> ?
I assumed I could $(".username").click(event) but how would I pass the related usercode with the new name?
 
Couldn't you use $(".username").click(event) and then use the JS that you already wrote, inside of the JQuery function?
 
seanyp00h said:
Couldn't you use $(".username").click(event) and then use the JS that you already wrote, inside of the JQuery function?
Click to expand...

Yeah I could probably hack it like that but I'd like to know if there's a smarter, cleaner why of going about this.
I showed a frontend guy in the states my code to try and get some advice but he said if I showed him this in person he would look at me sideways and proceed to exit the room via a window. I take it my code's a bit messy. :p
 
This is rough, I threw it together in 5 mins for you and I'm tired - there are many optimizations and probably a shorter way to do it but that's what you get at this hour :) Anyway it should give you a starting point:

Code: 
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $( function() {
        $('.changer').live('blur', function () {
          alert('My new value is: ' + $(this).val() + ' and I would be updating row with id: ' + $(this).attr('rel'));
          $('.clicker[id=' + $(this).attr('rel') + ']').html($(this).val());
          $('.changer').remove();
        });
        
        $('.clicker').bind('click', function() {
          var my_id = $(this).attr('id');
          alert('My id is: ' + my_id);
          $(this).after('<input type="text" rel="' + my_id + '" class="changer">');
        });
        
      });
    </script>
  </head>
<body>
  <table>
    <tr>
      <td>398</td>
      <td>
        <span class="clicker" id="398">Some Person</span>
      </td>	  		
    </tr>
    <tr>
      <td>395</td>
      <td>
        <span class="clicker" id="395">Another Guy</span>
      </td>       
    </tr>
  </table>
</body>
</html>

EDIT: In case it's not immediately obvious - click on one of the names :)

Also, to answer your other question - I usually end up using $.ajax for all AJAX functions besides quickly retrieving JSON data, because it offers the most control of all aspects of the process.
 
Last edited:
Seeyou said:
This is rough, I threw it together in 5 mins for you and I'm tired - there are many optimizations and probably a shorter way to do it but that's what you get at this hour :) Anyway it should give you a starting point:
EDIT: In case it's not immediately obvious - click on one of the names :)

Also, to answer your other question - I usually end up using $.ajax for all AJAX functions besides quickly retrieving JSON data, because it offers the most control of all aspects of the process.
Click to expand...

Cool thanks Seeyou!
I got it working last night after going through all the possible selectors and tree traversal methods. But I'll have a look at your suggestion, maybe there's something I missed.
jQuery's seems pretty cool though. It'll be a big time saver.
 
jQuery Grid

The javascript code is free, and it shouldn't take long to adapt your PHP to use it.

Kudos for the two of you creating your own solution though. :)
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X