проблема с CSS наследовать и Ajax - PullRequest
0 голосов
/ 13 сентября 2010

Существует таблица original state before any selection alt text, которая использует CSS (используя наследование в CSS) для форматирования своего макета. Как вы можете видеть, в верхней части окна есть выпадающий список, который позволяет нам выбирать имена, и в зависимости от выбора будет заполнена таблица. Это действие было обработано Ajax-вызовом, поэтому мы обновляем только таблицу, а не остальную часть страницы. Однако, когда мы вызываем этот вызов Ajax, даже если в коде нет никаких изменений, между вертикальными и горизонтальными границами этой таблицы будет дополнительный пробел. Я предполагаю, что есть проблема с вызовом Ajax и макетом CSS, что у нас есть эти лишние пробелы. Имеет ли это смысл? или есть ли у вас место, где я могу начать свои расследования? After selecting an option in the dropdown

Вот исходный код моего Test.jsp

<a:test-webpart>

<table class="ContentPanel first-child" cellspacing="0" cellpadding="0">
    <tr>
        <th id="title" class="CPHeader" width="100%" colspan="400" style="border-bottom:1px solid <theme:get selector="#test .DefaultBorder" attribute="border-color" />;"><c:out value="${tile_title}" /></th>
    </tr>
    <%@ include file="MyTest.jst" %>
    <tbody  class="content-area">
    <tr>
        <td>
            <table class="ContentPanel ControlLayout" >
        <tr>
                    <th style="padding-left:7px;" width="20%"><label for="testlist"><span >*</span><fmt:message key = "jsp.request.testlist" bundle="${local}" /></label></th>
                    <td class="last-child" width="80%">
                        <span >
                            <html:select property="valueAsMap(test_ITEM).value(test_OFFER)" styleClass="dropDown" styleId="offeredtest">
                                <html:optionsCollection property="value(Item_test_LIST)" label = "name" value ="id" />
                            </html:select>
                        </span>
                    </td>
                </tr>
                <tr>
              <th style="padding-left:7px;" width="20%"><label for="employeeslist"><span >*</span><fmt:message key = "jsp.reques.employeeslist" bundle="${local}" /></label></th>
                    <td class="last-child" width="80%" >
                        <span >
                            <html:select property="valueAsMap(test_ITEM).value(Item_test_EMP)" onchange="javascript:getAlltests()"  styleClass="dropDown" styleId="employeeId">
                                <html:optionsCollection property="value(Item_test_EMP_LIST)" label = "name" value = "id" />
                            </html:select>
                        </span>
                    </td>
                </tr>
      </table>
    </td>
  </tr>
  <tr>
        <th style="padding-left:7px;" align="left"><label for="testacceptlist"><span >*</span><fmt:message key = "jsp.request.testacceptlist" bundle="${local}" /></label></th>
    </tr>
  <tr>
    <td style="padding-left:7px;">
    <kvl:rsr-webpart>
     <div id="testsTable">
      <table class="Tabular" width="100%"  cellpadding="0" cellSpacing="0">
        <tr class="first-child">
          <th><fmt:message key = "jsp.request.select" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.a" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.b" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.c" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.d" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.e" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.f" bundle="${local}" /></th>
            <th class="last-child"><fmt:message key = "jsp.request.job" bundle="${local}" /></th>
        </tr>

        <c:forEach var="item" items = "${items}"  varStatus="status">       
          <tr class="<c:if test='${status.index % 2 !=  0}'>Even</c:if> <c:if test='${item.isFromPrimaryJob == true}'>Primary</c:if> <c:if test='${item.isFromPrimaryJob != true}'>Exchange</c:if>">
                <td>
                    <input  type="checkbox"
                        id="test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>"
                        name="value(test_selected)" 
                        value="<c:out value="${item.id}" />_<c:out value="${item.Date}"/>" 
                        onclick="javascript:checkBox('test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>','value(test_selected)','valueAsMap(REQUEST_ITEM).value(test_selected_list)','false')" >
                </td>
                <td>
                    <c:choose>
                            <c:when test="${empty item.label}">
                        &nbsp;
                    </c:when>
                    <c:otherwise>
                        <c:out value="${item.label}"/>
                    </c:otherwise>
                    </c:choose>
                </td>
                <td><c:out value="${item.Date}"/></td>
                <td><c:out value="${item.b}"/></td>
                <td><c:out value="${item.d}"/></td>
                <td><c:out value="${item.e}"/></td>
                <td><c:out value="${item.f}"/></td>
                <td class="last-child"><c:out value="${item.job}"/></td>
            </tr>
        </c:forEach>
        </table>
        </div>
      </kvl:rsr-webpart>
    </td>
  </tr>
  <tr>
        <td style="padding-left:7px;">
            <table class="ContentPanel ControlLayout" width="100%">
          <%@ include file="request.jst" %>
       </table>
     </td> 
   </tr>      
  </tbody>
</table>
</a:test-webpart>

Ответы [ 2 ]

0 голосов
/ 23 ноября 2010

Позже я понял, что проблема не имеет ничего общего с рендерингом Ajax. Это был HTML-тег возврата, который имел эти дополнительные отступы, поскольку он наследовал свой макет из другого места. Я применил свои отступы и границы вместе с ячейками, которые я отправлял с сервера, и все работало как чудо.

0 голосов
/ 14 сентября 2010

взгляните на сгенерированный HTML. просто смотреть на визуализированный материал не поможет, за исключением того, что что-то не так, а не что. и просто смотреть на код сервера не поможет, поскольку он использует магию и иногда скрывает HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...