webentwicklung-frage-antwort-db.com.de

Daten an ein jQuery UI-Dialogfeld übergeben

Ich entwickle eine ASP.Net MVC Site und liste darauf einige Buchungen aus einer Datenbankabfrage in einer Tabelle mit einem ActionLink auf, um die Buchung für eine bestimmte Zeile mit einem bestimmten BookingId so was:

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 den jQuery Dialog benutzen könnte, um eine 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 bleibe bei der Erstellung einer jQuery-Funktion stecken, die Parameter akzeptiert, damit ich die ersetzen kann

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

mit

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

Die Funktion ShowDialog 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 gesendet wird.

Ich habe den jQuery-Dialog in einem Skript wie diesem 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>

Nun zu meiner Frage: Wie kann ich das erreichen? oder gibt es eine bessere möglichkeit?

83
Frederik

Du könntest es so machen:

  • markiere die <a> mit einer Klasse sagen "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 sie bereits in der href.

Ich empfehle jedoch, dies als POST anstelle von GET zu definieren, da eine Abbruchaktion Nebenwirkungen hat und daher entspricht nicht der GET-Semantik ...

45

jQuery bietet eine Methode zum Speichern von Daten, ohne dass ein Dummy-Attribut verwendet oder eine Problemumgehung 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);
        }
    }
});
271
Boris Guéry

Was Sie mit jQuery machen, ist meines Wissens nach, dass Sie Funktionen so verketten können, wie Sie sie haben, und die inneren haben Zugriff auf Variablen von den äußeren. Wenn Ihre ShowDialog (x) -Funktion also diese anderen Funktionen enthält, können Sie die in ihnen enthaltene x-Variable wiederverwenden und sie wird als Referenz auf den Parameter der äußeren Funktion verwendet.

Ich bin mit Mausch einverstanden, Sie sollten sich unbedingt POST) für diese Aktionen ansehen, bei denen jedem Element ein <form> - Tag hinzugefügt wird, aber die Wahrscheinlichkeit eines automatisierten Skripts oder Tools erhöht wird Auslösen des Cancel-Ereignisses ist weitaus unwahrscheinlicher. Die Change-Aktion kann so bleiben, wie sie ist (vermutlich wird nur ein Bearbeitungsformular geöffnet).

2
Falkayn

Nach MEHREREN STUNDEN von try/catch bin ich endlich mit diesem Arbeitsbeispiel gekommen. Es arbeitet an AJAX POST mit neuen Zeilen, die direkt an die TABELLE angehängt werden war mein echtes Problem):

Die Magie kam mit diesem 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 das endgültige Arbeiten 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>
1
Carlitux

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

  1. Der Dialog div ist immer im Klartext geschrieben
  2. In der Version $ .post 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 klappt das prima.

Sehe 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 Aktionslink sieht jetzt so aus:

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

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

Es macht keinen Spaß, den Code zum Entfernen der Tabellenzeile zu schreiben. Daher werde ich Sie mit den Details befassen, aber im Grunde müssen Sie dem Dialogfeld mitteilen, was zu tun ist, nachdem Sie es veröffentlicht haben. Es mag ein kluger Dialog sein, aber es braucht eine Richtung.

1
thaBadDawg

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 auf "Sposta" im Dialogfeld klicken, wird die Meldung 100 angezeigt

1
maurox

Eine von Boris Guery inspirierte Lösung 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){

                }
            })
        }
    }
});
0
Kevin Bradshaw

Ok, das erste Problem mit dem div-Tag war einfach genug: Ich habe ihm gerade einen style="display:none;" Hinzugefügt und dann, bevor ich den Dialog zeigte, folgendes in mein Dialogskript eingefügt:

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

Aber für die Postversion habe ich immer noch Pech.

0
Frederik

Wenn Sie den Dialog vollständig steuern möchten, können Sie versuchen, die Verwendung der Standardschaltflächenoptionen zu vermeiden und Schaltflächen in Ihrem #dialog div selbst hinzuzufügen. Sie können Daten auch in ein Dummy-Attribut eines Links einfügen, z. B. Click. Rufen Sie attr ("data") auf, wenn Sie es brauchen.

0
Yue

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