2011-12-03 38 views
2

我正在使用100%純JavaScript,試過jquery,但沒有幫助。代碼在FF/Chrome/Safari中不起作用。Javascript將不會更新DOM上最近顯示的內容項目

我已經構建了編輯就地功能,當用戶點擊「編輯」(調用帶有onclick的外部函數 - 傳入item_id時) - 隱藏文本字符串以顯示具有相同文本字符串的輸入在裏面。 (通過改變類別)「編輯」也被「保存」取代。編輯完字符串後 - 用戶點擊保存,所有事件恢復正常。

AJAX正在處理所有更新 - 但註釋掉AJAX塊並不能解決它。

我正在加載這些對象的流。 javascript 爲其中的所有人工作 - 但只是更新DOM,視覺無論如何出現是過去24小時之前的項目。塊本身是相同的。那是 - 在我點擊「編輯」時在最近18-26個小時內添加的項目,什麼也不做。但如果我警告我要編輯的元素的類,它說「編輯」(而不是「保存」)就像它正在工作。 (見下文)雖然這種變化從未體現在檢查要素中。上頁

<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自然選擇了頁面中較高的一個 - 隱藏的那個。