पूर्ण कैलकुलेटर के साथ jQuery संवाद का उपयोग कैसे करें कॉलबैक का चयन करें?

Question

मुझे jQuery के बारे में एक मूलभूत भ्रम है, और शायद जावास्क्रिप्ट काम करता है। मुझे एक ही समस्या है, jQuery कार्यों में पैरामीटर कैसे पास करें ताकि बदले में उनके तरीके उन चरों का उपयोग करके फ़ंक्शंस को कॉल कर सकें। मेरा सबसे हालिया उदाहरण यहां दिया गया है:

मैं fullcalendar प्लगइन का उपयोग कर रहा हूं। यदि मैं कैलेंडर पर क्लिक करता हूं, तो यह कॉलबैक विधि 'चयन' को सक्रिय करता है। चुनिंदा कॉलबैक स्वचालित रूप से कुछ पैरामीटर दिए जाते हैं: 'startDate' 'endDate', आदि। मैं जो चाहता हूं वह अतिरिक्त जानकारी एकत्र करने के लिए एक jQuery संवाद खोलना है और फिर सर्वर पर नया ईवेंट पोस्ट करना है। इस की तर्ज पर:

<div title = 'How cool is this event?' id='newEventPopup'> 
    <select id='coolness'> 
     <option value = 'super'>Super!</option> 
     <option value = 'cool'>Cool</option> 
     <option value = 'dorky'>Dorky</option> 
     <option value = 'lame'>Lame!</option> 
    </select> 
</div> 

अंत में, मैं के साथ ही संवाद करने के लिए एक बटन जोड़ने के लिए FullCalendar चर पोस्ट करने के लिए करना चाहते हैं:

$('calendar').fullcalendar({ 
... 
select: function (startDate, endDate) { 
    $('#newEventPopup').dialog('open'); 

html में

मैं इस तरह कुछ है सर्वर के लिए नया वेरिएबल:

var coolness = $('#coolness'); 
$('#newEventPopup').dialog({ 
    modal: true, 
    autoOpen: false, 
    ... 
    button: { 
     Save : function(){ 
      $.ajax({ 
       url: 'sample.php' 
       type: 'POST' 
       data: { 
        'start' : startDate, 
        'end' : endDate, 
        'coolness' : coolness 
       } 
       success: $('calendar').fullCalendar('refetchEvents') 
      } 
     } 
    } 
}); 

मैं बस यह कैसे निर्माण करने के लिए, या तो यह है कि संवाद 'सहेजें' बटन 'जानता है' जहां कोड डालने की समझ में नहीं आता क्या चर 'STARTDATE' 'ENDDATE' और 'ठंडाता 'सब मतलब है। मुझे जिक्र करना चाहिए कि मैं मूल रूप से एक जावा प्रोग्रामर हूं, और मैं अभी भी जावास्क्रिप्ट फ़ंक्शन आधारित परिवर्तनीय स्कोप के साथ संघर्ष कर रहा हूं।

मुझे ऐसी कई jQuery विधियों के साथ यह समस्या हुई है, जहां मैं एक बाहरी विधि को इंगित करने के लिए एक विधि चाहता हूं (जैसे $ .dialog का आह्वान करने वाली चुनिंदा कॉलबैक विधि) जो बदले में दूसरी विधि निष्पादित करती है (जैसे कि बटन कॉलबैक विधि का आह्वान करना $ .ajax फ़ंक्शन) लेकिन आप $ .ajax या $ .dialog पर पैरामीटर कैसे पास करते हैं ताकि उनके स्वयं के तरीके उन मानों का उपयोग कर सकें?

धन्यवाद,

Answer 1

fiddle से:

$(document).ready(function() { 
 
    $myCalendar = $('#myCalendar').fullCalendar({ 
 
     header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: '' 
 
     }, 
 
     theme: true, 
 
     selectable: true, 
 
     selectHelper: true, 
 
     height: 500, 
 
     select: function(start, end, allDay) { 
 
      $('#eventStart').datepicker("setDate", new Date(start)); 
 
      $('#eventEnd').datepicker("setDate", new Date(end)); 
 
      $('#calEventDialog').dialog('open'); 
 
     }, 
 
     eventClick: function(calEvent, jsEvent, view) { 
 
      $('#eventStart').datepicker("setDate", new Date(calEvent.start)); 
 
      $('#eventEnd').datepicker("setDate", new Date(calEvent.end)); 
 
      $('#calEventDialog #eventTitle').val(calEvent.title); 
 
      //     alert(calEvent.className); 
 
      //    alert(calEvent.className=="gbcs-halfday-event"?"1":"2"); 
 
      //     $('#allday[value="' + calEvent.className=="gbcs-halfday-event"?"1":"2" + '"]').prop('checked', true); 
 
      $('#calEventDialog #allday').val([calEvent.className == "gbcs-halfday-event" ? "1" : "2"]).prop('checked', true); 
 
      $("#calEventDialog").dialog("option", "buttons", [ 
 
       { 
 
       text: "Save", 
 
       click: function() { 
 
        $(this).dialog("close"); 
 
       }}, 
 
      { 
 
       text: "Delete", 
 
       click: function() { 
 
        $(this).dialog("close"); 
 
       }}, 
 
      { 
 
       text: "Cancel", 
 
       click: function() { 
 
        $(this).dialog("close"); 
 
       }} 
 
      ]); 
 
      $("#calEventDialog").dialog("option", "title", "Edit Event"); 
 
      $('#calEventDialog').dialog('open'); 
 
     }, 
 
     editable: true 
 
    }); 
 
    
 
    var title = $('#eventTitle'); 
 
    var start = $('#eventStart'); 
 
    var end = $('#eventEnd'); 
 
    var eventClass, color; 
 
    $('#calEventDialog').dialog({ 
 
     resizable: false, 
 
     autoOpen: false, 
 
     title: 'Add Event', 
 
     width: 400, 
 
     buttons: { 
 
      Save: function() { 
 
       if ($('input:radio[name=allday]:checked').val() == "1") { 
 
        eventClass = "gbcs-halfday-event"; 
 
        color = "#9E6320"; 
 
        end.val(start.val()); 
 
       } 
 
       else { 
 
        eventClass = "gbcs-allday-event"; 
 
        color = "#875DA8"; 
 
       } 
 
       if (title.val() !== '') { 
 
        $myCalendar.fullCalendar('renderEvent', { 
 
         title: title.val(), 
 
         start: start.val(), 
 
         end: end.val(), 
 
         allDay: true, 
 
         className: eventClass, 
 
         color: color 
 
        }, true // make the event "stick" 
 
        ); 
 
       } 
 
       $myCalendar.fullCalendar('unselect'); 
 
       $(this).dialog('close'); 
 
      }, 
 
      Cancel: function() { 
 
       $(this).dialog('close'); 
 
      } 
 
     } 
 
    }); 
 
});

<div id="calEventDialog"> 
 
    <form> 
 
     <fieldset> 
 
     <label for="eventTitle">Title</label> 
 
     <input type="text" name="eventTitle" id="eventTitle" /><br> 
 
     <label for="eventStart">Start Date</label> 
 
     <input type="text" name="eventStart" id="eventStart" /><br> 
 
     <label for="eventEnd">End Date</label> 
 
     <input type="text" name="eventEnd" id="eventEnd" /><br> 
 
     <input type="radio" id="allday" name="allday" value="1"> 
 
     Half Day 
 
     <input type="radio" id="allday" name="allday" value="2"> 
 
     All Day 
 
     </fieldset> 
 
    </form> 
 
</div> 
 
<div style="border:solid 2px red;"> 
 
     <div id='myCalendar'></div> 
 
</div>

मैं एक सवाल का जवाब देने के लिए इस बनाया था, लेकिन यह स्पष्ट रूप से दर्शाता है कि कैसे select कॉलबैक के साथ संवाद का उपयोग करें।

Answer 2

मैंने अपनी समस्या हल कर ली है, धन्यवाद बड़े पैमाने पर गणेशक के उदाहरण के लिए। डीओएम तत्व सभी jQuery कार्यों के लिए उपलब्ध हैं, जहां भी वे कोड हो सकते हैं और जो भी अन्य चर उनके दायरे में हैं। मैंने पूर्ण कैलेंडर कॉलबैक के मानों को पकड़ने के लिए छिपे हुए इनपुट का उपयोग कर समस्या हल कर दी है, और उसके बाद डेटा को सर्वर पर पोस्ट करने के लिए $ .ajax() फ़ंक्शन से उन्हें एक्सेस किया है।

मुझे लगता है कि यह आमतौर पर किया जाता है, हालांकि यह समस्याग्रस्त लगता है। यह वैश्विक दायरे को प्रदूषित करने की तरह असहज महसूस करता है और मुझे चिंता है कि पृष्ठ पर अन्य स्क्रिप्ट इस डेटा को भी कुशल बनाना चाहेंगे। मेरी इच्छा है कि $ .dialog() और $ .ajax() जैसे फ़ंक्शंस को पैरामीटर पास करने का एक बेहतर तरीका था ताकि उन मानों का उपयोग बाल विधियों द्वारा किया जा सके। यदि ऐसा है, तो कृपया मुझे बताएं। अन्यथा, यह काम करेगा।