moses toh moses toh - 6 months ago 9
Javascript Question

How to call class first without call modal if it meets certain conditions?

Demo and Full Code is like this : https://jsfiddle.net/oscar11/xzxrp7nn/2/

My HTML Code is like this :

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg check_session" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<label for="idTourDateDetails">Tour Start Date:</label>
<div class="form-group">
<div class="input-group">


</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->


My Javascript Code is like this :

$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
}
}
})
});


When
response != 'exist_session'
, I want the system display alert message without display modal. So only display alert message.

Any solution to solve my problem?

Thank you

Answer

You remove data-toggle and data-target in button

<button class="btn btn-primary btn-lg check_session">Launch demo modal</button>

then you can call it in javascript.

$(".check_session").click(function(){
    $.ajax({ 
        success : function(response)
        {
            response = 'no_session';
            if(response != 'exist_session')
            {
                alert('Please login');
            } else {
                $('#myModal').modal()  
            }
        }
    })
});

Working Demo https://jsfiddle.net/xzxrp7nn/4/

Comments