動態更新div元素的內容需要兩次或三次嘗試

我試圖更新div的內容，但它並不總是工作。我不確定它是否與我的問題有關，但我正在使用jQuery Mobile。動態更新div元素的內容需要兩次或三次嘗試

背景：

我有一個選擇菜單，它是用來選擇一個位置。我也有一個按鈕，用於獲取有關所選位置的信息。 Ajax用於獲取數據，這些數據顯示在我的頁面的div元素中。我發現我需要點擊按鈕兩次才能更新div元素。奇怪的是，如果我在更新div之前添加警報，它可以正常工作（即，我只需要按一下按鈕）。

代碼：

$(function() { 
    $("#weather_submit").click(function(){ 
    $.mobile.pageLoading(); 
    var formData = $("#getWeatherForm").serialize(); 
    $.ajax({ 
     type: "POST", 
     url: "weather.php", 
     cache: false, 
     data: formData, 
     success: onSuccessWeather, 
     error: onError 
    }); 
    return false; 
    }); 
}); 

function onError(data, status) { 
    $.mobile.pageLoading(true); 
    alert('error'); 
} 

function onSuccessWeather(data, status) { 
    $.mobile.pageLoading(true); 
    //alert(data); // if I use this line of code I never have a problem (i.e. the weatherSummary div updates appropriately 
    data = $.trim(data); 
    $("#weatherSummary").html(data); 
}

我最初發現使用我的Android EVO這個問題，但我只是試着Firefox和它太發生。

我懷疑這是與.html（）出於某種原因沒有正確地工作有關。

任何想法？

謝謝！

來源

2011-08-05 user418775

作爲一個實驗我剛剛更新了點擊處理程序不使用ajax，而是直接更新div（我使用了一個計數器，並在奇數時顯示「奇數」，甚至在偶數時顯示「偶數」）。每次都能很好地工作。我現在很困惑。我知道ajax正在工作，因爲我在onError和onSuccessWeather處理程序中發出了警報。有任何想法嗎？ – user418775

'＃weatherSummary'元素是否總是存在，還是在某個時刻生成的？我懷疑有些事情沒有及時加載。嘗試在Firefox中檢查您的JavaScript錯誤日誌。 – Karl

這是個好主意。我直接在html中聲明它，所以我期望它存在，但也許它不存在。順便說一句，我只是通過將alert（）後的.html（數據）和東西總是正常工作來調整onSuccsessWeather。我會檢查錯誤日誌。謝謝。 – user418775

嘗試：

$("#page_id_name").page();

而且我認爲這是在Beta 2更新的新方法：

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

新的「創建」事件：一次輕鬆提升所有小工具

雖然頁面插件不再專門調用每個插件，但確實會派發一個「pagecreate」事件，大多數小部件用於自動初始化自身。只要插件腳本被引用，它就會自動增強它在頁面上找到的小部件的任何實例，就像以前一樣。例如，如果加載了選擇菜單插件，它將增強在新創建的頁面中找到的所有選擇。

這種結構現在讓我們來添加一個新創建的事件，可以是觸發任何元素，爲您節省了手動初始化包含在元素中的每個插件的任務。到目前爲止，如果開發者通過Ajax或動態生成的標記加載內容，他們需要手動初始化所有包含的插件（列表視圖按鈕， select等）以增強標記中的小部件。

現在，我們方便的創建事件將初始化該標記內所有必需的插件，就像頁面創建增強過程的工作方式一樣。如果您要使用Ajax加載HTML 標記塊（例如登錄表單），則可以觸發創建以自動將其包含的所有小組件（此個案中的輸入和按鈕）轉換爲增強版本。此方案的代碼將是：

$(...new markup that contains widgets...).appendTo(".ui-page").trigger("create");

因此，如果您升級到Beta 2的嘗試是這樣的（未經測試）：

$("#weatherSummary").html(data).trigger("create");

來源

2011-08-05 17:54:31

謝謝菲爾。剛剛嘗試過$（「＃weatherSummary」）.html（data）.trigger（「create」）; 但它沒有奏效。我也試過$（「＃weather」）。page（）;沒有成功。 – user418775

我剛剛在$（「＃weatherSummary」）。html（數據）附近添加了5秒setTimeout作爲實驗，並且問題從未發生。在嘗試setTimeout（）之前，我正在用firefox控制檯查看XMLHttpRequests。郵政總是看起來沒問題，但答覆在問題發生時就有過時的數據。我不明白爲什麼使用setTimeout會影響firefox顯示的Response數據，這當然會影響div中顯示的內容。 – user418775

夥計們，我不明白這一點，但問題似乎是我在我的weather.php腳本中做了一些緩存。我禁用了，現在一切正常。它沒有意義，如何JavaScript的警報和超時的東西使這項工作。我將不得不花費更多的錢來完成這一切。如果可以的話，我會刪除這篇文章，因爲我不想浪費任何人的時間。 – user418775

動態更新div元素的內容需要兩次或三次嘗試

回答

相關問題