6

jQuery、そしておそらく JavaScript がどのように機能するかについて、根本的な混乱があります。jQuery関数にパラメータを渡して、それらのメソッドがそれらの変数を使用して関数を呼び出すことができるようにする方法という同じ問題を抱え続けています。これが私の最近の例です：

fullcalendar プラグインを使用しています。カレンダーをクリックすると、コールバック メソッド「select」が起動します。選択コールバックには、「startDate」「endDate」などの特定のパラメーターが自動的に与えられます。必要なのは、jQuery ダイアログを開いて追加情報を収集し、新しいイベントをサーバーに投稿することです。これに沿って：

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

htmlには次のようなものがあります：

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

最後に、フルカレンダー変数と新しい変数をサーバーに送信するボタンをダイアログに追加したいと思います。

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」および「coolness」の意味を「認識する」ようにコードを配置する場所がわかりません。私はもともと Java プログラマーであり、JavaScript 関数ベースの変数スコープにまだ苦労しています。

私は、あるメソッドが外部関数 ($.dialog を呼び出す select コールバック メソッドなど) を指すようにする多くのそのような jQuery メソッドでこの問題を抱えていました。関数) しかし、どのようにパラメーターを $.ajax または $.dialog に渡して、独自のメソッドがそれらの値を使用できるようにしますか?

ありがとう、

4

2 に答える 2

2

フィドルから：

$(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コールバックでダイアログを使用する方法を明確に示しています。

于 2012-09-18T20:55:46.477 に答える
1

ganeshkの例のおかげで、問題は解決しました。DOM要素は、コード内のどこにあっても、スコープ内にある他の変数に関係なく、すべてのjQuery関数で使用できます。非表示の入力を使用してfullCalendarコールバックの値を保持し、$。ajax（）関数からそれらにアクセスしてデータをサーバーに送信することで、問題を解決しました。

問題があるように見えますが、これが通常の方法であると思います。これは、グローバルスコープを汚染するような不快感があり、ページ上の他のスクリプトもこのデータを操作する可能性があるのではないかと心配しています。$ .dialog（）や$ .ajax（）などの関数にパラメーターを渡して、これらの値を子メソッドで使用できるようにするためのより良い方法があればいいのにと思います。もしあれば、私に知らせてください。それ以外の場合、これは機能します。

于 2012-09-19T17:54:21.817 に答える