0

ドロップダウンから room_id を選択したら、JS ヘルパーを使用して security_deposit と room_rate の入力を設定します。問題は、room_id を選択すると、room_rate_update jQuery 変更関数が機能しなくなることです。ただし、ページが読み込まれ、room_id を選択していない場合、room_rate ボックスに入力するとトリガーされますが、room_rate を選択した後ではトリガーされません。

これを引き起こしていると思われることの 1 つは、room_id を選択すると、room_rate を含む div 全体が更新されることです。以前は CakePHP フォーム ヘルパーによって生成されていましたが、div がまったく同じ名前、クラス、ID などに置き換えられていることを確認しました。ページが読み込まれたときに表示されるものと同じです。

ここに私の見解のフォームがあります

echo $this->Form-create('Arrival');
echo $this->Form->input('room_id',array('options' => $room_numbers, 'label'=>'Room Number'));

?>
    <div id="room_rate_update">
        <?php
            echo $this->Form->input('room_rate', array('label' => 'Room Rate (numbers only)'));
        ?>
    </div> 

   <div id = "security_deposit_update">
       <?php
           echo $this->Form->input('security_deposit',array('label' => 'Security Deposit (numbers only)'));
       ?>
   </div>
<?php

echo $this->Form->input('balance_upon_arrival',array('label' => 'Balance Due Upon Arrival'));

更新用の JS ヘルパーと jQuery 関数は次のとおりです。

//if someone changes the room_rate, this should update the deposit amount  
$(document).ready(function(){
    $("#ArrivalRoomRate" ).change(function() {
        alert('test');
    });
});


//populates the room rate when the room is selected
$this->Js->get('#ArrivalRoomId')->event('change', 
    $this->Js->request(array(
        'controller'=>'Arrival',
        'action'=>'getRoomRate'
        ), array(
        'update'=>'#room_rate_update',
        'async' => true,
        'method' => 'post',
        'dataExpression'=>true,
        'data'=> $this->Js->serializeForm(array(
            'isForm' => false,
            'inline' => true
            ))
        ))
);

これは、JS ヘルパー POST リクエストのビューです。

//room_rate_update.ctp

<div class="input text required">
    <label for="ArrivalRoomRate">Room Rate </label><input name="data[Arrival][room_rate]" maxlength="10" type="text" id="ArrivalRoomRate" required="required" value="<?php echo $room_rate; ?>">
</div>

だから、私が言ったように。room_id を選択する前に、「テスト」がトリガーされます。値を選択した後

4

2 に答える 2

1

たとえば、次のような別の機能が必要です。

function init ()
{
    $("#ArrivalRoomRate" ).change(function() {
        alert('test');
    });
}

すべてのコンテンツが更新されたら、一度呼び出します。そうしないと、すべてのコンテンツが更新されたときに、部分的なレンダリングであるため、このイベント ハンドラーは新しいコンテンツに対して無効になります。

于 2013-09-09T06:19:16.357 に答える
0

次のようなデリゲート（別名ライブ）イベントハンドラーを試すことができます：

$(document).ready(function(){
    $("body" ).on("change", "#ArrivalRoomRate", function() {
        alert('test');
    });
});

.on()jQuery のバージョンに問題がある場合は、.live()次のように古い jQueryを使用できます。

$("#ArrivalRoomRate").live("click", function() {
  alert("test");
});
于 2013-09-07T06:52:08.883 に答える