Question

My page loops database values that are editable and updated without refresh via ajax.
The logic works just fine, but I can’t get the success message to act correctly. As of now, the message flashes on ALL div’s with class .status… I’ve tried prevAll,parents,closest, etc but can’t quite get the message to ONLY display on the form that was clicked.

$(document).ready(function() {      
    $(".save").click(function (e) {         
        var content = $(this).prevAll('.editable').html();  
        var item = $(this).prevAll('.item').html(); 

    $.ajax({
        url: 'save.php',
        type: 'POST',
        data: {content: content, item: item},               
        success:function (data) {
            if (data == '1'){
                $(".status")
                .addClass("success")
                .html("Data saved successfully")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            }
         }
     });        
     });
});

The form structure (keep in mind, it is looped).

<div id="wrap">
    <div class='status'></div>
    <div id='content'>
        <div class='editable' contentEditable='true' ></div>
        <div class="item"></div>    
        <button class="save" style="display:none">Save</button>
    </div>
</div>

Answer 1

That’s because you’re not specifying which .status you want to light up.

Here’s a fiddle.

PS: I changed some code for it to work in jsiddle so you need to adapt.

PS2: I suggest you use class names instead of ids because my guess is that they will repeat and ids should be unique.

$(document).ready(function() {      
        $(".save").click(function (e) {         
            var content = $(this).prevAll('.editable').html();  
            var item = $(this).prevAll('.item').html();
            var statusItem = $(this).parents('.wrap').find('.status');
        $.ajax({
            url: '/echo/html',
            type: 'POST',
            data: {content: content, item: item},               
            success:function (data) {
                //if (data == '1'){
                     statusItem
                    .addClass("success")
                    .html("Data saved successfully")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                //}
             }
         });        
         });
    });