डेटा को एक jQuery UI डायलॉग में पास करना

Question 1

मैं एक ASP.Net MVCसाइट विकसित कर रहा हूं और इस पर मैं एक तालिका में एक डेटाबेस क्वेरी से कुछ बुकिंग को सूचीबद्ध करता हूं, जिसमें ActionLinkएक विशिष्ट पंक्ति पर बुकिंग को रद्द करने के साथ कुछ BookingIdइस तरह से किया जा सकता है:

मेरी बुकिंग

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

क्या अच्छा होगा यदि मैं jQuery Dialogकिसी संदेश को पॉपअप करने के लिए उपयोग कर सकता हूं यदि यह सुनिश्चित हो कि उपयोगकर्ता बुकिंग रद्द करना चाहता है। मैं काम करने के लिए इसे पाने की कोशिश कर रहा हूं, लेकिन मैं इस बात पर अड़ा हुआ हूं कि कैसे एक jQuery फ़ंक्शन बनाया जाए जो मापदंडों को स्वीकार करता है ताकि मैं इसे बदल सकूं

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

साथ में

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

ShowDialogसमारोह फिर संवाद खोलता था और इतनी है कि यदि उपयोगकर्ता क्लिक करता है हाँ है तो यह href पोस्ट करेंगे भी संवाद करने के लिए पैरामीटर को 10 पारित:/Booking.aspx/Change/10

मैंने jQuery के डायलॉग को इस तरह से स्क्रिप्ट में बनाया है:

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

और संवाद ही:

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

तो आखिरकार मेरे सवाल पर: मैं इसे कैसे पूरा कर सकता हूं? या इसे करने का एक बेहतर तरीका है?

Question 2

आप इसे इस तरह से कर सकते हैं:

<a>एक वर्ग के साथ चिह्नित करें , "रद्द करें" कहें

कक्षा = "रद्द करें" के साथ सभी तत्वों पर अभिनय करके संवाद सेट करें:

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

(अपने अन्य विकल्प)

यहाँ प्रमुख बिंदु हैं:

इसे जितना हो सके विनीत बनाएं
अगर आपको केवल URL की आवश्यकता है, तो आपके पास पहले से ही यह है।

हालाँकि, मेरा सुझाव है कि आप इसे एक GET के बजाय एक POST बनाते हैं, क्योंकि एक रद्द क्रिया के दुष्प्रभाव होते हैं और इस प्रकार GET शब्दार्थ का अनुपालन नहीं होता है ...

Question 3

jQuery एक तरीका प्रदान करता है जो आपके लिए डेटा संग्रहीत करता है, डमी विशेषता का उपयोग करने या अपनी समस्या को हल करने की आवश्यकता नहीं है।

क्लिक इवेंट को बांधें:

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

और आपका संवाद:

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

Question 4

JQuery के साथ आप जो कर रहे हैं, उसके संदर्भ में, मेरी समझ यह है कि आप अपने जैसे फंक्शंस को चेन कर सकते हैं और भीतर वालों को बाहरी लोगों से वेरिएबल्स तक पहुंच होती है। तो आपका ShowDialog (x) फ़ंक्शन में ये अन्य फ़ंक्शन हैं, आप उनके भीतर x चर का फिर से उपयोग कर सकते हैं और इसे बाहरी फ़ंक्शन से पैरामीटर के संदर्भ के रूप में लिया जाएगा।

मैं मौस के साथ सहमत हूं, आपको वास्तव में इन कार्यों के लिए POST का उपयोग करना चाहिए, जो <form>प्रत्येक तत्व के चारों ओर एक टैग जोड़ देगा , लेकिन एक स्वचालित स्क्रिप्ट या टूल की संभावना को रद्द कर सकता है, जिससे ईवेंट रद्द हो जाएगा। चेंज एक्शन इस प्रकार बना रह सकता है क्योंकि यह (संभवतः बस एक एडिट फॉर्म खोलता है)।

Question 5

मैंने अब आपके सुझावों की कोशिश की और पाया कि यह थोड़े काम करता है,

संवाद div सादे शब्दों में लिखा गया है
$ .Post संस्करण के साथ यह वास्तव में उन शब्दों में काम करता है जो नियंत्रक को बुलाए जाते हैं और वास्तव में बुकिंग को रद्द कर देते हैं, लेकिन संवाद खुला रहता है और पृष्ठ ताज़ा नहीं होता है। संस्करण के साथ window.location = h.ref बढ़िया काम करता है।

नीचे मेरी "नई" स्क्रिप्ट देखें:

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

});

कोई सुराग?

ओह और मेरा एक्शन लिंक अब इस तरह दिखता है:

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

Question 6

अपने कोड को देखते हुए कि आपको क्या करना है, विंडो बंद करने और पेज को अपडेट करने के लिए कार्यक्षमता जोड़ना है। अपने "हां" फ़ंक्शन में आपको लिखना चाहिए:

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

तालिका पंक्ति को हटाने के लिए कोड लिखने में मज़ा नहीं आता है इसलिए मैं आपको मजाकिया किरकिरा विवरण के साथ सौदा करने दूंगा, लेकिन मूल रूप से, आपको यह डायलॉग बताने की आवश्यकता है कि इसे पोस्ट करने के बाद आपको क्या करना है। यह एक स्मार्ट डायलॉग हो सकता है लेकिन इसके लिए किसी तरह के निर्देश की जरूरत है।

Question 7

कोशिश / पकड़ के कई घंटे के बाद मैं अंत में इस काम के उदाहरण के साथ आया था, नई पंक्तियों के साथ AJAX POST पर इसका काम मक्खी पर टेबल के लिए अपील करता है (यह मेरी असली समस्या थी):

इस जादू के साथ आया था लिंक:

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

यह AJAX POST और 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>

Question 8

मेरे लिए यह काम:

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

जब आप डायलॉग अलर्ट 100 में "स्पॉस्टा" पर क्लिक करते हैं

Question 9

ओके टैग के साथ पहला अंक काफी आसान था: मैंने इसमें सिर्फ एक जोड़ा style="display:none;"और फिर डायलॉग दिखाने से पहले मैंने इसे अपने डायलॉग स्क्रिप्ट में जोड़ा:

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

लेकिन पोस्ट संस्करण के लिए मैं अभी भी भाग्य से बाहर हूं।

Question 10

बस आपको कुछ विचार आपको मदद कर सकते हैं, यदि आप पूरी तरह से नियंत्रण संवाद चाहते हैं, तो आप डिफ़ॉल्ट बटन विकल्पों के उपयोग से बचने की कोशिश कर सकते हैं, और अपने #dialog div में अपने आप से बटन जोड़ सकते हैं। आप लिंक की कुछ डमी विशेषता में भी डेटा डाल सकते हैं, जैसे क्लिक करें। जब आपको इसकी आवश्यकता हो तो attr ("डेटा") को कॉल करें।

Question 11

बोरिस गुएरी द्वारा प्रेरित एक समाधान जो मैंने नियोजित किया वह इस तरह दिखता है: लिंक:

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

एक कार्रवाई के लिए यह बाँध:

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

और फिर आईडी फ़ील्ड का उपयोग करने के लिए (इस मामले में 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){

                }
            })
        }
    }
});

Question 12

आशा है कि ये आपकी मदद करेगा

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