当前位置： 文江博客话题详情

数据库生成 jquery 选项卡

发布于 2024-11-07 15:20:57 字数 6143 浏览 5 评论 0原文

更新2：

对于更简单的脚本，您可以使用jquery live来处理动态创建的dom。这就是问题所在吗？

更新1：

我尝试将get_tab_frame.aspx的ajax移出$("#tabs").tabs({部分， 结果，即它只会返回未格式化的选项卡名称，而没有选项卡内容，然后单击这些未格式化的选项卡，只需打开一个新窗口，而不是显示选项卡内容

这会产生奇怪的

。脚本运行良好，它只需创建 3 个选项卡，并根据查询字符串 tab 从 tabs.aspx 获取每个选项卡的内容：

<!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>

我做错了什么以及如何让它工作？

原文

UPDATE 2:

For simpler scripts, you would use jquery live to work with dynamically created dom. Is that what the problem is here?

UPDATE 1:

I have tried moving the ajax for get_tab_frame.aspx out of the $("#tabs").tabs({ section, which gives strange results, i.e. it will just return the tab names unformatted without the tab contents. Then clicking on these unformatting tabs, just open a new windows instead of showing the tab content.

ORIGINAL QUESTION:

The following script works well, which simply creates 3 tabs and gets the content of each tab from tabs.aspx based on the query string 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>

I am now trying to database generate the content of id="tabs" and use jquery to insert the generated html into the id="tabs" div tab using the following script:

<!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>

This is not working for some reason. I just get a blank screen even though get_tab_frame.aspx produces exactly the same html i.e.

<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>

What am I doing wrong and how do I get this to work?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

浪荡不羁 2024-11-14 15:20:57

这可能是因为您在将 html 加载到 div 之前调用了 $("#tabs").tabs() 。

.tabs() 函数将当前内容转换为选项卡 - 并且您没有内容。当您使用 ajax 更改内容时，它不会自动更改选项卡。

如果您在加载内容后调用 $("#tabs").tabs() ，它可能会起作用。

It is probably because you've called $("#tabs").tabs() before you have loaded the html into the div.

The .tabs() function converts the current content to tabs - and you have no content. It does not automatically change the tabs when you change the content with ajax.

It might work if you call $("#tabs").tabs() after you have loaded the content.

回复 原文
~没有更多了~

关于作者

韬韬不绝

暂无简介

0 文章
0 评论
805 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文