javascript - 私の最初の Javascript アプリケーション (jQuery) を構築し、何かに苦労しています

Question

これにアプローチする最も効率的な方法についての推奨事項を本当に感謝します。

レコードのリストを表示し、ユーザーがレコード行の「編集」リンクをクリックしてレコードを編集できるようにする単純な JavaScript アプリケーションを構築しています。ユーザーは、[追加] リンクをクリックしてダイアログを開き、新しいレコードを追加することもできます。

これは、これの実用的なプロトタイプです: http://jsfiddle.net/FfRcG/

[編集] をクリックすると、いくつかの既定の値を含むダイアログがポップアップ表示されます。また、[追加] をクリックすると、値が空のダイアログボックスが表示されます。

2 つの問題にアプローチする方法について助けが必要です

インデックスを編集ダイアログに渡し、JSON 内の値を参照する必要があると思いますが、ユーザーが編集をクリックしたときにインデックスを渡す方法がわかりません。
Edit と Add の div コンテンツが非常に似ているのが気になります (Edit は値を事前入力するだけです)。これを行うより効率的な方法があるように感じますが、途方に暮れています。

これが参照用の私のコードです

$(document).ready( function(){

// Our JSON (This would actually be coming from an AJAX database call)
people = {
    "COLUMNS":["DATEMODIFIED", "NAME","AGE"],
    "DATA":[
    ["9/6/2012", "Person 1","32"],
    ["9/5/2012","Person 2","23"]
    ]
} 


// Here we loop over our JSON and build our HTML (Will refactor to use templating eventually)
members = people.DATA;  

var newcontent = '<table width=50%><tr><td>date</td><td>name</td><td>age</td><td></td></tr>';

for(var i=0;i<members.length;i++)
{
    newcontent+= '<tr id="member'+i+'"><td>' + members[i][0] + '</td>';
    newcontent+= '<td>' + members[i][1] + '</td>';
    newcontent+= '<td>' + members[i][2] + '</td>';
    newcontent+= '<td><a href="#" class="edit" id=edit'+i+'>Edit</a></td><td>';
}
newcontent += "</table>";
$("#result").html(newcontent);

// Bind a dialog to the edit link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#edit").dialog("open");

    // Not sure the most efficient way to change our dialog field values
    $("#name").val() // ???

    alert($());
    return false;
});

// Bind a dialog to the add link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#add").dialog("open");

    return false;
});

// Bind a dialog to our edit DIV
$("#edit").dialog();

// Bind a dialog to our add DIV
$("#add").dialog(); 

});

そして、ここにHTMLがあります

<h1>People</h1>

<a href="#" class="add">Add a new person</a>

<!-- Where results show up -->
<div id="result"></div>

<!-- 
Here's our edit DIV - I am not clear as to the best way to pass the index in our JSON so that we can reference positions in our array to pre populate the input values.
-->
<div id="edit">
<form>
    <p>Name:<br/><input type="text" id="name" value="foo"></p> 
    <p>Age:<br/><input type="text" id="age" value="33"></p>
    <input type="submit" value="Save" id="submitEdit">
</form>
</div>

<!-- 
Here's our add DIV - This layout is so similiar to our edit dialog. What is the
most efficient way to handle a situation like this?
-->
<div id="add">
<form>
    <p>Name:<br/><input type="text" id="name"></p>
    <p>Age:<br/><input type="text" id="age"></p>
    <input type="submit" value="Save" id="submitEdit">
</form>
</div>

score 1 · Accepted Answer

1）インデックスは、非表示の値を介して、またはフォームのURLを変更することによって渡すことができます。フォームのテンプレートを使用する場合は、フォームにその場で入力して再レンダリングできる場合があります。サイトがRESTfulである場合は、URLの変更がより適切な選択である可能性があります。

次に、URLのヘルパーも作成する必要がある場合があります。ヘルパー関数は、それが「新規」であるか「編集」であるかに応じて、適切なURLを見つけるのに役立ちます。次に、「serialize」http://api.jquery.com/serialize/を使用して、フォーム内のすべてのフィールドを取得し、必要に応じて$.POSTのキーと値のペアに変換できます。

2）2つのオプションがあります：1つのフォームを作成するか、テンプレートを使用してみてください。最初にフォームが1つしかない場合、唯一のオプションは.val（）を使用してフォームの値を変更することです。

テンプレートアプローチを使用する場合は、テンプレートをページに埋め込むか、サーバーで$.GETを使用して最終的なフォームをプルすることができます。良いアプローチの1つは、テンプレート言語としてhamlまたはjadeを使用することです。次に、アプローチを組み合わせて組み合わせることができます。つまり、実際にページにテンプレートタグを作成し、ページが最初にレンダリングされるときにテンプレートをロードして、フォームの部分だけを入力することができます。その後、ダイアログボックスにない基本的な編集ページだけを含む他のさまざまなページでそのフォームを使用できます。

score 0 · Accepted Answer

cloneメソッドの使用を検討し、ユーザーが追加/編集リンクをクリックしたときにその場で作成します（複数の編集がある場合）。次に、入力を選択してそのvalプロパティを設定することにより、その場で値を設定できます。

編集用のIDを渡す場合は、次のいずれかを使用できます。

<input type="hidden" name="index" value="" />

または、次のようにdivにプロパティを追加できます。

<div id="edit" data-index="1">

そしてそれを参照します

$('#edit').click(function() {
    $(this).attr('data-index');
});

クリックハンドラー内でIDを取得します。

score 0 · Accepted Answer

入力値について何かを試します。入力値の変更には .attr() を使用できます。ここで動作します (jSON から 1 人称のみを呼び出します) http://jsfiddle.net/serkanalgur/zs3tW/をコピーします。

私が追加したもの;

    // Bind a dialog to the edit link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#edit").dialog("open");
    $('input#name').attr('value', people.DATA[0][1]); // for name
    $('input#age').attr('value', people.DATA[0][2]); // for age. but needed dynamic ids
    return false;
});

javascript - 私の最初の Javascript アプリケーション (jQuery) を構築し、何かに苦労しています

4 に答える 4

Related

Reference