Question

我有以下代码，在按下调用$("#proxy_history_dialog").dialog({行的按钮后 - 我不断收到错误Uncaught TypeError: $(...).dialog is not a function。我搜索了一个解决方案，大多数答案都指向jquery包含块。我试图多次更改jquery版本而没有任何运气。我在这里错过了什么？

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>
    Optimize Proxies
 | Upstream Commerce</title>


    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" />


    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>

    <script type="text/javascript"
            src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>


    <script type="text/javascript" src="/static/script/api_recs.js"></script>


    <style type="text/css">
        tfoot {
            display: table-header-group;
        }
    </style>

</head>
<body>

    <img id="loader" src="/static/img/loader_animation_large.gif" 
    style="
        width:36px; 
        height:36px; 
        display: none;
        position:absolute; 
        top:50%;
        left:50%;
        margin-top:-18px;
        margin-left:-18px;"/>
    <p><a href="/accounts/logout/">Logout</a> | <a href="/accounts/profile/">Home</a></p>

    <div id="title">
        <b style="font-size:200%" ;>Optimize proxies<br></b>
    </div>
    <div id="proxy_history_dialog" title="Proxy history" style="display:none;">
    </div>
    <table id='p_table-id' class="display" cellspacing="0" width="50%">
        <thead>
        <tr>

                <th>Site name</th>

                <th>Site id</th>

                <th>Extraction rate</th>

                <th>Proxy</th>

                <th>Proxy duration</th>

                <th>Proxy history</th>

        </tr>
        </thead>
        <tfoot>
        <tr>

                <th>Site name</th>

                <th>Site id</th>

                <th>Extraction rate</th>

                <th>Proxy</th>

                <th>Proxy duration</th>

                <th>Proxy history</th>

        </tr>
        </tfoot>
        <tbody>

            <tr>

                    <td><span>hp</span></td>

                    <td><span>2198</span></td>

                    <td><span>95.2%</span></td>

                    <td><span>brazil</span></td>

                    <td><span>0 days</span></td>

                <td>
                    <button id="2198" class="get-proxy-history">history</button>
                </td>
            </tr>

            <tr>

                    <td><span>amazon_hp</span></td>

                    <td><span>2199</span></td>

                    <td><span>99.8%</span></td>

                    <td><span>all_std.proxymesh</span></td>

                    <td><span>422 days</span></td>

                <td>
                    <button id="2199" class="get-proxy-history">history</button>
                </td>
            </tr>

            <tr>

                    <td><span>bestonix</span></td>

                    <td><span>-104</span></td>

                    <td><span>93.3%</span></td>

                    <td><span>shader_us</span></td>

                    <td><span>225 days</span></td>

                <td>
                    <button id="-104" class="get-proxy-history">history</button>
                </td>
            </tr>

        </tbody>
    </table>

    <script>
        $(document).ready(function () {
            $(".get-proxy-history").click(function () {
                var uri = "manage/optimize_proxies/get_proxy_history/" + $(this).attr("id") + "/";
                var result = api_get(uri, false, 'POST');
                $("#proxy_history_dialog").html(result[0]);

                $("#proxy_history_dialog").dialog({
                    resizable: true,
                    width: "auto",
                    height: "auto",
                    autoResize: false,
                    modal: false,
                    draggable: true
                });
            });


            ///////////////////////////////////////////////////////////////////
            // Setup column search - add a text input to each footer cell
            $('#p_table-id tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });

            // DataTable
            var table = $('#p_table-id').DataTable({
                dom: 'l Brtip',
                "aLengthMenu": [
                    [20, 50, 100, -1],
                    [20, 50, 100, "All"]],
                "buttons": [],
                paging: false,
                fixedHeader: true


            });
            // Apply the search
            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
        });
    </script>





</body>
</html>

Answer 1

看来，错误发生在DataTables包含/版本中。我尝试使用jQuery版本1.8.0和DataTables版本1.10.1，一切似乎都适用于我。

工作小提琴： https://jsfiddle.net/mnexvzgx/

注意 ：我已将您的API调用注释掉，并将结果替换为虚拟值。

希望这有帮助！

Answer 2

放线

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

后

<script type="text/javascript" src="/static/script/api_recs.js"></script>

像：

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>    
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>    
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

请注意：如果这种方式不起作用，那么chech api_recs.js

获取“未捕获的TypeError：$（...）。对话框不是一个函数”

2 个答案: