Cannot get response from php function by ajax

Question

I want to display emoticon by click on a tab. Here my browser display: ajax sent data to smileysmore.php as action:smileysboxmore Sid:888 but cannot display any response data.

I am working new with php function. Please give me a guideline.

Html:

<ul class="nav nav-tabs">
    <li class="active"><a href="#sectionA">A</a></li>
    <li><a class="sm2" href="javascript: void(0)">B</a></li>
</ul>
<div class="tab-content">
    <div id="sectionA">
    <div id="sectionB">
</div>

Ajax:

$(document).ready(function(){
    $('li').on("click", 'a.sm2', function(e){
    var id = 888;
        $.ajax({
        type: "POST", 
        url: "../smileysmore.php", 
        data: "action=smileysboxmore&Sid="+ id,
            complete: function(data){
            $('#sectionA').hide();
            $('#sectionB').fadeIn().html(data);
            }
        });
    });
});

smileysmore.php

function smileysboxmore($Sid){
echo'<img src="../smile.gif" alt=":)" class="embtno" id="'.$Sid.'" />
     <img src="../sad.gif" alt=":(" class="embtno" id="'.$Sid.'" />
     <img src="../cool.gif" alt="B-)" class="embtno" id="'.$Sid.'" />';
}

Answer 1

in your ajax change complete to success

$(document).ready(function(){
    $('li').on("click", 'a.sm2', function(e){
    var id = 888;
        $.ajax({
        type: "POST", 
        url: "../smileysmore.php", 
        data: "action=smileysboxmore&Sid="+ id,
            success: function(data){
            $('#sectionA').hide();
            $('#sectionB').fadeIn().html(data);
            }
        });
    });
});

and in smileysmore.php

smileysboxrepmore($_POST['Sid']);
function smileysboxrepmore($Sid){
echo'<img src="../smile.gif" alt=":)" class="embtno" id="'.$Sid.'" />
     <img src="../sad.gif" alt=":(" class="embtno" id="'.$Sid.'" />
     <img src="../cool.gif" alt="B-)" class="embtno" id="'.$Sid.'" />';
}