使用ajax加载选项卡无法显示窗格



我有一个主页面,它使用ajax加载名为"Wrapper"的div中的内容。

现在,我在以这种方式加载jquery UI选项卡时遇到了一个问题。如果我忽略使用AJAX,我可以加载并显示它们。但是当使用ajax时,只显示选项卡,而不显示窗格!我已经阅读了关于这个问题的所有主题,但它们并没有解决我的问题。

JQuery代码为:

$(function(){       
     $('#link').live('click',function(){
          $.ajax({
             url: "tabs.php",
         success: function(response) 
         {
            $("#Wrapper").html(response);
                console.log(response);
             }
         });
    });
});

选项卡.pp:

<!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" xml:lang="fa-ir" lang="fa-ir">
    <head>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="Scripts/menu.js"></script>
        <script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
        <link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />
        <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
        <style>
            div.panes div h2 
            {
                margin:5px 0 15px 0;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/tabs.css"/>
        <link rel="stylesheet" type="text/css" href="css/tabs-panes.css"/>
        <style type="text/css">
            div.panes div
            {
                -background:#fff;
                height:auto;
            }
            div.panes label 
            {
                margin-bottom:15px;
                display:block;
            }
            label.error 
            {
                color:red;
            }
            body
            {
                background-color:#d4d6da;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/mystyle.css">
        <link rel="stylesheet" type="text/css" href="css/syntax.css"/>
        <link rel="stylesheet" type="text/css" href="css/demos.css"/>       
    </head>
    <body>      
        <table style="width:100%;height:auto;border:1px dashed blue;" >
            <tr>
                <td align="center">
                    <div id="wizard_tabs">
                        <!-- tabs -->
                        <ul class="tabs">
                            <li><a href="#" class="outerStyle">1- File upload</a></li>
                            <li><a href="#" class="outerStyle">2- Proj explanation</a></li> 
                        </ul>
                        <!-- form and panes -->
                        <form action="projects-regEN.php"  method="post" enctype="multipart/form-data">
                            <div class="panes" style="font-family:tahoma">
                                <div style="border:1px solid  #1c94c4;" id="tabs-1">
                                    <table id="projINFO" style="width:100%">
                                        <tr>
                                            <td>
                                                <span class="innerStyle">Title</span>
                                            </td>
                                            <td>
                                                <input type="text" style="width:150px" maxlength="50" id="projectTitle" name="projectTitle"/>
                                            </td>                                           
                                        </tr>
                                        <tr>
                                            <td style="width:31%" >
                                                <span class="innerStyle">Proj Upload</span>
                                            </td>
                                            <td style="width:30%">
                                                <input type="file" id="projectUpload" name="projectUpload"/>
                                            </td>                                           
                                        </tr>
                                    </table>
                                    <br/>
                                    <input type="button" class="next"  id="next" name="continue"/>
                                </div>
                                <div style="border:1px solid  #1c94c4;" id="tabs-2">
                                    <table style="width:100%;border:1px solid black;font-family:tahoma;font-size:11px">
                                        <tr>
                                            <th>
                                                title
                                            </th>                                           
                                        </tr>
                                        <tr>
                                            <td id="firstCol"></td>
                                        </tr>
                                    </table>
                                    <br/>
                                    <span class="innerStyle">explanation</span>
                                    <textarea rows="4" maxlength="150" class="formItems" id="ProjInfo" name="ProjInfo" placeholder="پیام خود را اینجا وارد کنید"></textarea>
                                    <input type="submit" id="submitproj" name="done"/>
                                </div>  
                            </div>
                        </form>
                    </div>
                    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
                    <script>
                        $(function(){
                            var wizard = $("#wizard_tabs");
                            $("ul.tabs", wizard).tabs("div.panes > div", function(event, index) 
                            {           
                                projUp=$("#projectUpload").val();
                                projTi=$("#projectTitle").val();
                                if (index > 0 &&   (projUp==''|| projTi=='' ))
                                {
                                    $("#projectUpload").parent().addClass("error");
                                    return false;
                                }
                                $("#projectUpload").parent().removeClass("error");
                            });
                            // get handle to the tabs API
                            var api = $("ul.tabs", wizard).data("tabs");
                            $(".next", wizard).click(function() 
                            {   
                                projUp=$("#projectUpload").val();
                                projTi=$("#projectTitle").val();

                                if(projUp!='' && projTi!='')
                                    api.next();

                            }); 
                        });
                    </script>
                </td>
            </tr>                                                           
        </table>
    </body>
</html>

使用我读过的论文,我尝试初始化:

$("ul.tabs").tabs("div.panes <> div");我把它放在ajax的成功函数中,但它没有帮助。我也把它放在tabs.php中,但都没有帮助。我不知道还能做什么?!

根据我最初的陈述,它给了我不同的错误,比如:

"未捕获错误:初始化前无法调用选项卡上的方法;尝试调用方法'div.panes>div'"

或"未捕获类型错误:对象[Object Object]没有方法'tabs'"

感谢

您的代码中似乎有一个小错误(尽管可能是问题的拼写错误):<>应该简单地为>。此外,您是否包含了选项卡工作所需的所有js文件?第二个错误表示可能缺少所需的JS文件/类。

例如,您可能包含了jquery库,但您包含了工具吗?

 <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

相关内容

  • 没有找到相关文章

最新更新