Question

我正在使用.load（）从我们的服务器获取页面。奇怪的是，我可以看到使用调试工具请求成功。我可以看到它是使用元素的html的一部分。我也可以在页面源中看到它。但是，它没有显示。

当我尝试将鼠标指针悬停在div代码上时，它会显示div所在的部分但是大小是这样的1683px X 0px

我已经尝试从堆栈中读取与我的问题相同的其他帖子，但答案并没有解决我的问题。

我无法粘贴整个代码，但我会确保已发布所需的所有内容。

function updateDefaultExchangeRate(){
    alert("grgd");
    var url = window.location.href
    url = url.substr(0, url.indexOf("index"));
    url = url += "updateDefaultExchangeRate";
    var params = "?sideMenuItem=10&";
    $('#defaultExchangeRateTable tr').each(function(){
        if($(this).find('td #detail-currency').val()!=undefined) {
            params += "detail-currency=" + encodeURI($(this).find('td #detail-currency').val()) + "&";
            params += "detail-exchangeRateVal=" + encodeURI($(this).find('td #detail-exchangeRateVal').val()) + "&";
            params += "detail-id=" + encodeURI($(this).find('td #detail-id').val()) + "&";
            params += "detail-version=" + encodeURI($(this).find('td #detail-version').val()) + "&";
        }
    })

    url += params.substr(0,params.length-1)
    $('#defaultExchangeRateTable').load(url );

}

要加载的html页面

<%@ page import="java.text.SimpleDateFormat" %>

<%
    SimpleDateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
%>

<div id="exchangeRateTable">
    <div class="list-table">
        <table>
            <thead>
            <tr>
                %{--<th style="width: 25px"/>--}%
                <th>Exchange Rate Date</th>
                <th>Currency</th>
                <th>Exchange Rate</th>
            </tr>
            </thead>
            <tbody>
            <%  def currency = null
                if(exchangeRateInstanceList.size != 0) {
                currency = ListUtil.findCurrencyById(currencyInstanceList, exchangeRateInstanceList?.get(0).targetCurrencyId.toString())
            }
            %>

            <g:each in="${exchangeRateInstanceList}" status="i" var="exchangeRateInstance">
                <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                    <td>${exchangeRateInstance?.exchangeDate ? formatter.format(exchangeRateInstance?.exchangeDate) : ''}</td>
                    <td>${currency?.shortName}</td>
                    <td>${exchangeRateInstance?.exchangeRate ? String.format("%,.2f",exchangeRateInstance.exchangeRate) : '' }</td>
                </tr>
            </g:each>
            </tbody>
        </table>
    </div>
</div>

index，它必须加载的页面。

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main">
</head>
<body>
    <div id="list-exchangeRate" class="content scaffold-list" role="main">

        <div id="mainRecordsList">

            <g:render template="indexDefaultExchangeRate" />
        </div>
        <g:render template="/layouts/pagination" model="${[instanceCount: exchangeRateInstanceCount]}"/>
    </div>
</body>
</html>

顺便说一句，我使用grails。

Answer 1

感谢@JoshKG。因为他，我能够解决这个问题。

对于将来会遇到此类问题的人。（成功从服务器获取所需的模板/ div但不显示。）

使用工具轻松了解正在发生的事情（例如，firebug，dev工具）。

1) Go to the console tab and type this. (Replace "ThisIsMyDiv" with the Id that you need to find)
    document.getElementById("ThisIsMyDiv") 

2) You can easily determine if you've successfully gotten the div/template from server. If successful, right click on the parent element and choose "Reveal in Elements Panel" then check the CSS. Mine happens to have this
**display:none** which makes it clear why I could not see the page.

请注意我在我的示例中使用了Chrome的开发工具，firebug肯定有类似的东西，只是玩它。

希望这将有助于将来失去灵魂。

.load获取页面，但不显示

1 个答案: