I am working on ajax and php,I am fetching data from database successfully,But ajax response showing in html for first time only, But i want to show "success/error" message on every click

Here is my html/view code

<script>
$(document).ready(function(){
    $('#Mybtn').click(function(){
        $('#MyForm').toggle(500);
  });
});
</script>

<button id="Mybtn" class="btn btn-primary">Message</button>
<div id="result"></div>
<form id="MyForm" action="" method="post">
    <label>Enter wallet address</label>
    <input type="text" name="wallet" id="wallet"  placeholder="Enter wallet address"/><br>
    <label>Enter your msg</label>
    <input type="hidden" name="senderwallet" id="senderwallet" value="332121212121212121" >
    <input type="text" name="msg" id="msg" placeholder="Enter your msg"/><br>
    <input type="submit" id="submit" class="btn btn-default" name="submit" value="Submit"/>
</form>

<script>
$(function(){
   $('#submit').click(function(e){
        e.preventDefault(); 
            var wallet = $('#wallet').val();
            var msg = $('#msg').val();
            var senderwallet = $('#senderwallet').val();
            $.ajax({
            type: "POST",
            url: "<?php echo base_url('main/SednMsg'); ?>",
            data: {wallet:wallet,msg:msg,senderwallet:senderwallet},
            success: function(data){
                 $('#result').html(data); 
                  $('#result').delay(5000).fadeOut('slow');
                }
        });
});
});
</script>

Here is my code in controller,how can i get "success" or "error" message on every click? Where i am wrong ?

function SednMsg()
{
    $wallet=$_POST['wallet'];
    $msg=$_POST['msg'];
    $senderwallet=$_POST['senderwallet'];
    $result['data'] = $this->M_main->SaveMsgs($wallet,$msg,$senderwallet);
    if($result['data']=="1") {
        echo '<div class="alert alert-success">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>Success!</strong>
            </div>';    
    } else {
        echo '<div class="alert alert-success">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>error!</strong>
            </div>';    
    }   
}

CodePudding user response：

Try adding a class with css animation instead of JavaScript setInterval or setTimeout

CodePudding user response：

You need to show your element again if you call it second time.

<script>
$(function(){
   $('#submit').click(function(e){
        e.preventDefault(); 
            var wallet = $('#wallet').val();
            var msg = $('#msg').val();
            var senderwallet = $('#senderwallet').val();
            $.ajax({
            type: "POST",
            url: "<?php echo base_url('main/SednMsg'); ?>",
            data: {wallet:wallet,msg:msg,senderwallet:senderwallet},
            success: function(data){
                 $('#result').html(data); 
                  **$('#result').show(); // added this line**
                  $('#result').delay(5000).fadeOut('slow');
                }
        });
});
});
</script>