Bootstrap boîte de dialogue de confirmation onclick confirmation de l'événement

Je suis en train d'écrire ma propre méthode qui appelle la BootstrapDialog et crée une popup de confirmation. Si l'utilisateur sélectionne "confirmer" la méthode retourne true, et de continuer à appeler dans le cadre du programme d'action. Le code que j'ai pour l'instant:

 /**
 * Confirm window
 *
 * @param {type} message
 * @param {type} callback
 * @returns {undefined}
 */
BootstrapDialog.confirmation = function(title, message) {

    var callback = function(result) {
        console.log(result);
        return result;
    };

    var b = new BootstrapDialog({
        title: title,
        message: message,
        closable: false,
        data: {
            'callback': callback
        },
        buttons: [{
                label: 'Cancel',
                action: function(dialog) {
                    typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
                    dialog.close();
                }
            }, {
                label: 'Continue',
                cssClass: 'btn-primary',
                action: function(dialog) {
                    typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
                    dialog.close();
                }
            }]
    }).open();


    return callback;


};

Je suis l'appel de la js comme suit:

<h:commandButton type="button" value="Exit" action="myaction" styleClass="btn btn-default" onclick="return BootstrapDialog.confirmation('Data unsaved', 'Are you sure you want to continue');"/>

La boîte de dialogue pop-up très bien, le problème est qu'il n'est pas de retourner true /false. J'ai modelé mon js après cet exemple: http://nakupanda.github.io/bootstrap3-dialog/

OriginalL'auteur Sixthpoint | 2014-08-01

2

Je ne pense pas que vous voulez vraiment augmenter BootstrapDialog. Et je ne serais pas attendent à ce que la boîte de dialogue de retourner quoi que ce soit, car il va fonctionner de manière asynchrone (il doit attendre que l'utilisateur d'agir en appuyant sur un bouton.) Si vous avez besoin d'interagir avec elle grâce à ses rappels.

Je ne suis pas familier avec bootstrap3-dialog au-delà de ce que je viens de voir l'écrémage sa page Github de sorte qu'il peut vous proposer d'autres rappels ou des événements de le faire plus proprement. Mais je pense que cela va accomplir à peu près ce que vous êtes après:
```
function letUserExit() {
    //Add code here to redirect user where she expects to go 
    //when pressing exit button or to submit a form or whatever.
}

var exitConfirmDialog = new BootstrapDialog({
    title: 'Data unsaved',
    message: 'Are you sure you want to continue?',
    closable: false,
    buttons: [
        {
            label: 'Cancel',
            action: function(dialog) {
                dialog.close();
            }
        },
        {
            label: 'Continue',
            cssClass: 'btn-primary',
            action: function(dialog) {
                letUserExit();
            }
        }
    ]
});

//Add event to invoke dialog to your exit button here
$('button.exit').on('click', function() {
    //Show or open? Not quite sure what difference is. Use the one
    //that's most appropriate.
    exitConfirmDialog.show();

    //Stop any events (like a form being submitted or user being
    //redirected.) Need to wait until user responds to modal and
    //have event take place then.
    return false;
});
```
Cela serait tout de même poser un problème dans le cas de l'attente d'une confirmation car cela impliquerait une tâche synchrone. Je suis en train d'essayer d'obtenir cette fonction, comme le javascript message de confirmation
Je ne comprends pas ce que tu veux dire par "cas de l'attente d'une confirmation car cela impliquerait une tâche synchrone." Cela devrait fonctionner comme un javascript confirmer.
donc, en ajoutant un retour véritable à letUserExit() il s'appliquerait dans le cas de mon événement onclick pour jsf?
Javascript est confirm s'arrête le navigateur jusqu'à ce que l'utilisateur actes. C'est pourquoi il est en mesure d'être traités de manière synchrone. Bootstrap est le dialogue n'est pas conçu pour fonctionner de cette façon. L'utilisateur sera toujours en mesure de cliquer sur les autres parties de la page lorsque la boîte de dialogue qui apparaît, par exemple, qu'il ne peut pas le faire avec les autochtones de dialogue de confirmation. La question est: que voulez-vous arriver lorsque l'utilisateur clique sur continuer et confirme l'intention. Rediriger vers une autre page? Soumettre un formulaire? C'est ce que vous mettez dans letUserExit (ou dans Continuer le bouton de rappel directement).
Une remarque: vous devrez peut-être avoir votre sortie, cliquez sur le bouton de rappel retour de faux, de sorte que tout événement, comme une soumission d'un formulaire, ne se propagent pas. (Je vais mettre à jour mon code.) Tout événement que vous souhaitez voir se produire après que l'utilisateur confirme doit être mis à l'intérieur de la Continuent de rappel. Le bouton lui-même devrait vraiment il suffit d'ouvrir le fichier de bootstrap modal.

OriginalL'auteur klenwell
0

Je suis de nouveau avec Bootstrap et découverte de bootstrap dialogue que deux heures plus tôt, donc, ma réponse vaut ce qu'elle vaut... (français en disant: comment est-il traduire en anglais ? ?)

J'ai vite couru dans un problème similaire : comment utiliser un joli bootstrap confirmer pour remplacer le moche javascript confirmer API sur soumettre cliquez sur le bouton?...

Comme KLenwel dit, confirmer, c'est une API synchrones, bootstrap dialogue est un système. Votre fils n'a tout simplement pas attendre pour l'utilisateur de répondre à publier (ou non).

J'ai utilisé un bouton secondaire pour faire apparaître la boîte de dialogue de confirmation. Le vrai bouton soumettre cachées. Le Bootstrap boîte de dialogue confirmer les feux de cliquer sur le bouton soumettre, en préservant à la fois le javascript gestionnaire de soumission et les en-têtes http envoyés au serveur.

Cet exemple de code est un extrait d'un ASP.Net Webform page, à l'aide de la liaison de données pour donner un unique nom de classe css à l'invisible bouton de sorte qu'il peut facilement être déclenchée par le javascript de la boîte de dialogue de rappel. J'ai utilisé le CssClass de propriété, ne pas utiliser l'id de la propriété. Ce n'est que pour ASP.Net raisons.
```
<asp:Button style="display: none" runat="server" CssClass='<%# Eval( "Id" ) %>' OnCommand="Delete" CommandName='<%# Eval( "Id" ) %>' />
<input type="button" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('.<%# Eval( "Id" ) %>').click(); } )" />
```
La même chose, en pur HTML, ASP.Net WebForms indépendant (utilise l'id du contrôle) :
```
<input type="submit" style="display: none" id="TheSubmitButton" onclick="alert('ok, submit will be fired');" />
<input type="button" title="Delete" data-placement="bottom" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('#TheSubmitButton').click(); } )" />
```
OriginalL'auteur Rikou

j'ai eu la même question, mais j'ai résolu en utilisant la fonction eval(). La fonction est

function showConfirmBootstrap(type,title,mesagge, myFunction){

    BootstrapDialog.confirm({
        size: "size-small",
        type: "type-"+type, 
        title: title,
        message: mesagge,
        cssClass: 'delete-row-dialog',
        closable: true,
        callback: function(result) {
            if(result) { eval(myFunction); }
        }
    });
}

Lorsque le résultat est true, l'application va faire myFunction. Comment vous voyez, myFunction est un paramètre de la fonction principale.

Vous pouvez envoyer le type bootstrap, le titre et le message en tant que paramètres.

En est un exemple:

showConfirmBootstrap("danger","Error","Do you want do this function?", "alert(5)")

OriginalL'auteur David Medina

Vous devez vous connecter pour publier un commentaire.