Specific Confirmation Mode

Navigation
1

<buttontype="button" class="btn btn-danger alert-confirm m-b-10" onclick="_gaq.push(['_trackEvent', 'example', 'try', 'alert-confirm'])"><i class="fa fa-trash fa-lg"></i></button>

What I want is that by clicking on the confirmation button it redirects me to another page but this modal that I am using only has that code which is the code of the button to open the modal my question is how to redirect to another page after the modal confirmation.

modal: 

document.querySelector('.alert-confirm').onclick = function(){
    swal({
                title: "Tem a certeza?",
                text: "Se eliminar não voltará a ver este conteudo!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Sim, apagar isto!",
                closeOnConfirm: false
            },
            function(){
                swal("Apagado!", "A Informação foi apagada permanentemente.", "success");
            });
};
    
asked by anonymous 17.12.2017 / 17:20

1 answer

1

According to your example using the "alert-confirm" class and the querySelector method is not the most recommended practice because if there is more than one declaration of this class on the same page, first element.

The most recommended would be to use a unique id for this button.

An example with id (vanilla): 

let btn = document.getElementById('confirm-btn')

if ( !!btn ) {
    btn.addEventListener('click', function(evt) {
    // para este exemplo
    alert('Confirmation button as been clicked!')
    // redirecionamento
    // location.replace('https://www.google.com')
    }, false)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>




<!-- MODAL -->
<section id="awesome-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content rounded-0">
            <div class="modal-header border-0 rounded-0">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close cp" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body pt-0">
                <div class="col mt-sm-4">
                    <button type="button" data-dismiss="modal" class="btn btn-block btn-secondary rounded-0">Cancel</button>
                </div>
                <div class="col mt-2 mt-sm-4">
                    <button id="confirm-btn" type="button" class="btn btn-block btn-primary rounded-0">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CONTAINER -->
<section class="container-fluid px-0">

    <button type="button" data-toggle="modal" data-target="#awesome-modal" class="btn btn-info rounded-0">Abrir Modal</button>
<section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>

AnexamplewithquerySelector(usingtheclass):

let btn = document.querySelector('.alert-confirm')

if ( !!btn ) {
    btn.addEventListener('click', function(evt) {
    // para este exemplo
    alert('Confirmation button as been clicked!')
    // redirecionamento
    // location.replace('https://www.google.com')
    }, false)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>




<!-- MODAL -->
<section id="awesome-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content rounded-0">
            <div class="modal-header border-0 rounded-0">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close cp" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body pt-0">
                <div class="col mt-sm-4">
                    <button type="button" data-dismiss="modal" class="btn btn-block btn-secondary rounded-0">Cancel</button>
                </div>
                <div class="col mt-2 mt-sm-4">
                    <button type="button" class="btn btn-block btn-primary alert-confirm rounded-0">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CONTAINER -->
<section class="container-fluid px-0">

    <button type="button" data-toggle="modal" data-target="#awesome-modal" class="btn btn-info rounded-0">Abrir Modal</button>
<section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>

Inbothexamplesuse addEventListener instead of just so onclick ... already if the content is inserted dynamically maybe it will be easier to use jQuery: 

 $('body').on('click', '.alert-confirm', function(evt) {
     //
     alert('Confirmation as been clicked!')
     // redirecionamento
     // location.replace('https://www.google.com')
 })

If you are able to "houvir" the event ... you can do any and all treatment, perform functions and then simply redirect: 

location.replace('https://www.google.com')

The URL is of your choice: P

    
17.12.2017 / 19:23
Get information about a data table through SAP ArgumentError when calling function