web-dev-qa-db-fra.com

Passer une variable à la boîte de dialogue de l'interface utilisateur JQuery

Je suis en train de supprimer un enregistrement en utilisant PHP. Je souhaite utiliser une boîte de dialogue JQuery UI pour confirmer l'action, mais je ne sais pas comment passer une variable (mon ID d'enregistrement) à la fonction URL de redirection ni autoriser l'URL à accéder à window.location.href.

$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
    'OK': function() {
            window.location.href = 'url and myvar??';
        $( this ).dialog( "close" );
        },
    'Cancel': function() {
        $( this ).dialog( "close" );
        }
    }
});


$("#delete").click(function() {
    $("#confirm").dialog( "open" ).html ( "Are U Sure?" );
    return false;
});

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>

Y at-il un bon moyen de le faire?

jquery-ui
28
Paolo Rossi

Vous pouvez essayer d’utiliser la méthode .data () pour stocker des données pour vous. Jetez un coup d’œil à cette réponse Passing data to a jQuery UI Dialog

Par exemple, pour passer une variable, vous pouvez la stocker à l’aide de la fonction de données, avant d’ouvrir la boîte de dialogue.

$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");

Ensuite, vous pouvez le récupérer en:

var my_data = $("#dialog_div").data('param_1')
73
akotian

Vous souhaitez modifier la configuration de la boîte de dialogue au clic (dans ce cas, le comportement du bouton Ok). Pour cela tu as beaucoup de solutions toutes moche (imo). Je conseillerais de générer un dialogue à la volée et de le détruire une fois qu'il a été utilisé, quelque chose comme ceci:

$("#delete").click(function(ev) {
    ev.preventDefault(); // preventDefault should suffice, no return false
    var href = $(this).attr("href");
    var dialog = $("<div>Are you sure?</div>");

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                window.location = href;
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
});

Ou encore mieux, encapsulez la boîte de dialogue de confirmation dans une fonction pour pouvoir la réutiliser, comme suit:

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
    return def.promise();
}

Et puis utilisez-le comme si

confirmDialog("are your sure?").done(function() {
    window.location = $(this).attr("href"); 
}).fail(function() {
    // cry a little
});

Vous devrez peut-être vérifier si l'objet différé a été rejeté ou résolu avant de fermer la boîte de dialogue pour vous assurer que la confirmation est rejetée à la fermeture (et pas uniquement en appuyant sur le bouton «Annuler»). Cela peut être fait avec un conditionnel def.state () === "en attente".

Pour plus d'informations sur jquery différé: http://api.jquery.com/category/deferred-object/

7
cernunnos

La suppression d'actions ne devrait probablement pas être effectuée à l'aide d'un GET, mais si vous voulez le faire de cette façon, je vous recommanderais d'utiliser le $ .data dans jQuery afin que chaque lien ait un attribut data-record-id. Ensuite, lorsque vous cliquez sur l'un des liens, la boîte de dialogue s'ouvre et, une fois confirmée, l'ajoute à l'URL et redirige . Exemple: 

$(function(){
    $(".deleteLink").click(function(){
       var id = $(this).data("record-id");
       var myHref = $(this).attr('href');
        $("#confirmDialog").dialog({
            buttons:{
            "Yes": function()
                {
                    window.location.href = myHref + id;
                }
            }
        });
    });

});

<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
   <p>Are you sure?</p>
</div>
0
Pat Burke

  1. HTML

    <a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>

  2. JS

    $('.confirmation-dialog').confirm({ buttons: { Yes: function(){ console.log(this.$target.attr('data-mydata')); No: function(){ } } });

0
nyded