After succesfull Ajax call show div and replace span with new span

Question

I have a form I submit through ajax:

 $(function() {
 $(".submit").click(function() {
var listid = $("#listid").val();
var itemid = "<?=$id?>";
var userid = "<?=$_SESSION['user_id']?>"; 

 var dataString = 'listid=' + listid + '&userid=' + userid + '&itemid=' + itemid;


 $.ajax({
 type: "POST",
 url: "join.php",
 data: dataString,
 success: function(){
 $('#content_error').fadeIn(200).show();
 }
 });

 return false;
 });
 });

This works perfectly. The ajax function calls join.php:

  <? session_start();

require_once("include/database.php");
$Db = new Database();

 if($_POST['listid'] && $_POST['itemid'] && $_POST['userid']) {

            $list_id = $_POST['listid'];
            $user_id = $_POST['userid'];
            $item_id = $_POST['itemid'];

            $sql = "SELECT *
                    FROM items_list
                    WHERE list_id = '".$list_id."'
                    AND user_id = '".$user_id."'
                    AND item_id = '".$item_id."'
                    ORDER BY item_id DESC LIMIT 1";
            $result = $Db->sQuery($sql);
            $row = mysql_fetch_array($result);

            if(mysql_num_rows($result) > 0){

                $error = "You've already saved this";   

            }else{

            $sql = "INSERT INTO items_list (list_id, user_id, item_id) 
                    VALUES('$list_id', '$user_id', '$item_id')";
            $Db->uidQuery($sql);

            $sql = "SELECT count(item_id) as itemm
                    FROM items_list 
                    WHERE item_id = '".$item_id."'
                    GROUP BY item_id";          
            $result = $Db->sQuery($sql);
            $Db->closeConnection();
            $tel2 = mysql_fetch_array($result);

            ?>
                <span class="bubble_itemm"><?=$tel2['itemm']?></span>


            <?
                $success = "Sucessfully";

            }
        }

?>

After a success I call a span with the class bubble_itemm. This span also exists in the main page. I want the "new" span to replace the "old" span in the main page with a fadein.

How do I do this?

Answer 1

$(function() {
 $(".submit").click(function() {
var listid = $("#listid").val();
var itemid = "<?=$id?>";
var userid = "<?=$_SESSION['user_id']?>"; 

 var dataString = 'listid=' + listid + '&userid=' + userid + '&itemid=' + itemid;


 $.ajax({
 type: "POST",
 url: "join.php",
 data: dataString,
 success: function(data){
 $('#content_error').fadeIn(200).show();
 $('.bubble_itemm').text(data);
 }
 });

 return false;
 });
 });

$('.bubble_itemm').text(data); add this code and remove the span tag from join.php insted of that just echo the text that you want inside your span.

<? session_start();

require_once("include/database.php");
$Db = new Database();

 if($_POST['listid'] && $_POST['itemid'] && $_POST['userid']) {

            $list_id = $_POST['listid'];
            $user_id = $_POST['userid'];
            $item_id = $_POST['itemid'];

            $sql = "SELECT *
                    FROM items_list
                    WHERE list_id = '".$list_id."'
                    AND user_id = '".$user_id."'
                    AND item_id = '".$item_id."'
                    ORDER BY item_id DESC LIMIT 1";
            $result = $Db->sQuery($sql);
            $row = mysql_fetch_array($result);

            if(mysql_num_rows($result) > 0){

                $error = "You've already saved this";   

            }else{

            $sql = "INSERT INTO items_list (list_id, user_id, item_id) 
                    VALUES('$list_id', '$user_id', '$item_id')";
            $Db->uidQuery($sql);

            $sql = "SELECT count(item_id) as itemm
                    FROM items_list 
                    WHERE item_id = '".$item_id."'
                    GROUP BY item_id";          
            $result = $Db->sQuery($sql);
            $Db->closeConnection();
            $tel2 = mysql_fetch_array($result);

            ?>
                <? echo $tel2['itemm'];?>


            <?
                $success = "Sucessfully";

            }
        }

and if you want fade in effect use this code

$('.bubble_itemm').fadeOut(1000,function(){ $(this).text(data).fadeIn(1000); });

Answer 2

Form page:

<script type="text/javascript">
$(function() {
    $(".submit").click(function() {
        var listid = $("#listid").val();
        var itemid = "<?=$id?>";
        var userid = "<?=$_SESSION['user_id']?>"; 

        var dataString = 'listid=' + listid + '&userid=' + userid + '&itemid=' + itemid;


        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
        }).done(function( result ) {
            myresult(result);
        });

        return false;
    });
});

function myresult(result) {
    var result_lines = result.split("<splitter>");    
    if (result_lines[0] == '1') { 
        $('.bubble_itemm').html('<span class="error">' + result_lines[1] + '</span>').fadeIn(500);
    } else if (result_lines[0] == '2') { 
        $('.bubble_itemm').html('<span class="success">' + result_lines[1] + '</span>').fadeIn(500);
    }
    return true;   
}

</script>

join.php script:

<?php 

require_once("include/database.php");
$Db = new Database();

if($_POST['listid'] && $_POST['itemid'] && $_POST['userid']) {

    $list_id = $_POST['listid'];
    $user_id = $_POST['userid'];
    $item_id = $_POST['itemid'];

    $sql = "SELECT *
            FROM items_list
            WHERE list_id = '".$list_id."'
            AND user_id = '".$user_id."'
            AND item_id = '".$item_id."'
            ORDER BY item_id DESC LIMIT 1";
    $result = $Db->sQuery($sql);
    $row = mysql_fetch_array($result);

    if(mysql_num_rows($result) > 0){
        echo "1<splitter>"; // here to identify message status
        echo "You've already saved this"; // return message

    }else{

        $sql = "INSERT INTO items_list (list_id, user_id, item_id) 
                VALUES('$list_id', '$user_id', '$item_id')";
        $Db->uidQuery($sql);

        $sql = "SELECT count(item_id) as itemm
                FROM items_list 
                WHERE item_id = '".$item_id."'
                GROUP BY item_id";          
        $result = $Db->sQuery($sql);
        $Db->closeConnection();
        $tel2 = mysql_fetch_array($result);

        echo "2<splitter>"; // here to identify message status
        echo $tel2['itemm']; // return message
        echo "Sucessfully"; // return message

    }
}
?>

Answer 3

It would certainly help if you assigned an id to the target span in the main page. Doing something to a class of spans will effect all spans of that class. Maybe that's desired.

You can add any number of functions to the success part of your AJAX request. The functions that you should investigate are fadeOut, remove, and fadeIn. These should be called in sequence using callbacks. For example

$('#old_span_id').fadeOut('slow', function() {
    $(this).remove();
    $(new_span).insertAfter('#where_want_it_to_go');
    $(new_span).fadeIn();
});

Something like that anyway, I'd need to see a bit more HTML to give you a more fuller answer.