B4J Question Jquery+ajax Showing alert in <div>

[Chris Guanzon]

Hello! I have a problem showing the data inside "<div class='alert-success'". The alert is triggered if the post method is successful. It seems like it is refreshing again after the post method success.

<div id="response"></div>

My jQuery code + AJAX

<script type="text/javascript">
    $(function () {
        //(document).ready
        var $username = $('#username');
        var $password = $('#password');

        $("#btnSignIn").click(function(){
            var user_credentials = {
                username: $username.val(),
                password: $password.val()
            };
            $.ajax({
                type: 'POST',
                url: '/users/login',
                data: user_credentials,
                success: function(data) {
                    //alert alert-success
                    $("#response").html("<div class='alert alert-success'><p><strong>" + data + "</strong> You are using an awesome template!</p>-</div>");
                },
                error: function(data) {
                    //alert alert-danger
                    $("#response").html("<div class='alert alert-danger'><p><strong>"+ data + "</strong> You are using an awesome template!</p>-</div>");
                }
            });
        });
    });
</script>

Here's my b4j code

Try
        If req.Method <> "POST" Then
            resp.Write(LastException)
            Return
        End If
        
        Dim username As String = req.GetParameter("username")
        Dim password As String = req.GetParameter("password")
        
        Log(username)
        Log(password)
        
        resp.Write("Success")
    Catch
        Log(LastException)
    End Try

 

[MicroDrie]

Without a test example program I think the problem is in your write command. In similar solutions I've seen, the HTML DOM representation of the <div> is manipulated. You can get inspired with How to Hide and Show a <div>

 

[aeric]

Try:

$("#btnSignIn").click(function(event) {
    event.preventDefault(); // <-- add this
    // the rest of code
}