Question

$(document).ready(function() {
    $("#register button[name=btnPosta]").click(function() {
        console.log('clicked');

        thisBtn = $(this);
        parent = $(this).parent();
        name = parent.data('name');

        $(this).attr('disabled', true);
        $.post('register.php', {
            name: ('name')
        }, function(data) {
            console.log('Ajax success');
            parent.next('#message').html(data);
            thisBtn.attr('disabled', false); // reset  });

            console.log('Ajax success');
        });
    });
});​

This function is used to display name in the #message div
however nothing gets displayed in the div.

Answer 1

Assuming your markup is similar to the markup you posted in your duplicate post from an hour ago:

...
<tr> 
    <td>  <td> 
    <td> <button  class='regular' id = "btnPost" name='save'> Log In  </button></td> 
</tr> 
...

The problem is in your use of .next(). When you pass a selector argument to .next(), you only get a result if the next sibling element matches the selector. Your call to parent.next("#message") returns an empty jQuery object because:

1. The next sibling of the button’s parent element (which is the <td>) does not have an id of message.
2. Actually, there is no next sibling of that <td>.

Since parent.next("#message") returns an empty jQuery object, calling .html() on it has no effect. The solution is just to use $("#message") directly:

$('#message').html(data);

---

My original answer was just a red herring:

Make sure to use the var keyword when defining your variables. Without var, you are creating a property on the Global object (or window when running JavaScript inside a browser). But, parent is already a property of window. In IE, window.parent is read-only, so your value is never set and you will get an error when you call parent.data().

Your code works for me when I use var: http://jsfiddle.net/gilly3/MkS9X/