0

2 つの選択ボックスを含むページがあり、そのうちの 1 つが AJAX 呼び出しによって読み込まれます。次に、送信ボタンを有効にする前に、要素を jquery で検証したいと考えています。jquery は、静的選択 (strDirectorate) を変更すると正常に動作しますが、AJAX によってロードされたもの (new_cc) を変更すると動作しません。

ページが読み込まれたときと同じように、jquery が new_cc の値を取得しているためでしょうか。

      <div class="selectfield">
        <select id="strDirectorate" name="strDirectorate" class="mainform_select" onChange="getNewCostCentre(this.value)">
            <option value="" selected="selected"></option>
            <?php do {  ?>
                <option value="<?php echo $row_rsLocality['strLocalityShort']?>" <?php if($row_rsLocality['strLocalityShort'] == $strDirectorate){ echo $selected; } ?>><?php echo $row_rsLocality['strLocalityLong']?></option>
            <?php
                } while ($row_rsLocality = mysql_fetch_assoc($rsLocality));
                    $rows = mysql_num_rows($rsLocality);
                if($rows > 0) {
                    mysql_data_seek($rsLocality, 0);
                    $row_rsLocality = mysql_fetch_assoc($rsLocality);
                }
            ?>        
        </select>
        </div>


        <div id="txtNewCostCentre" class="selectfield">
        <select id="new_cc" name="new_cc" class="mainform_select" onChange="getNewPosition(this.value)">
            <option value="" selected="selected"></option>
        </select>
        </div>

        <div class="actions">
        <input type="submit" id="submit_button" name="submit_button" class="styled_button" value="Submit" />
        </div>

関数 getNewCostCentre は

function getNewCostCentre(str)
{
if (str=="")
  {
  document.getElementById("txtNewCostCentre").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
document.getElementById("txtNewCostCentre").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getNewCostCentre.php?q="+str,true);
xmlhttp.send();
}

getNewCostCentre.php のコードは次のとおりです。

$sql="SELECT * FROM `tblcostcentreorganisation` WHERE `strOrganisation` LIKE '363 ".addslashes($dir)."%'";
$result = mysql_query($sql);

if(isset($_GET["q"])){
    $display_string = '<select id="new_cc" name="new_cc" class="mainform_select" onChange="getNewPosition(this.value)" style="background-color:#F8E0E0">';
    $display_string .= '<option value="" selected="selected" disabled="disabled"></option>';
}else{
    $display_string = '<select id="new_cc" name="new_cc" class="mainform_select" onChange="getNewPosition(this.value)">';
}

while($row = mysql_fetch_array($result))
  {
  $cc = substr($row['strCostCentre'], 3, strlen($row['strCostCentre'])-3) . " " . substr($row['strOrganisation'], 3, strlen($row['strOrganisation'])-3);
  $org_name = $row['strOrganisation'];

  if ($org == $org_name){
      $display_string .= '<option value="'.$org_name.'" selected="selected">'.$cc.'</option>';
  }else{
      $display_string .= '<option value="'.$org_name.'">'.$cc.'</option>';
  }
  }

$display_string .= '</select>';

echo $display_string;

jquery の検証は次のとおりです。

$(document).ready(function() {
$('.selectfield select').change(function() {

        var empty = false;

        $('.selectfield select').each(function() {
            $(this).css("background-color", "#FFFFFF");
            if ($(this).val().length == 0) {
                $(this).css("background-color", "#F8E0E0");
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').removeAttr('disabled');
        }
});
});

オンロード コードは次のとおりです。.onload 内 (後) で .load を使用しているためだと思いますか?

$(document).ready(function(){
window.onload = function(){

    //Load directorate, cost centre and position
    if ($('#hid_stage').val() == "Rejected") {
        var str = $('#hid_criteria').val();
        strencoded = encodeURIComponent(str);
        $('#txtNewCostCentre').load("getNewCostCentre.php?cr="+strencoded);
        $('#txtNewPosition').load("getNewPosition_ba.php?cr="+strencoded);
    }

    var empty = false;

    $('.selectfield select').each(function() {
        $(this).css("background-color", "#FFFFFF");
            if ($(this).val().length == 0) {
                $(this).css("background-color", "#F8E0E0");
                empty = true;
            }
    });

    if (empty) {
        $('.actions input').attr('disabled', 'disabled');
    } else {
        $('.actions input').removeAttr('disabled');
    }
}
});
4

2 に答える 2

2

ページの読み込み時に )のchangeハンドラーをバインドしています。$('.selectfield select'これにより、そのセレクターに一致するすべての要素にハンドラーがアタッチされます。

その後、この要素を変更すると、ハンドラーがアタッチされなくなります。

代わりに、liveハンドラーを使用して、現在存在する、または将来作成されるすべての要素に一致させる必要があります。

$('.selectfield select').live("change", function() {
 ...
});

アップデート：

オンロードの問題については、コードを繰り返さない方がはるかに簡単です。コンテンツを動的にロードした後に検証を開始する必要がある場合は、次の例のように、ロードが完了したら変更イベントをトリガーします。

$(document).ready(function(){
    //Load directorate, cost centre and position
    if ($('#hid_stage').val() == "Rejected") {
        var str = $('#hid_criteria').val();
        strencoded = encodeURIComponent(str);
        $('#txtNewCostCentre').load("getNewCostCentre.php?cr="+strencoded, function() {
            $('.selectfield select').trigger("change");
        });
        $('#txtNewPosition').load("getNewPosition_ba.php?cr="+strencoded);
    }
});
于 2013-07-14T13:30:41.910 に答える