Question

我看到很多类似的问题，但没有人帮我解决问题。

我正在尝试创建一个网页，单击该按钮会导致打开一个对话框，其中包含表格形式。我成功地创建了基本JQuery教程中描述的表格形式的对话框。现在，我将有不同的按钮（创建新的，编辑等），并且不同的按钮应以不同的方式打开对话框形式（例如，空表单或预加载数据）。因此，出于这个原因，我想重用相同的对话框，并为其加载不同的选项卡。

我看到jQuery.UI在我点击按钮之前加载了，但是在我点击按钮加载带有表单的对话框之后它变得未定义（我使用console.debug（jQuery.ui）来检查它）获取TypeError，tab（）不是函数。我尝试以不同的方式加载它，但没有任何方法可以帮助我。我该怎么办？

感谢。

点击按钮前的第一页：

enter image description here

控制台显示在单击按钮之前已加载jquery：

enter image description here

这是我单击按钮创建新表单（它有链接而不是制表符）后页面的样子：

enter image description here

这就是控制台告诉我的：

enter image description here

这是我的index2文件的代码，后面是add2.phtml的代码，它试图加载到对话框中：

index2.phtml：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <style>
        body {
            font-size: 62.5%;
        }

        label, input {
            display: block;
        }

        input.text {
            margin-bottom: 12px;
            width: 95%;
            padding: .4em;
        }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }

        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }

        div#users-contain table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }

        div#users-contain table td, div#users-contain table th {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }

        .ui-dialog .ui-state-error {
            padding: .3em;
        }

        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
    <script>
        $(function () {
            var name = $("#name"),
                email = $("#email"),
                password = $("#password"),
                allFields = $([]).add(name).add(email).add(password),
                tips = $(".validateTips");

            function updateTips(t) {
                tips
                    .text(t)
                    .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " +
                        min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }

            function checkRegexp(o, regexp, n) {
                if (!( regexp.test(o.val()) )) {
                    o.addClass("ui-state-error");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }

            $("#dialog-form").dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Create an account": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");

                        bValid = bValid && checkLength(name, "username", 3, 16);
                        bValid = bValid && checkLength(email, "email", 6, 80);
                        bValid = bValid && checkLength(password, "password", 5, 16);

                        bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                        bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");
                        bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

                        if (bValid) {
                            $("#users tbody").append("<tr>" +
                                "<td>" + name.val() + "</td>" +
                                "<td>" + email.val() + "</td>" +
                                "<td>" + password.val() + "</td>" +
                                "</tr>");
                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });


            console.debug('Debug 1:' + jQuery.ui);

            $("#create-user")
                .click(function () {

                    console.debug('Debug 2:' + jQuery.ui);

                    $("#dialog-form").dialog({
                        modal: true,
                        width: '800',
                        height: '700',
                        open: function () {

                            console.debug('Debug 3:' + jQuery.ui);

                            var url = "<?php echo $this->url('OnlineFieldEvaluation', array('action'=>'add2'));?>";

                            console.debug('Debug 4:' + jQuery.ui);

                            $("#dialog-form").load(url, function (response, status, xhr) {
                                if (status == "error") {
                                    var msg = "Sorry but there was an error: ";
                                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                                }else{
                                    console.debug('Debug 5:' + jQuery.ui);
                                }
                            });
                        }

                    });

                    console.debug('Debug 6:' + jQuery.ui);

                    $("#dialog-form").dialog("open");
                    //prevent the browser to follow the link
                    return false;

                });


        }); 

    </script>
</head>
<body>

<div id="dialog-form" title="Create new user">
</div>


<div id="users-contain" class="ui-widget">
    <h1>Existing Forms:</h1>
    <table id="users" class="ui-widget ui-widget-content">
        <thead>
        <tr class="ui-widget-header ">
            <th>Student ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
        </thead>
        <tbody>
        <?php foreach ($evaluations as $eval) : ?>
            <tr>
                <td><?php echo $this->escapeHtml($eval->stud_id); ?></td>
                <td><?php echo $this->escapeHtml($eval->stud_fname); ?></td>
                <td><?php echo $this->escapeHtml($eval->stud_lname); ?></td>
                <td>
                    <button id="edit-form">Edit</button>
                </td>
                <td>
                    <button id="delete-form">Delete</button>
                </td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
</div>
<button id="create-user">Create new user</button>


</body>
</html>

以下是add2.phtml的代码：

<?php

$title = 'Add new evaluation';
$this->headTitle($title);
?>
<h1><?php echo $this->escapeHtml($title); ?></h1>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs - Content via Ajax</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--    <link rel="stylesheet" href="/resources/demos/style.css">-->


    <script>



        $(function () {

            console.debug('Debug 7:' + jQuery.ui);

            $("#tabs").tabs({


                beforeLoad: function (event, ui) {

                    console.debug('Debug 8:' + jQuery.ui);

                    ui.jqXHR.error(function () {
                        ui.panel.html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                "If this wouldn't be a demo.");
                    });
                }
            });

        console.debug('Debug 9:' + jQuery.ui);


        });
    </script>
</head>
<body>


<p class="validateTips">All form fields are required.</p>

<div id="tabs">
    <ul>

        <li><a id="showform" href="<?php echo $this->url('OnlineFieldEvaluation',
                array('action' => 'addstudentinformation', 'controller' => 'OnlineFieldEvaluation')); ?>">Student
                Information 1</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>

</div>


</body>
</html>

无法将标签加载到对话框组件中：标签显示为链接

0 个答案: