動畫「請稍候」不使用jQuery

加載我得到這個形象告訴人們，有些動作是加載：http://problemio.com/img/ajax-loader.gif 動畫「請稍候」不使用jQuery

然後我把這個div我的網頁上顯示它：

<div id="loading"> 
    <p><img src="/img/ajax-loader.gif" /> Please Wait</p> 
</div>

然後我把這個CSS吧：

#loading 
{ 
    display:none; 
}

然後在我的jQuery我這樣做：

$("#loading").show();

但它只是不渲染。任何想法我做錯了，爲什麼它不顯示？

這裏是哪裏，這是應該發生的一個頁面例如：http://www.problemio.com/problems/problem.php?problem_id=216

謝謝！

來源

2011-11-13 GeekedOut

你能給我們更多的代碼嗎？ –

@BookOfZeus代碼都在視圖源中。如果你需要登錄，其[email protected]/testing – GeekedOut

在Google hrome上測試（通過在開發者控制檯上運行$（「＃loading」）.show（））似乎工作正常。

難道是元素被放置在頁面的底部，你只是沒有看到它出現？

如果是這樣的問題，嘗試應用在你的CSS以下樣式

#loading { 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    background-color: #fff; 
    border: 1px solid #aaa; 
    padding:0 20px; 
}

你也應該塊的外觀邏輯可能更改爲以下

秀加載器立即當用戶點擊觸發ajax呼叫的鏈接
做ajax調用
Ajax調用被完成（錯誤或成功）
隱藏加載DIV

繼續與錯誤/成功處理程序

$('#add_attempted_solution').bind('submit',function() { 

// pre ajax call code 

$("#loading").show(); 
$.ajax({ 
    type: "POST", 
    url: "/auth/check_login.php", 
    dataType: "json", 
    success: function(data) { 
     $("#loading").hide(); 

     // success handling 
     ...... 
     .... 
    }, 
    ... 
    error: function() { 
     $("#loading").hide(); 

     // error handling 
     .... 
     ... 
    } 
    ... 
})

}

來源

2011-11-13 01:15:19 vinilios

我認爲配置可能是一個問題，但不是在屏幕中間的應用程序正常的那種東西，不管它在哪裏的HTML？ – GeekedOut

噢，現在看來 - 看看鏈接。但我該如何讓js工作才能讓它出現在AJAX/jQuery中？ :) – GeekedOut

檢查更新的答案 – vinilios

。在你的代碼中的問題沿線的某處。如果您在您的瀏覽器地址欄中輸入javascript:$("#loading").show();，它會顯示div。將你的JS代碼移到文檔的底部（在關閉正文標籤之前），確保你有必要的分號（我已經看到了一些缺失），三重檢查你的代碼。

更具體地說，對於/auth/check_login.php的AJAX請求未觸發成功回調，請嘗試使用完整的回調。

來源

2011-11-13 01:20:19 eth0

我有點困惑 - 我認爲check_login.php調用並不重要，因爲節目（）電話我正在做的是在此之前。 – GeekedOut

哦，你是對的....一會兒那裏它是在check_login電話:( – GeekedOut

啊啊，只是把它放在通話之外，但它仍然沒有渲染:( – GeekedOut

動畫「請稍候」不使用jQuery

回答

相關問題