Übergeben von Daten an einen jQuery UI-Dialog

Ich entwickle eine ASP.Net MVCSite und liste darauf einige Buchungen aus einer Datenbankabfrage in einer Tabelle mit einem ActionLinkauf, um die Buchung in einer bestimmten Zeile mit einem bestimmten BookingIdwie folgt zu stornieren :

Meine Buchungen

<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>

Was wäre schön, wenn ich das verwenden könnte, um jQuery Dialogeine Nachricht zu öffnen, in der gefragt wird, ob der Benutzer sicher ist, dass er die Buchung stornieren möchte. Ich habe versucht, dies zum Laufen zu bringen, aber ich bin immer wieder dabei, eine jQuery-Funktion zu erstellen, die Parameter akzeptiert, damit ich die ersetzen kann

<a href="https://stackoverflow.com/Booking.aspx/Cancel/10">cancel</a>

mit

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

Die ShowDialogFunktion würde dann den Dialog öffnen und auch den Parameter 10 an den Dialog übergeben, so dass, wenn der Benutzer auf Ja klickt, die href:/Booking.aspx/Change/10

Ich habe den jQuery-Dialog in einem Skript wie dem folgenden erstellt:

$(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"
        }
    });
});   

und der Dialog selbst:

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

Also endlich zu meiner Frage: Wie kann ich das erreichen? oder gibt es einen besseren weg dazu?

Sie könnten es so machen:

• Markieren Sie das <a>mit einer Klasse und sagen Sie "Abbrechen".

• Richten Sie den Dialog ein, indem Sie auf alle Elemente mit class = "cancel" einwirken:

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

(plus Ihre anderen Optionen)

Die wichtigsten Punkte hier sind:

• mach es so unauffällig wie möglich
• Wenn Sie nur die URL benötigen, haben Sie diese bereits in der href.

Ich empfehle jedoch, dass Sie dies als POST anstelle eines GET festlegen, da eine Abbruchaktion Nebenwirkungen hat und daher nicht der GET-Semantik entspricht ...

jQuery bietet eine Methode, mit der Daten für Sie gespeichert werden, ohne dass ein Dummy-Attribut verwendet oder eine Problemumgehung für Ihr Problem gefunden werden muss.

Binden Sie das Klickereignis:

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

Und dein Dialog:

$("#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);
        }
    }
});

In Bezug auf das, was Sie mit jQuery tun, ist mein Verständnis, dass Sie Funktionen wie Sie verketten können und die inneren Zugriff auf Variablen von den äußeren haben. Wenn Ihre ShowDialog (x) -Funktion diese anderen Funktionen enthält, können Sie die darin enthaltene x-Variable wiederverwenden und sie wird als Referenz auf den Parameter der äußeren Funktion verwendet.

Ich stimme mausch zu. Sie sollten sich wirklich die Verwendung von POST für diese Aktionen ansehen, bei denen ein <form>Tag um jedes Element hinzugefügt wird , aber die Wahrscheinlichkeit, dass ein automatisiertes Skript oder Tool das Ereignis "Abbrechen" auslöst, sehr viel geringer ist. Die Aktion Ändern kann unverändert bleiben, da sie vermutlich nur ein Bearbeitungsformular öffnet.

Ich habe jetzt Ihre Vorschläge ausprobiert und festgestellt, dass es irgendwie funktioniert,

1. Der Dialog div ist immer im Klartext geschrieben
2. Mit der $ .post-Version funktioniert es tatsächlich so, dass der Controller aufgerufen wird und die Buchung tatsächlich storniert, der Dialog jedoch geöffnet bleibt und die Seite nicht aktualisiert wird. Mit der get version window.location = h.ref funktioniert das super.

Siehe mein "neues" Skript unten:

$('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;
});

});

Irgendwelche Hinweise?

Oh, und mein Action-Link sieht jetzt so aus:

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

Wenn Sie sich Ihren Code ansehen, müssen Sie die Funktionalität hinzufügen, um das Fenster zu schließen und die Seite zu aktualisieren. In Ihrer "Ja" -Funktion sollten Sie schreiben:

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

Das Schreiben des Codes zum Entfernen der Tabellenzeile macht keinen Spaß, daher lasse ich Sie sich mit den Details befassen, aber im Grunde müssen Sie dem Dialogfeld mitteilen, was zu tun ist, nachdem Sie ihn veröffentlicht haben. Es mag ein kluger Dialog sein, aber es braucht eine Richtung.

Nach MEHREREN STUNDEN von try / catch kam ich endlich zu diesem Arbeitsbeispiel. Die Arbeit an AJAX POST mit neuen Zeilen wird im laufenden Betrieb an die TABELLE angehängt (das war mein eigentliches Problem):

Die Magie kam mit folgendem Link:

<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>

Dies ist die letzte Arbeit mit AJAX POST und Jquery Dialog:

  <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>

Diese Arbeit für mich:

<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')); } }
        });
    }

Wenn Sie in der Dialogalarmanzeige 100 auf "Sposta" klicken

Ok, das erste Problem mit dem div-Tag war einfach genug: Ich habe gerade ein hinzugefügt style="display:none;"und bevor ich den Dialog anzeigte, habe ich dies in meinem Dialogskript hinzugefügt:

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

Aber für die Post-Version habe ich immer noch kein Glück.

Geben Sie nur eine Idee, die Ihnen helfen kann. Wenn Sie den Dialog vollständig steuern möchten, können Sie versuchen, die Verwendung von Standardschaltflächenoptionen zu vermeiden, und selbst Schaltflächen in Ihrem #dialog div hinzufügen. Sie können Daten auch in ein Dummy-Attribut eines Links wie Click einfügen. Rufen Sie attr ("data") auf, wenn Sie es brauchen.

Eine von Boris Guery inspirierte Lösung, die ich verwendet habe, sieht folgendermaßen aus: Der Link:

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

binde eine Aktion daran:

$('.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;
        }
    });

Und dann, um auf das ID-Feld zuzugreifen (in diesem Fall mit dem Wert 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){

                }
            })
        }
    }
});

ich hoffe das hilft

$("#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>