6

現在、ページを更新せずにjquery uiタブとajax / post submitを使用しています。いくつかのガイダンスにより#wmd-preview、次のボタンをクリックしたときに div を送信することができました。問題は、さまざまなタブで次のボタンがクリックされたときに、同時に送信したい他のフィールドもあるということです。

次のボタンをクリックしたときに、さまざまなタブのさまざまな入力フィールドの入力値を送信するにはどうすればよいですか? 例

（一部のテストでは、現在、キーアップとタイマーのセットアップで他の入力フィールドを送信しています）

JS- NEXT/Previous ボタンを submit/ajax と統合

<script>
        var currentTab = 0;
          $(function() {
            var $tabs = $('#tabs').tabs({
                disabled: [0, 1, 2]
                , select: function() {
                    if (currentTab == 0) {
                        $.ajax({
                        type: "POST",
                        url: "test1.php",
                        data: { "wmdVal": $("#wmd-preview").html() },
            success: function(result) {
                $('#wmd_result').html( $('#resultval', result).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>

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
  <label for="title">Title</label>
  <input type="text"  id="title" name="title" size="60" autocomplete="off" value="<? $title ?>"/>
           <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 id="wmd_result"></div>
           <div id="title_input"style="padding:20px;"></div>
</div>

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
    <label for="name">Name</label>
    <input type="text"  id="name" name="name" size="60" autocomplete="off" value="<? $name ?>"/>
    <div id="name_input"></div>         
</div>

PHP

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

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

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

3 に答える 3

6

私の知る限り、フィールドがタブにあるか非表示になっているかは関係ありません。IDがあれば、取得できます。たとえば、を使用する場合$('#bla').val()、IDが「bla」の要素が見つかるまでページ全体を検索します。

したがって、次のように、に追加するだけdata optionです。

{key1: 'value1', key2: 'value2'}

試す：

data: { "wmdVal": $("#wmd-preview").html() , "name": $("#name").val() , "title": $("#title").val() },

動作するはずです（テストされていません）

アップデート：

あなたのサイトのソースコードを見た後、私は問題を見つけたと思います。次のボタンをクリックした結果から、$ _ POST ['title']変数（isset）があることがわかりますが、それは空です。したがって、ajaxリクエストに問題があります。この行は次のとおりです。

"タイトル"：$（ "＃title"）。html（）

html()あなたはそののを探していませんinput field。あなたが探してval()いる。

上記の行を次のように変更します。

"タイトル"：$（ "＃title"）。val（）

今すぐ動作するはずですが、そうでない場合は更新してください

于 2012-08-03T08:02:51.053 に答える
2

タブを変更するたびに AJAX POST を実行する場合。この条件を削除する必要があります: if(currentTab == 0){。これは、最初のタブが選択されたときにコードを強制的に実行するためです。

それに加えて、必要なデータを投稿できます。これらをajax の「data:」プロパティに渡すだけです。また、それらはグローバルで一意であるため、ID でそれらのいずれかを呼び出すことができます。そのように：

data:{ 
        param1: $("#input1").val(),
        param2: $("#input2").val(),
        paramHtml1: $("#elementHtml1").html()
    }
于 2012-08-10T02:55:56.683 に答える
0 
"title": $("#title").html() should be  
"title": $("#title").val() -> you want the value of the field in question. This will send the correct value to the server.

'Title Echo result:' 領域に何も出力されない理由を尋ねているようです。

良い次のステップは次のようになると思います。

success: function(result) {
    // fill title_input with the result of the ajax call
    $('#title_input').html(result);
}

これにより、ある程度の出力が得られますが、おそらく必要な出力ではないと思います。「タイトルエコーエリア」に必要なコンテンツで応答する場合があります

于 2012-08-10T16:35:50.050 に答える