1

現時点で正しい軌道に乗っていることを確認したいだけです。

管理者が人々のスケジュールを編集できるように、ちょっとしたことをしました。現在、行をクリックすると、すべてのスケジュールが編集可能になります。彼が連続して値を変更した場合、私はそれをキャッチしています

$('.selector').change(function() { // this happens to be a <select> dropdown. I guess technically this is the <option> inside of the select.
    var updates = new Array(); // an array of all the updates
    var classList = $(this).attr('id').split(/\s+\); // the id of a <select> would be something like "12 monday start" meaning the user_id, day_of_week, start/end time. Just converting it to an array here.
    classList.push($(this).val()); // the time it has been changed to
    updates.push(classList); // add the singular time update to the overall array
    $('.save_schedule').click(function() {
        // here I would iterate through all of the arrays in updates and do some sort of ajax call, correct?
    });
});

先に進み、潜在的に書き直さなければならない前に、正しい軌道に乗っていることを確認したいだけです。

ありがとう

リクエストされてからの私の HTML: https://gist.github.com/2435293

4

2 に答える 2

0

あなたのHTMLがこのように見える場合

<select id="12 monday start" class="selector">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="12 monday end" class="selector">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<input type="button" class="save_schedule" value="save" />

あなたのJavaScriptは次のようになります

$('.save_schedule').click(function() {

    var arr = new Array();
    $('.selector').each(function() {

        arr.push($(this).attr('id').split(/\s+/));
        arr.push($(":selected", this).val())
    });

    alert(arr);
    // ajax call here
});

jsfiddle の例を参照してください

于 2012-04-21T07:44:26.060 に答える
0

これを実装するには、次の 2 つの方法が考えられます。

オプション 1 - 下書き保存

ユーザーが行を編集するたびに、AJAX 呼び出しを行って変更を一時的に保存します (draft実際の変更とは異なる下書きにデータベース列を追加します)。

clickハンドラーをハンドラーの外に移動する必要がありますchange。

$('.selector').change(function() {
    ... 
});
$('.save_schedule').click(function() {
    ...
});

changeハンドラーで、$(this)現在の tag を指しselectます。選択した値を取得するには、 を使用できます$(this).val()。

select id 属性を分割して必要なすべての要素を取得することを避けるために、カスタム属性を使用できます。

<select data-user-id="12" data-day="monday" data-time="start">...</select>

次に、changeハンドラーでattrメソッドを使用して値を取得できます。

var user_id = $(this).attr('data-user-id');
var day = $(this).attr('data-day');
var time = $(this).attr('data-time');

これで、ajax 呼び出しを行って、変更を として保存できますdraft。

ユーザーが をクリックしsave_scheduleたら、最後の ajax 呼び出しを行ってドラフトのステータスを更新し、それを永続的に設定します。

オプション 2 - シンプルな保存、フォームのシリアル化

すべての変更は、ユーザーが保存ボタンをクリックした場合にのみ保存されます。

すべてのデータを Javascript ではなく HTML タグに保持することをお勧めします。(次のような理由で: ユーザーがスケジュールを 2 回編集するとどうなりますか? 変更は配列に再度プッシュされますか?)。

編集できない場合は入力/選択を非表示にすることができ、changeイベントを処理する必要はもうありません。

ユーザーが をクリックすると、入力 (http://api.jquery.com/serialize/) からすべてのデータを収集し、AJAX 呼び出しを行って変更を保存するsave_scheduleなどの関数を使用できます。$(form).serialize()

于 2012-04-21T07:44:53.540 に答える