1

Mysql から取得したクライアントのリストを含む div があります。

同じページに、ユーザーが新しいクライアントを追加できるようにポップアップするjqueryダイアログボックスがあります。

私がしたいのは、ユーザーが新しいクライアントを追加すると、リストを含むリストがリロードされ、新しいクライアントが利用できるようになることです。

リストにデータを入力するクラスを再宣言するとエラーが発生するため、 Load() 関数を使用せずに div を単純にリロードする方法はありますか?

4

2 に答える 2

1

もちろん。コードを見ないと、ここでの混乱は、「関心の分離」を理解していないことを示唆しています。情報を取得するプロセスと、その情報を表示するプロセスを分離します。ユーザーが新しい情報を入力すると、それをサーバーから取得した情報の javascript 配列またはオブジェクトに追加し、それをサーバーに送信してデータベースで更新します。次に、更新された情報を使用して表示機能を再度実行し、新しい情報を含めます。理想的には、表示プロセスは、1 つの項目を追加するためだけにすべてを削除してすべて再作成するのではなく、可能であれば既存のマークアップを使用します。これは非常に基本的な例です (ここをクリック)。理想的には、この概念を取り入れて拡張し、最適な効率と組織化を実現します。

これが私のjsbinのサンプルコードです。これは開始するためのものであることを覚えておいてください。

var info = [1,2,3,4,5]; //this is what you got from your ajax call to the server

function render(element, info) {
  //this is a lazy system that recreates/replaces all the markup each time. I suggest doing this more efficiently, but that is work for you to do :)
  var frag = document.createDocumentFragment();
  var len = info.length;
  for (var i=0; i<len; ++i) {
    var p = document.createElement('p');
    p.textContent = info[i];
    frag.appendChild(p);
  }
  element.innerHTML = '';
  element.appendChild(frag);
}

var targetElem = document.getElementById('targetElem');

render(targetElem, info);

var addButton = document.getElementById('add');
var input = document.getElementById('infoInput');
addButton.addEventListener('click', function() {
  info.push(input.value); //update the information
  render(targetElem, info); //render the updated information
});
于 2013-11-13T22:34:12.280 に答える