3

これはかなり一般的な問題 (またはデザイン パターン?) であるため、この投稿が同様の問題を抱えている他の人に役立つことを願っています....

複雑なフォームで、ユーザーが行う他の選択に依存するデータを動的に編集できるようにする必要があるという、珍しいことではありません。バックエンド データベースとして Ajax、PHP および postgres を使用した jQuery を使用しています。

jQuery Ajax 手法を使用して、ユーザーが選択した 2 つの値に基づいて、単一のレコードのデータを返す方法を見つけました (Ajax は、php よりもはるかに優れています)。通常、戻り値は、HTML フォームで処理できる 1 つのレコードになります。ただし、戻り値が 2 つまたは 3 つのレコードになる場合もあります。その場合、入力フィールドを動的に追加し、返されたデータを入力する必要があります。

これが私のフォームのコードです。[取得] ボタンは、選択されたマーカー値と選択された LabID 値を取得して、Allele_1、Allele_2、および実行日を含む依存レコードを検索します。

<fieldset>
      <LEGEND><b>Edit Genotype</b></LEGEND>
      <p>
    <boldlabel>Selected Marker</boldlabel><input name=sel_marker length=15 DISABLED>
    <boldlabel>Selected LabID</boldlabel><input name=sel_labid length=10 DISABLED><br>
    <boldlabel>Allele_1</boldlabel><input id=allele1 name=allele_1 size=5 >
    <boldlabel>Allele_2</boldlabel><input id=allele2 name=allele_2 size=5 >
    <boldlabel>Run date</boldlabel><input id=run_date name=run_date size=10 >
    <br>
      </p>              
    <input type="button" name="fetch" id="fetchbutton" value="Fetch" sclass="btn">
    <input type="button" name="save"  value="Save" onclick="savegenotype()" class="btn">
    <br>
    </fieldset>

これは、取得ボタンにリンクされた JavaScript コードです。

  function fetchgenotype() {
    // here's where we use an Ajax function to fetch the allele values without reloading the page.
    // Get the index number of the genotype record to retrieve; retrieve it; populate the alleles.

    var mndx = document.EditGenotype.marker.options[document.EditGenotype.marker.selectedIndex].value;
    var sndx = document.EditGenotype.labid.options[document.EditGenotype.labid.selectedIndex].value;

    $.post("fetchAlleles.php", {mndx: mndx, sndx: sndx},
    function(result) {        
      i=0;
      result.each(
        a1='allele1_'||i.toString();
        a2='allele2_'||i.toString();
        r='rundate_'||i.toString();

        $("#run_date").after(a1);
        $("#run_date").after(a2);
        $("#run_date").after(r);
      )
    }, "json");

    return false;
  }

関連データを検索する Ajax 部分である別の PHP スクリプトを次に示します。

   // query the database.
    $dbconnect = pg_pconnect("host=".$hostname." user=".$dbuser." dbname=".$dbname);    
    if (!$dbconnect)    {
        showerror(0,"Failed to connect to database",'fetchAlleles',16,"username=".$dbuser.", dbname=".$dbname);
        exit;
    }
    $sql = "SELECT allele1, allele2, run_date FROM geno.genotypes WHERE markers_id=".$mndx." AND gsamples_id=".$sndx;

    $fetchresult = pg_exec($dbconnect, $sql);
    if ($fetchresult) {
        $arr = pg_fetch_array($fetchresult, 0, PGSQL_NUM);
        // for debugging
        //print_r($arr);
    } else {
        echo "(25) Failed to retrieve results.<BR>SQL: ".$sql."</br>";
    }

    // It appears necessary to return the array as json encapsulated.
    echo json_encode($arr);
?>
}

この部分は、単一の値の場合に機能します。しかし、戻り値が複数のレコードの配列である場合、フォームの JavaScript セクションにある jQuery コードの構文が正しくありません。行 a1='allele1_'||i.toString(); でエラーが発生します。

私を正すことができるjQueryの達人は誰でも大歓迎です...

4

1 に答える 1

2

私の最初の考え: pg_affected_rowsを使用して、1 つ以上のレコードを取得したかどうかを調べます。

私の第二の考え: なぜpg_fetch_objectではないのですか? はるかに優れた（読み取り可能な）jsonが得られると思います。

私の 3 番目の考え: JSON 出力を統一する必要があります。非常に一般的な方法は、JSON 応答はオブジェクトの配列のように見えることです。DB が 1 つのレコードのみを返す場合 -> JSON 応答は、唯一のアイテムを含む配列です。DB が複数を返す場合 -> JSON 応答は、複数のアイテムを含む配列です

JSON レスポンスの例

//DB return only ONE record
    {
      "items": [
            { 
                "allele1" : "the-value",
                "allele2" : "the-value",
                "run_date" : "the-date"
            }
        ],
      "totalItems : 1
    }

//DB returns more than one records
{
  "items": [
        { 
            "allele1" : "the-value_1",
            "allele2" : "the-value_1",
            "run_date" : "the-date_1"
        },
        { 
            "allele1" : "the-value_2",
            "allele2" : "the-value_2",
            "run_date" : "the-date_2"
        },
        ...
        { 
            "allele1" : "the-value_n",
            "allele2" : "the-value_n",
            "run_date" : "the-date_n"
        }
    ],
  "totalItems : n
}

このような結果が得られれば、動的に INPUT フィールドを簡単に作成できます。まず、1 つ以上のレコードを受信したかどうかを簡単に確認できます。

if(response.totalItems === 1 ) {
    // handle single record
}else if (response.totalItems > 1) {
    // handle multiple records
}

複数のレコードがある場合は、jQuery.each() と jQuery.map() を反復して入力フィールドを生成できます

if (response.totalItems > 0) {
    //iterate through all items in JSON-response
    $.each(response.items, function(index, object) {
        // create FIELDSET element
        var $fieldset = $('<fieldset>', {'html' : '<legend>#'+(index+1)+'</legend>'});

        $.map(object, function(value ,key) {
           //create LABEL element and appendInto FIELDSET
           $fieldset.append($('<label>', {'text' : key, 'for' : key}));
           //create INPUT element and appendInto FIELDSET
           $fieldset.append($('<input>', {'id': key, 'name': key, 'value' : value}));
           //create LineBreak
          $fieldset.append('<br />');
        });
        // Append whole FIELDSET with LABEL, INPUT and BR to body (or whatever your placeholder is)
        $('body').append($fieldset);
   });
}
于 2012-05-03T01:40:08.703 に答える