Question

131

Wait for return value from Javascript modal

rated 0 times [ 134] [ 3] / answers: 1 / hits: 36850 / 12 Years ago, mon, august 13, 2012, 12:00:00

OK, I'm by no means a JavaScript guru, and perhaps I'm still thinking in terms of Desktop software development, but this is what I'm trying to achieve :

I'm using Twitter Bootstrap's Modals

In some cases, before an action takes place, I want to verify it with a Are you sure? (Yes/No) Modal Dialog.

Question :

What should the inner logic be?

I mean :

User clicks buttonA (which ultimately performs actionA)

I want to launch the modal, wait for the input (either of the 2 buttons - yes/no) and/or pass it to some checking routine before performing(or not) actionA

This my HTML code for the modal (should the buttons be - somehow - acting via their onclick javascript routines?) - also note that #confirmMessage is going to be variable.

<div class=modal fade hide id=confirmAlert>

    <div class=modal-header>

        <button type=button class=close data-dismiss=modal>x</button>

        <h3 id=confirmTitle>Are you sure?</h3>

    </div>



    <div class=modal-body>

        <p id=confirmMessage>Body</p>

    </div>

    <div class=modal-footer>

        <a href=# class=btn data-dismiss=modal>Cancel</a>

        <a href=# class=btn btn-danger>Yes</a>

    </div>

</div>

Just an idea:

Write a function like checkBeforeExec(message,functionToExec)

Set #confirmMessage to message and Yes' href to javascript:functionToExec

Makes sense?

I know it may sound a bit confusing - but I simply do not know what the most javascript-friendly way to do this would be...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

agustindejonm

Add To Favorites

Follow

Total Points: 738

Total Questions: 84

Total Answers: 84

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

agustindejonm questions

1 Discord.js how to fetch message by content

Fri, Jun 25, 21, 00:00, 3 Years ago

1 Can't acess variable outside forEach loop JavaScript

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Security warning in the console of BrowserWindow (electron ^9.2.0)

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Filter array of objects based on the input passed: Javascript

Wed, Jul 15, 20, 00:00, 4 Years ago

1 how to refresh component in react js

Sat, May 16, 20, 00:00, 4 Years ago

View All

answered 12 Years ago kamryn · Accepted Answer

I created a dialog manager around modal, with confirm helper function that does essentially this:

var callback = function(result) {

  alert(result);

}); // define your callback somewhere



$('#confirmAlert').on('click', '.btn, .close', function() {

  $(this).addClass('modal-result'); // mark which button was clicked

}).on('hidden', function() {

  var result = $(this).find('.modal-result').filter('.btn-danger').length > 0; // attempt to filter by what you consider the YES button; if it was clicked, result should be true.



  callback(result); // invoke the callback with result

});

Also, you should make both the Cancel and Yes button data-dismiss=modal.

Here's a fiddle, with a simple example of my dialog manager.

Note, that if you are using Bootstrap 3, you should add a handler to the hidden.bs.modal event instead of hidden.