2011-05-31 52 views
0

所以我是一個總JS新手。我已經閱讀了其他一百篇文章,嘗試了他們的解決方案,而且我似乎無法讓它工作來挽救我的生命。Javascript和動態變量...再次

這裏的問題:

我有JS和AJAX的工作。但只限於明確表達的價值。我試圖抽象它來處理它停止工作的所有變量。

我也接受這樣做的更好方法,但這是我迄今爲止根據我有限的知識計算出來的。

我有一個非常非常大的形式。手機上「現場」數據採集近400萬場。帶寬不是問題,但是穩定性和可靠性是,所以表單應該在輸入時發送每一條數據,允許更改和更改,直到準備好提交。在此之前,它會發回相同的信息,然後用於顯示綠點以確認數據實際上已被存儲。因此,對於每個表單字段,都有一個<span>,其ID以FormFieldAStatus的形式命名。我已經將它包含在下面。

表單代碼:

<input type="text" class="form-textbox validate[required]" id="input_1" name="formFieldA" size="20" onchange="saveData(); readData()" /> 
<span class="ajax-success" id="formFieldAStatus"></span> 

下面是工作代碼:

function readData() { 
    new Ajax.Request('AjaxRead.php', { 
    method: 'post', 
    parameters: $('Worksheet').serialize(true), 
    onSuccess: function(transport) { 
     var icon = '<img src="images/greendot.png" align="bottom" style="margin-right:5px;">'; 
     if (transport.responseText) { 
     var json=transport.responseText.evalJSON(); 
     if(json.formFieldA) { 
      var status = $('formFieldAStatus'); 
      status.update(icon); } 
     if(json.formFieldB) { 
      var status = $('formFieldBStatus'); 
      status.update(icon); } 
     if(json.formFieldC) { 
      var status = $('formFieldCStatus'); 
      status.update(icon); } 
     } 
    }, 
    onFailure:function(){ alert('Something went wrong...') } 
    }); 
} 

重視。我沒有把400條這些線路放入檢查每一個領域。這是堅果。

下面是應該工作但沒有的代碼。

function readData() { 
    new Ajax.Request('AjaxRead.php', { 
    method: 'post', 
    parameters: $('Worksheet').serialize(true), 
    onSuccess: function(transport) { 
     var icon = '<img src="images/greendot.png" align="bottom" style="margin-right:5px;">'; 
     if (transport.responseText) { 
     var json=transport.responseText.evalJSON(); 
     for(var key in json) { 
      if(!json[key]=='') { 
      var statusName=key+'Status'; 

// Take your pick of the following. I've tried them all.     

      var status = $(statusName); 
      var status = $(window[statusName]); 
      var status = $(key+'Status'); 
      var status = $(window[key+'Status']); 
      eval("var status = $('"+key+"Status');"); 

// Did any of them work ever? 

      status.update(icon); } 
     } 
     } 
    }, 
    onFailure:function(){ alert('Something went wrong...') } 
    }); 
} 

任何援助將不勝感激。如果有更好的方式來做到這一點,那麼我都是耳朵。

乾杯。

最新細節:

我加了這一點:

console.log('statusname: '+statusName); 
console.log('status: '+status); 
console.log('status Object: '+Object.inspect(status)); 

它吐出來:

statusname: fieldNameAStatus 
status: [object HTMLElement] 
status Object: <span id="fieldNameAStatus" class="ajax-success"> 

爲每個我努力的方法......

的分鐘我取消註釋:

status.update(icon); 

我得到這個代替:

statusname: formIDStatus 
status: null 
status Object: null 

這是奇怪的,對不對?

好的。所以,現在我已經把console.log的東西放下了(個人不在乎,thankyouthankyouthankyouthankyouthankyouthankyouthankyouthankyou爲了教育我),我決定看看當我使用手動指定的每個字段的代碼時顯示的內容。

status: [object HTMLElement] 
status Object: <span id="fieldNameAStatus" class="ajax-success"> 

下面是我們所擁有的:

工作代碼: 密鑰讀取,創建狀態對象,這是一個html字符串定義<span>應該和沒有問題的更新。

非工作: 鍵被讀取,狀態對象被創建,這是一個html字符串,它定義了它應該但是更新對象的調用會在循環的第一次迭代中殺死它。

現在是什麼?

+0

? – 2011-05-31 21:06:32

+1

您是否嘗試過使用調試器來檢查'onSuccess'回調中的循環中的值? – 2011-05-31 21:07:50

+0

@Vivin原型。 – 2011-05-31 21:08:57

回答

1

嘗試:

var statusName=json[key]+'Status'; 

看起來你只是抓住了關鍵,並嘗試使用,而不是價值。還要確保在使用「for in」時執行json.hasOwnProperty(key)。如果你在console.log(!json[key]=='')之後輸出什麼東西?

+0

嗯,關鍵是我追求的價值,真的。我想要該字段的名稱,以便我可以確定它是在頁面上更新的正確名稱,然後使用從字段名稱和「狀態」名稱構建的ID來設置正確的狀態。當我做console.log(!json [key] =='')時,它只是說真的。 – 2011-05-31 23:26:10

+0

'console.log($(statusName));'當輸出放在「var statusName = key +'狀態'後面」時輸出?在某個時候,決議失敗了。您可能沒有具有該ID的元素。 – 2011-05-31 23:44:53

+0

這裏有一點我知道freaking console.log的美麗。說真的,我以前怎麼都不知道?所以。許多。更好。所以我把它扔在那裏只是踢:console.log('statusname:'+ statusName); \t \t \t \t \t \t \t console.log('status1:'+ status1); \t \t \t \t \t \t \t console.log('status1 Object:'+ Object.inspect(status1)); – 2011-05-31 23:45:57

0
var statusName = json[key] + 'Status'; 
0

好的。有用。我想到了。事實證明,當表格中的一個字段越過時,它就會消失,但沒有span來放置任何東西。它碰巧發生的第一件事就是形式本身。我並不特別需要表單名稱,但是如果不存在,那麼表單帶有中斷的JS功能。我無法得到我的if語句,看看是否該字段爲空或不要忽略它,所以它保持不變。沒有比較大的。

我根本無法弄清楚console.log中的線索。保存了我的培根。

再次感謝。以下是最終的代碼:

function readData() { 
    new Ajax.Request('AjaxRead.php', { 
    method: 'post', 
    parameters: $('Worksheet').serialize(true), 
    onSuccess: function(transport) { 
     var icon = '<img src="images/success.png" align="bottom" style="margin-right:5px;">'; 
     var noicon = ''; 
     if (transport.responseText) { 
     var json=transport.responseText.evalJSON(); 
     for(var key in json) { 
      var statusName=key+'Status'; 
      var status = $(statusName); 
      if(!json[key]=='') { 
      status.update(icon); } 
      else { 
      status.update(noicon); } 
     } 
     } 
    }, 
    onFailure:function(){ alert('Something went wrong...') } 
    }); 
} 

這裏是要更新的HTML;

<span class="ajax-success" id="fieldNameAStatus"></span> 

乾杯

什麼JS框架是您使用