PHP Make HTTP GET Request in Bootstrap Modal

Question

I have a Bootstrap Modal dialog that appears when you click on a link on the body of the page. It contains a button to make a call via a VOIP service - here's the modal code:

 <div class="modal" id="callModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Call Customer</h4> </div> <div class="modal-body"> <p>Calling Fred Flinstone . . . </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="<?php echo $contact1CallBack ;?>" id="callContact"><button type="button" class="btn btn-success">Make Call</button></a> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> 

When the user clicks the Make Call button at the moment it calls the URL in the same window - I would like to remain in the modal window and make the call the HTTP url in the background but not sure how to do this?

Answer 1

From this:

<a href="<?php echo $contact1CallBack ;?>" id="callContact"><button type="button" class="btn btn-success">Make Call</button></a>

To change this:

<button type="button" id="makecall" class="btn btn-success">Make Call</button>

Jquery:

$("#makecall").click(function(){

 $.ajax({

           url:$yoururl/method,
           data:{},
           method:"POST",
           success:function(data){

            }

       });

    });

This will keep you rmodal as it is. In success funciton inside ajax call, you can put code to do what you want to after call is made successfully.

Answer 2

You can make call of api using Ajax

<a href="javascript:" onclick="callapi(<?php echo $contact1CallBack ;?>);" id="callContact"><button type="button" class="btn btn-success">Make Call</button></a>

And call API by this code

<script>
function callapi (api) {

                $.ajax({
                    url: api,
                    type: 'GET',
                    dataType: 'json',
                    crossDomain: true,
                    success: function (data, textStatus, xhr) {
                        console.log(data);
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });

        }
    </script>

So it will not reload your page and call API in background

Hope this help you