Пользовательский интерфейс jQuery: обновление сортируемого портлета без обновления всей страницы - PullRequest
Новая
       0

Пользовательский интерфейс jQuery: обновление сортируемого портлета без обновления всей страницы

0 голосов
/ 18 сентября 2011

Я создаю сайт, связанный с базой данных, интерфейс которой состоит из вкладок и портлетов во вкладках, все они созданы с использованием пользовательского интерфейса jQuery.

main.jsp запускает вкладки: 

<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>

и файл price.jsp, включенный в main.jsp, запускает портлеты: 

<script>
$(function() {
    $( ".column" ).sortable({
        connectWith: ".column",
        distance: 200,
        containment: 'parent',
        items: "li:not(.ui-state-disabled)"
    });

    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
            .addClass( "ui-widget-header ui-corner-all" )
            .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
            .end()
        .find( ".portlet-content" );

    $( ".portlet-header .ui-icon" ).click(function() {
        $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
        $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
    });

    $( ".column" ).disableSelection();
});
</script>

Внутри price.jsp в одном из портлетов у меня есть табличные данные, которые пользователь может время от времени обновлять при изменении записей базы данных, без обновления других портлетов на этой вкладке .

Так что у меня в портлете была бы кнопка с надписью refresh: 

<button onclick="window.location.reload()">Refresh</button>

Тем не менее, он не только обновляет другие портлеты, но и обновляет всю страницу! Это не то, что я намеревался.

Я думаю, что функция onclick должна выглядеть примерно так: 

$(this).sortable({update: function(event, ui){ //some code here//} });

но я не слишком знаком с синтаксисом jQuery.

Надеюсь, кто-нибудь может помочь мне понять, как изменить функцию нажатия кнопки!

Ответы [ 2 ]

1 голос
/ 18 сентября 2011

То, что вы хотите, это запрос AJAX.Взгляните на $. Ajax .Вы захотите вернуть HTML таблицы как ответ от скрипта $.ajax запросов.Затем обновите свою таблицу, используя $('#tableID').html(response) в части success: function(response) вызова $.ajax.

0 голосов
/ 20 сентября 2011

Привет только тем, кто случайно столкнулся со второй частью этой проблемы (страница, не обновляющая последние записи базы данных), мне удалось это исправить.

После долгой игры с кодами, я обнаружилчто это действительно проблема IE.IE кэширует представление базы данных, когда вы впервые открываете IE и запускаете страницу JSP.Таким образом, последующие обновления базы данных будут отражены, когда вы нажмете кнопку обновления IE, но не с помощью функции jquery ajax .load (' .jsp').Функция .load (' .jsp') в основном возвращает вас к этому кешированному представлению, когда вы впервые загрузили страницу JSP, когда вы открыли IE.Таким образом, если вы не закрыли и не открыли IE, кнопка обновления, используемая для обновления данных таблицы, не даст вам записей, обновленных после того, как вы впервые запустили страницу JSP .

.поставить эти коды перед сценарием JSP-страницы: 

<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

или мета-код в заголовке, который гласит: 

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content=0>

Теперь этот обходной путь предназначен только для тех, у кого проблемы сIE.Я протестировал его на Chrome, и кнопка обновления работает нормально с кодом выше или без него.Итак, поехали.

...