jquery ajax problem?

Question

 <form class="follow-form" method="post" action="listen.php">
    <input name="followID" value="123456" type="hidden">
    <button type="submit" value="Actions" class="btn follow" title="123456">
        <i></i><span>follow</span>
    </button>
</form>

javascript file:

jQuery(function ($) {
         /* fetch elements and stop form event */
         $("form.follow-form").submit(function (e) {
          /* stop event */
          e.preventDefault();
          /* "on request" */
          $(this).find('i').addClass('active');
          /* send ajax request */
          $.post('listen.php', {
           followID: $(this).find('input').val()
          }, function () {
           /* find and hide button, create element */
           $(e.currentTarget)
             .find('button').hide()
             .after('<span class="following"><span></span>Following!</span>');
          });
         });
        });

i wanted to know what kind of process would go in the listen.php via ajax, i know its a mysql statement, but then what after!!

what it deos is : when you click the follow button, this sends the ajax request to listen.php and then if successfull it transfroms into following, showing that you followed the user

thanks i have been up all night

Answer 1

Well, there really isn't anything wrong with the code you have here. I've set up a jsfiddle to test it, and it works fine. The only problem, and it shouldn't affect whether the submit event is captured by the event handler, is that the HTML fragment you're trying to insert after the button is invalid - you've got your opening and closing tags mixed up. This is the code I have after that minor edit:

jQuery(function($) {
    $("form.follow-form").submit(function(e) {
        e.preventDefault();

        $(this).find('i').addClass('active');

        $.post('/ajax_html_echo/', {
            followID: $(this).find('input').val()
        }, function() {
            $(e.currentTarget).find('button').hide().after('<span class="following">Following!</span>');
        });
    });
});

Other than that, it works fine - that is, assuming you want the following span to display no matter what the outcome of the ajax request is.