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

时间:2013-12-17 13:22:18

标签: php jquery ajax tabs panes

我有一个母版页,它使用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);
             }
         });
    });
});

tabs.php:

<!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&gt; div'”

或 “Uncaught TypeError:Object [object Object]没有方法'tabs'”

由于

1 个答案:

答案 0 :(得分:0)

在您的代码中看起来有一个小错误(尽管可能是问题的拼写错误):&lt;&gt;应该只是&gt;。此外,您是否包含了标签工作所需的每个js文件?第二个错误表示可能缺少必需的JS文件/类。

例如,您可能已经包含了jquery库,但是您是否包含了工具?

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