我是新來的這件事,而且我提出一個web應用程序,在很大程度上依賴於動態加載HTML頁面到主網頁div在看跌的時候工作。JavaScript函數不是在不同的文件
主頁面鏈接到各種js文件,包括jQuery和我自己的一些。
除了這一點,每一個加載的HTML文件鏈接到自己的js文件來控制用戶交互。其中一些還有一個將html頁面加載到其中的div。
有一兩件事我注意到一些HTML頁面反應速度較慢加載到主網頁的腳本。點擊時在按鈕上突出顯示的全局事物需要進行調整,以便在某些頁面上甚至可以感知。
另一件事發生的事情,這是非常討厭我,就是當他們在不同的文件中,這些是否鏈接到主頁或不同的子頁面的某些腳本將無法正常工作。我需要將實際的功能放入實際的子頁面的js文件中。
從數據庫填充一個HTML表格這個簡單的功能就是其中之一......
function fill_grid(collection, columns){
var jsonObj = JSON.stringify(columns);
param = "collection=" + collection + "&columns=" + jsonObj;
// Ajax call ~~~~~>
$.ajax({
type: 'POST',
url: 'back/fill_grid.php',
processData: false,
data: param,
dataType: 'json',
success: function(data){
$('.grid_foot').text(data.rows.length + ' records');
$.each(data.rows, function(count, item) {
var c = 0;
var cells = '';
while (c < columns.length) {
cells += '<td class="'+ columns[c] +'">' + item['cell'][c] + '</td>';
c++;
}
var newTr = '<tr id="' + item['id'] + '">'+ cells +'</tr>';
$('.grid_wrapper table').append(newTr);
});
var c = 0;
while (c < columns.length) {
var min_width = $('div.' + columns[c]).css('min-width');
$('td.' + columns[c]).width(min_width);
var col_width = $('td.' + columns[c]).width();
$('div.' + columns[c]).width(col_width);
c++;
}
var c = columns.length - 1;
var col_width = $('div.' + columns[c]).width();
$('td.' + columns[c]).width(col_width);
}
});
}
...即使你可以看到它的設計爲一個模塊化的應用程序。 ajax調用的參數和表的構造被傳遞給它。但是當它在一個單獨的文件中時它不會運行,儘管firebug和dom檢查器都沒有顯示錯誤,當它粘貼到兩個控制檯中時它當然會工作。
這是怎麼發生的?是否因爲嵌套的HTML頁面?您可以將多少個腳本加載到頁面中是否有限制?其他腳本可能會干擾它嗎?我該如何調試它?編輯:Firebug和Dom Inspector現在都告訴我'data_grid()'沒有被定義,並且它無法找到datagrid.js事件,儘管我已經在腳本標記中使用了正確的路徑,並且將它包括在內即使主頁面擁有js文件!我甚至沖刷了我的瀏覽器緩存並重新啓動了它,但它仍然會這樣說。
編輯:一些Snooping功能後,我發現在子頁面的一個流浪漢的鏈接,並修復它後,我不再獲得404文件未找到錯誤。但我仍然得到一個函數未定義的錯誤。
首先,使用'alert()'來確定是否包含JS文件。然後對函數體做同樣的事情。如果調用的函數不存在,那麼肯定會引發錯誤。 – 2010-10-21 13:05:06
JavaScript錯誤控制檯說什麼? – epascarello 2010-10-21 13:08:43
現在確定javascript控制檯告訴我fill_grid()沒有被定義,並且即使它在主頁上的最後一個腳本標記中被調用並且路徑是正確的,它也找不到js文件。 – cybermotron 2010-10-21 13:26:53