2011-12-03 20 views
2

100%純粋なjavascriptを使用していますが、Jqueryを試しましたが、役に立たなかったです。 FF/Chrome/Safariで動作しないコード。Javascriptは最近のようにDOMを更新しません。

ユーザーが「編集」(onclickで外部関数を呼び出す - item_idを渡す)をクリックしたときに編集可能な機能を構築しました。同じ文字列の入力を表示するために、その中に。 (クラスを変更することによって) "編集"も "保存"に置き換えられます。文字列の編集が完了すると、ユーザーは保存をクリックし、すべてが元の状態に戻ります。

AJAXはすべてのアップデートを処理していますが、AJAXブロックをコメントアウトしても修正されません。

これらのオブジェクトのストリームをロードしています。 javascript はすべてで動作しますが、と表示されているものは視覚的にDOMのみを更新しますは過去24時間以内のアイテムです。ブロック自体は同一です。つまり、「編集」をクリックした直後の18〜26時間以内に追加された項目は何もしません。しかし、私が編集したい要素のクラスを警告すると、それは働いているように "編集"( "保存"とは反対)と言います。 (下記参照)この変更はinspect要素に反映されませんが。

<input type="text" class="input_field" id="input_254" value="Foo" onkeydown="javascript: if (event.keyCode == 13) { update(254); }" style="display: none; "> 
<span class="user_links" id="display_269" style="display:none;">Foo</span> //hidden span that holds the value and acts at the check 
<span id="edit_state_269" class="saved" style="display: none;">Foo</span> 
<span onclick="update(269)" id="edit_269">Edit</span> 

外部のJavaScript

function update(item_id) { 

var links_span = document.getElementById('display_' + item_id); 
var input_span = document.getElementById('input_' + item_id); 
var string_old = document.getElementById('edit_state_' + item_id).innerHTML; 
var state_check = document.getElementById('edit_state_' + item_id); 
var edit_button = document.getElementById('edit_' + item_id); 

if (state_check.getAttribute('class') == 'saved') { 

    // Hide the links display list and show the input field 
    links_span.style.display = 'none'; 
    input_span.style.display = 'inline'; 

    // Change the Edit button text and state_check 
    edit_button.innerHTML = 'Save'; 
    state_check.setAttribute('class','editing'); 

    //alert(state_check.getAttribute('class')); // this alerts "editing" although in DOM it is still "saved" on the blocks that are the problem 

ページ上

コードは、任意の詳細は、参考になる場合 - 私はそれらを提供します。

これは問題の悪魔です。明らかな解決策はありません。あなたが与えることができるどんな方向にも本当に感謝します!

+0

あなたのHTMLには数字が混在しています - 254と269 –

+0

あなたの要件を理解していれば、あなたのコードは途方もないものです。私は事前に構築されたものを調べることをお勧めします。あなたの記事でjQueryについて言及して以来、私はここから始めることをお勧めします:使い方:http://www.appelsiini.net/projects/jeditable。デモ:http://www.appelsiini.net/projects/jeditable/default.html –

答えて

0

解決済み。いつものようにそれは小さなものです。最初のいくつかのブロックがページの読み込み中にロードされていました。ユーザーがナビゲートしてIDが重複したため、ブロックされました。 Javascriptは当然、ページ上の1つを非表示にしたものを選択しました。

関連する問題