1

私は現在、jquery uiタブ（次/前のボタンでのみ機能します）とテキストエリアを操作しています。私は、テキスト領域に格納された値を自動送信し、phpがタブ＃2に結果をエコーするajax/js関数を開発しました。しかし、現在、フォームの自動送信から、ユーザーが[次へ]ボタンをクリックしたときに送信する方法を変更して、次へ進むようにしたいと考えています。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 に答える