1

我目前正在使用 jquery ui 选项卡（仅适用于下一个/上一个按钮）和一个 textarea。我开发了一个 ajax/js 函数，它将自动提交存储在文本区域中的值，并在 tab#2 中回显结果。但是我目前想将方法从自动提交表单更改为在用户单击下一步按钮时提交到前进到下一个。单击 jquery ui 选项卡中的下一步按钮时，如何在文本字段中提交值？这是我的自动提交示例

前面一个后面一个

<script>
$(function() {
    var $tabs = $('#tabs').tabs({
    disabled: [0, 1] });
    $(".ui-tabs-panel").each(function(i) {
             var totalSize = $(".ui-tabs-panel").size() - 1;
                         if (i != totalSize) {
        next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
                    }

     if (i != 0) {
    prev = i;
    $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
    }
});

 $('.next-tab, .prev-tab').click(function() {
    var tabIndex = $(this).attr("rel");
    $tabs.tabs('enable', tabIndex)
    .tabs('select', tabIndex)
    .tabs("option","disabled", [0, 1]);
    return false;
});

});

HTML/PHP

<?
  if (isset($_POST['wmdVal'])){
    $wmdVal = $_POST['wmdVal']; 
        echo ('<div id="wmd_result"><span id="resultval"><h2>PHP Echo result:</h2>'.$wmdVal.'</span></div>');
}
?>

<textarea id="wmd-input" name="wmd-input"></textarea>
<input type="hidden" id="myhidden" name="myhidden" value="<? $wmdVal ?>">
4

1 回答 1

3

记住您在哪个选项卡上 ( currentTab)。如果选择了一个选项卡，请检查第一个选项卡是否正在离开；如果是，则使用当前预览 html发送 ajax 请求；不需要成功处理程序，我们不需要任何客户端更改。如果显示下一个选项卡，请重置currentTab索引。在服务器端 (php)，您可以例如将数据保存到数据库中，但不需要任何结果。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
    <link type="text/css" href="css/postingtabs.css" rel="stylesheet">
    <link type="text/css" href="css/wmd.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    <script type="text/javascript" src="js/wmd.js"></script>
    <script type="text/javascript" src="js/showdown.js"></script>

    <script type="text/javascript">
        var currentTab = 0;

        $(function() {
            var $tabs = $('#tabs').tabs({
                disabled: [0, 1]
                , select: function() {
                    if (currentTab == 0) {
                        $.ajax({
                            type: "POST",
                            url: "test1.php",
                            data: { "wmdVal": $("#wmd-preview").html() }
                        });
                    }
                }
                , show: function(event, ui) {
                    currentTab = ui.index;
                }
            });

            $(".ui-tabs-panel").each(function(i) {
                var totalSize = $(".ui-tabs-panel").size() - 1;
                if (i != totalSize) {
                    next = i + 2;
                    $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
                }
                if (i != 0) {
                    prev = i;
                    $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
                }
            });

            $('.next-tab, .prev-tab').click(function() {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex)
                    .tabs('select', tabIndex)
                    .tabs("option","disabled", [0, 1]);
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="page-wrap">
        <div id="tabs">
            <ul>
                <li><a href="#tab-1">1</a></li>
                <li><a href="#tab-2">2</a></li>
            </ul>

            <div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
                <div id="wmd-editor" class="wmd-panel">
                    <div id="wmd-button-bar"></div>
                    <textarea id="wmd-input" name="wmd-input"></textarea>
                </div>
                <div id="wmd-preview" class="wmd-panel"></div>
            </div>

            <div id="tab-2" class="ui-tabs-panel ui-tabs-hide"></div>
        </div>
    </div>
</body>
</html>

=== 更新 ===

如果您真的想暂时查看结果进行测试，请再次将成功处理程序添加到 ajax 参数中：

success: function(result) {
    $('#wmd_result').html( $('#resultval', result).html()); 
}

并将结果div再次附加到第一个选项卡的末尾：

<div id="wmd_result"></div>
于 2012-08-02T06:59:22.567 回答