दिलचस्प पोस्ट
सी में बिल्टीन्ट को लागू करने का सबसे आसान तरीका क्या है? 1/3 = 0 का परिणाम क्यों है? एचटीएमएल युक्त टैग छोडो, टैग को अनदेखा करें क्रॉस-डोमेन एजेएक्स एक्स-अनुरोधित- हेडर के साथ नहीं भेजता है HTML5 सर्वोत्तम अभ्यास; अनुभाग / हेडर / अलग / आलेख तत्व क्या क्लास पुस्तकालय में एक App.config फ़ाइल हो सकती है? जावास्क्रिप्ट onclick घटना फ्लैश ऑब्जेक्ट पर एक फ़ोल्डर से एक submodule भंडार बनाएँ और अपने git प्रतिबद्ध इतिहास रखो इस जावा विधि में दो रिटर्न प्रकार क्यों दिखाई देते हैं? जावा एक नया ObjectInputStream ब्लॉक बनाना DOCTYPE की कार्यक्षमता क्या है? mysqli: क्या यह एक कथन में कई क्वेरी तैयार कर सकता है? मैं रंगों और मूल्यों के साथ मैट्रिक्स कैसे देखूं? Install.packages चलाने से पहले इंस्टॉल किए गए पैकेज की जांच करें () आईओएस 9 में स्वाइप-योग्य तालिका देखें सेल

एक jQuery UI संवाद में डेटा पास करना

मैं एक एएसपी.नेट एमवीसी साइट को विकसित कर रहा हूं और उस पर मैं एक एक्शनलिंक के साथ एक टेबल में एक डेटाबेस क्वेरी से कुछ बुकिंग की सूची देता हूं ताकि एक निश्चित पंक्ति पर आरक्षण को इस तरह से एक निश्चित बुकिंग के साथ रद्द किया जा सके:

मेरी बुकिंग

<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 के डायलॉग का उपयोग करके संदेश भेज सकता हूं कि क्या उपयोगकर्ता यकीन है कि वह बुकिंग रद्द करना चाहता है। मैं काम करने के लिए इसे प्राप्त करने का प्रयास कर रहा हूं लेकिन मैं एक jQuery फ़ंक्शन बनाने पर <a href="/Booking.aspx/Cancel/10">cancel</a> रहा हूं, जो पैरामीटर स्वीकार करता है ताकि मैं <a href="/Booking.aspx/Cancel/10">cancel</a> <a href="#" onclick="ShowDialog(10)">cancel</a> । शोडीआलाओग समारोह तब संवाद खोलागा और पैरामीटर 10 से भी संवाद करेगा ताकि उपयोगकर्ता हाँ पर क्लिक करें तो यह href को पोस्ट करेगा / / 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> 

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

वेब के समाधान से एकत्रित समाधान "एक jQuery UI संवाद में डेटा पास करना"

आप ऐसा कर सकते हैं:

  • <a> एक वर्ग के साथ चिह्नित करें, "रद्द करें" कहें
  • वर्ग = "रद्द करें" के साथ सभी तत्वों पर अभिनय करके संवाद सेट करें:

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

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

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

  • संभव के रूप में इसे विवादास्पद बनाओ
  • अगर आपको यूआरएल की ज़रूरत है, तो आप पहले से ही href में हैं।

हालांकि, मैं सुझाव देता हूं कि आप इसे GET के बजाय एक पोस्ट बनाते हैं, क्योंकि रद्द किए जाने की कार्रवाई के साइड इफेक्ट होते हैं और इस तरह से गेट सिमेंटिक्स का अनुपालन नहीं होता …

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

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

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

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

  1. डायलॉग डिवेल को सादे टेक्स्ट में लिखा गया है
  2. $। पोस्ट संस्करण के साथ यह वास्तव में काम करता है कि नियंत्रक को बुलाया जाता है और वास्तव में बुकिंग रद्द कर देता है, लेकिन संवाद खुले रहता है और पृष्ठ ताज़ा नहीं होता है पाने के संस्करण के साथ 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" })%> 

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

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

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

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

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

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

यह एजेएक्स पोस्ट और जेक्जरी संवाद के साथ अंतिम काम है:

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

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

<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 में "स्पोटा" पर क्लिक करते हैं

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

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

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

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

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

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

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

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