web-dev-qa-db-fra.com

Passage de données à une boîte de dialogue jQuery UI

Je développe un site ASP.Net MVC et j'y répertorie certaines réservations d'une requête de base de données dans une table avec un ActionLink pour annuler la réservation sur une ligne spécifique contenant un certain BookingId comme ça:

Mes réservations

<table cellspacing="3">
    <thead>
        <tr style="font-weight: bold;">
            <td>Date</td>
            <td>Time</td>
            <td>Seats</td>      
            <td></td>              
            <td></td>
        </tr>
    </thead>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">13:00 - 14:00</td>
        <td style="width: 100px;">2</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/15">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/15">change</a></td>
    </tr>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">15:00 - 16:00</td>
        <td style="width: 100px;">3</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a></td>
    </tr>  
</table>

Ce qui serait bien si je pouvais utiliser le jQuery Dialog pour faire apparaître un message demandant à l'utilisateur s'il est sûr de vouloir annuler la réservation. J'ai essayé de faire en sorte que cela fonctionne, mais je reste bloqué sur la façon de créer une fonction jQuery qui accepte les paramètres afin de pouvoir remplacer le

<a href="/Booking.aspx/Cancel/10">cancel</a>

avec

<a href="#" onclick="ShowDialog(10)">cancel</a>.

La fonction ShowDialog ouvrirait alors la boîte de dialogue et transmettrait également le paramètre 10 à la boîte de dialogue. Ainsi, si l'utilisateur clique sur Oui, il publiera le href: /Booking.aspx/Change/10

J'ai créé le dialogue jQuery dans un script comme celui-ci:

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        buttons: {
            "Yes": function() {
                alert("a Post to :/Booking.aspx/Cancel/10 would be so Nice here instead of the alert");},
            "No": function() {$(this).dialog("close");}
        },
        modal: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    });
});

et le dialogue lui-même:

   <div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>

Alors finalement, à ma question: comment puis-je accomplir cela? ou y a-t-il une meilleure façon de le faire?

javascriptjqueryasp.net-mvcjquery-uijquery-ui-dialog
83
Frederik

Vous pouvez le faire comme ceci:

  • marque le <a> avec une classe, dites "annuler"

  • configurer le dialogue en agissant sur tous les éléments avec class = "cancel":

    $('a.cancel').click(function() { 
  var a = this; 
  $('#myDialog').dialog({
    buttons: {
      "Yes": function() {
         window.location = a.href; 
      }
    }
  }); 
  return false;
});

(plus vos autres options)

Les points clés ici sont:

  • le rendre aussi discret que possible
  • si tout ce dont vous avez besoin est l'URL, vous l'avez déjà dans le href.

Cependant, je vous recommande d’en faire un POST au lieu d’un GET, puisqu’une action annulation a des effets secondaires et donc ne respecte pas la sémantique de GET ...

45
Mauricio Scheffer

jQuery fournit une méthode qui stocke des données pour vous, pas besoin d'utiliser un attribut factice ni de trouver une solution de contournement à votre problème.

Lier l'événement click:

$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .data('link', this)  // The important part .data() method
        .dialog('open');
});

Et votre dialogue:

$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height:200,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Delete': function() {
            $(this).dialog('close');
            var path = $(this).data('link').href; // Get the stored result
            $(location).attr('href', path);
        }
    }
});
271
Boris Guéry

En ce qui concerne ce que vous faites avec jQuery, ma compréhension est que vous pouvez chaîner des fonctions comme vous avez et que les fonctions internes ont accès aux variables des fonctions externes. De même que votre fonction ShowDialog (x) contient ces autres fonctions, vous pouvez réutiliser la variable x en leur sein et cela sera pris comme référence au paramètre de la fonction externe.

Je suis d’accord avec mausch, vous devriez vraiment envisager d’utiliser POST pour ces actions, ce qui ajoutera un <form> marque autour de chaque élément, mais rend beaucoup moins probable un script ou un outil automatisé déclenchant l’événement Cancel. L'action Modifier peut rester telle quelle car elle (ne fait probablement qu'ouvrir un formulaire d'édition).

2
Falkayn

Après PLUSIEURS HEURES d’essai/attrape, j’ai finalement trouvé cet exemple de travail, qui fonctionne AJAX POST avec de nouvelles lignes ajoutées à la TABLE à la volée (qui était mon vrai problème):

La magie est venue avec le lien suivant:

<a href="#" onclick="removecompany(this);return false;" id="remove_13">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_14">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_15">remove</a>

Ceci est le travail final avec AJAX POST et le dialogue Jquery:

  <script type= "text/javascript">/*<![CDATA[*/
    var $k = jQuery.noConflict();  //this is for NO-CONFLICT with scriptaculous
     function removecompany(link){
        companyid = link.id.replace('remove_', '');
    $k("#removedialog").dialog({
                bgiframe: true,
                resizable: false,
                height:140,
                autoOpen:false,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Are you sure ?': function() {
                        $k(this).dialog('close');
                        alert(companyid);
                        $k.ajax({
                              type: "post",
                              url: "../ra/removecompany.php",
                              dataType: "json",
                              data: {
                                    'companyid' : companyid
                                    },
                              success: function(data) {
                                    //alert(data);
                                    if(data.success)
                                    {
                                        //alert('success'); 
                                        $k('#companynew'+companyid).remove();
                                    }
                          }
                        }); // End ajax method
                    },
                    Cancel: function() {
                        $k(this).dialog('close');
                    }
                }
            });
            $k("#removedialog").dialog('open'); 
            //return false;
     }
    /*]]>*/</script>
    <div id="removedialog" title="Remove a Company?">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        This company will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>
1
Carlitux

J'ai maintenant essayé vos suggestions et constaté que cela fonctionne un peu,

  1. Le dialogue div est toujours écrit en texte clair
  2. Avec la version $ .post, cela fonctionne réellement lorsque le contrôleur est appelé et annule la réservation, mais la boîte de dialogue reste ouverte et la page ne s'actualise pas. Avec la version get, window.location = h.ref fonctionne très bien.

Voir mon "nouveau" script ci-dessous:

$('a.cancel').click(function() {
        var a = this;               
        $("#dialog").dialog({
            autoOpen: false,
            buttons: {
                "Ja": function() {
                    $.post(a.href);                     
                },
                "Nej": function() { $(this).dialog("close"); }
            },
            modal: true,
            overlay: {
                opacity: 0.5,

            background: "black"
        }
    });
    $("#dialog").dialog('open');
    return false;
});

});

Des indices?

oh et mon lien d'action ressemble maintenant à ceci:

<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new  { @class = "cancel" })%>
1
Frederik

En regardant votre code, vous devez ajouter la fonctionnalité pour fermer la fenêtre et mettre à jour la page. Dans votre fonction "Oui", vous devriez écrire:

        buttons: {
            "Ja": function() {
                $.post(a.href);
                $(a). // code to remove the table row
                $("#dialog").dialog("close");
            },
            "Nej": function() { $(this).dialog("close"); }
        },

Le code pour supprimer la ligne de la table n’est pas amusant à écrire, je vous laisse donc traiter des détails les plus importants, mais, en gros, vous devez indiquer à la boîte de dialogue ce qu’elle doit faire après sa publication. C'est peut-être un dialogue intelligent, mais il faut une sorte de direction.

1
thaBadDawg

Ce travail pour moi:

<a href="#" onclick="sposta(100)">SPOSTA</a>

function sposta(id) {
        $("#sposta").data("id",id).dialog({
            autoOpen: true,
            modal: true,
            buttons: { "Sposta": function () { alert($(this).data('id')); } }
        });
    }

Lorsque vous cliquez sur "Sposta" dans la boîte de dialogue, une alerte s’affiche 100

1
maurox

Une solution inspirée par Boris Guery et que j'ai employée ressemble à ceci: Le lien:

<a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>

y lier une action:

$('.remove').live({
        click:function(){
            var data = $('#'+this.id).metadata();
            var id = data.id;
            var name = data.name;
            $('#dialog-delete')
                .data('id', id)
                .dialog('open');    
            return false;
        }
    });

Et ensuite pour accéder au champ id (dans ce cas avec la valeur 15:

$('#dialog-delete').dialog({
    autoOpen: false,
    position:'top',
    width: 345,
    resizable: false,
    draggable: false,
    modal: true,
    buttons: {            
        Cancel: function() {

            $(this).dialog('close');
        },
        'Confirm delete': function() {
            var id = $(this).data('id');
            $.ajax({
                url:"http://example.com/system_admin/admin/delete/"+id,
                type:'POST',
                dataType: "json",
                data:{is_ajax:1},
                success:function(msg){

                }
            })
        }
    }
});
0
Kevin Bradshaw

Ok, le premier problème avec la balise div était assez simple: je viens d’ajouter un style="display:none;" et avant d’afficher la boîte de dialogue, j’ai ajouté ceci dans mon script de boîte de dialogue:

$("#dialog").css("display", "inherit");

Mais pour la version post, je n'ai toujours pas de chance.

0
Frederik

Donnez-vous une idée. Peut-être vous aider si vous voulez contrôler pleinement la boîte de dialogue, essayez d'éviter d'utiliser les options de bouton par défaut et ajoutez des boutons vous-même dans votre #dialog div. Vous pouvez également mettre des données dans un attribut factice de lien, comme Click. appelez attr ("data") quand vous en avez besoin.

0
Yue

j'espère que ça aide

$("#dialog-yesno").dialog({
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    height:180,
    width:350,
    modal: true,
    show: "blind",
    open: function() {
        $(document).unbind('keydown.dialog-overlay');
        },
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
            var dir = $(this).data('link').href;
            var arr=dir.split("-");
            delete(arr[1]);
        },
    "Cancel": function() {
        $(this).dialog("close");
        }
    }
});



<a href="product-002371" onclick="$( '#dialog-yesno' ).data('link', this).dialog( 'open' ); return false;">Delete</a>
0
ffernandez