База данных генерирует вкладки jquery - PullRequest
1 голос
/ 16 мая 2011

ОБНОВЛЕНИЕ 2:

Для более простых сценариев вы должны использовать jquery live для работы с динамически создаваемым dom. В этом ли проблема?

ОБНОВЛЕНИЕ 1:

Я попытался переместить ajax для get_tab_frame.aspx из раздела $("#tabs").tabs({, который дает странные результаты, то есть он просто вернет имена вкладок в неотформатированном виде без содержимого вкладки. Затем, нажимая на эти неформатированные вкладки, просто откройте новые окна вместо отображения содержимого вкладки.

ОРИГИНАЛЬНЫЙ ВОПРОС:

Хорошо работает следующий скрипт, который просто создает 3 вкладки и получает содержимое каждой вкладки из tabs.aspx на основе строки запроса tab:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title></title> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

        <script type="text/javascript" language="javascript"> 
            $(document).ready(function() {
                $("#tabs").tabs({
                    ajaxOptions: {
                        success: function(){
                            $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
                                .find( ".portlet-header" )
                                    .addClass( "ui-widget-header ui-corner-all" )
                                    .end()
                                .find( ".portlet-content" );

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

        <style type="text/css">
            .column { width: 170px; float: left; padding-bottom: 100px; }
            .portlet { margin: 0 1em 1em 0; }
            .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
            .portlet-header .ui-icon { float: right; }
            .portlet-content { padding: 0.4em; }
            .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
            .ui-sortable-placeholder * { visibility: hidden; }
        </style>
    </head> 
    <body> 
        <div id="tabs">
        <ul>
            <li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li>
            <li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li>
            <li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li>
        </ul>
        </div>
    </body> 
</html> 

Я сейчас пытаюсь сгенерировать базу данных для содержимого id="tabs" и использовать jquery для вставки сгенерированного HTML-кода во вкладку id="tabs" div, используя следующий скрипт:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title></title> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

        <script type="text/javascript" language="javascript"> 
            $(document).ready(function() {
                $("#tabs").tabs({
                    ajaxOptions: {
                        success: function(){
                            $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
                                .find( ".portlet-header" )
                                    .addClass( "ui-widget-header ui-corner-all" )
                                    .end()
                                .find( ".portlet-content" );

                            $.ajax({
                                url: 'get_tab_frame.aspx?rand=' + Math.random(),
                                type: 'GET',
                                error: function(xhr, status, error)
                                {
                                    alert(status);
                                    alert(xhr.responseText);
                                },
                                success: function(results) 
                                { 
                                    $("#tabs").empty().html(results);
                                }
                            });

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

        <style type="text/css">
            .column { width: 170px; float: left; padding-bottom: 100px; }
            .portlet { margin: 0 1em 1em 0; }
            .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
            .portlet-header .ui-icon { float: right; }
            .portlet-content { padding: 0.4em; }
            .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
            .ui-sortable-placeholder * { visibility: hidden; }
        </style>
    </head> 
    <body> 
        <div id="tabs"> </div>
    </body> 
</html> 

По какой-то причине это не работает. Я просто получаю пустой экран, хотя get_tab_frame.aspx выдает точно такой же HTML, т.е.

<ul>
    <li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li>
    <li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li>
    <li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li>
</ul>

Что я делаю не так и как заставить это работать?

Ответы [ 2 ]

0 голосов
/ 01 августа 2011
0 голосов
/ 16 мая 2011

Возможно, вы вызвали $ ("# tabs"). Tabs () до того, как загрузили html в div.

Функция .tabs () преобразует текущий контент во вкладки - и у вас нет контента.Он не меняет автоматически вкладки, когда вы изменяете содержимое с помощью AJAX.

Это может сработать, если вы вызовете $ ("# tabs"). Tabs () после загрузки содержимого.

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