-1

したがって、基本的に私が達成しようとしていること: index.php に製品コードを入力して、製品情報とその画像を検索します (そのクエリは open_first.php で実行され、ajax ポスト リクエストを介して呼び出されます)。それは完璧に機能します..

open_first.php が読み込まれると、選択できる画像がいくつか表示されます (画像をクリックすると、画像 ID を含む関連するチェックボックスがオンになります)。これもうまくいきます。

しかし、「productCodeCopy」フィールドにコードを入力して「confirmCodeCopy」ボタンをクリックすると、ページ全体がリロードされます。つまり、index.php を意味し、入力したものはすべて失われ、開始点に戻ります。また。なぜそうするのかわかりません。2 番目の ajax リクエストが動的に作成されたページ (open_first.php) から行われるという事実と関係があると思いますか?? 私も投稿する必要があるものを見逃していますか?? または、何が問題なのか、何時間もこれを修正しようとしたので、これは本当にイライラしています。

注: Jquery は index.php、open_first.php、open_second.php にロードされますが、コードを単純にするために無視しています。

ファイル: index.php (「開始点」)

<!-- head -->
<script type="text/javascript">
$(document).ready(function() {
$("#confirmCode").on('click', function(){
    var productCode = $("#productCode").val();
    $.ajax({
        url: 'open_first.php',
        type: "POST",
        data: ({code: productCode}),
        success: function(data){
            $("#found").html(data);
        },
        error: _alertError
    });
    function _alertError() {
        alert('error on request');
    }
    });
});
</script>

<!-- body -->
<input type="text" class="textfields" id="productCode" name="productCode" value="YT-6212">
<input type="button" class="admin-buttons green" name="confirmCode" id="confirmCode" value="Search">
<div id="found"></div>

ファイル open_first.php

<script type="text/javascript">
    $(function() {
        $("#foundImage").on('click', function(){
            $('#foundImage').toggleClass("foundImage-selected foundImage");
            var myID = $('#foundImage').data('image-id');
            var checkBox = $('input[id=selectedImages-'+myID+']');
            checkBox.prop("checked", !checkBox.prop("checked"));
        });

        $("#confirmCodeCopy").on('click', function(){
            var checkedItems = $('input:checkbox[name="selectedImages[]"]:checked');                
            // this code here reloads the whole page / view (as in "index.php")
            $.ajax({
                url: 'open_second.php',
                type: "POST",
                data: ({checked: checkedItems, copyTo: productCodeCopy, code: "<?php echo $_POST['code']; ?>"}),
                success: function(data){
                    $("#copyToProducts").append(data);
                },
                error: _alertError
            });
            /*
            // the code below runs just fine when I hit the button "confirmCodeCopy"
            alert('Fuu');
            return false;
            */
        });

        function _alertError() {
            alert('error');
        }
    });
</script>
<!--BODY-->
<!-- these are dynamically generated from php, just to simplify we have checkbox that contains value "1" to be posted in ajax -->
<div class="foundImage" id="foundImage" data-image-id="1"><img src="image.jpg"><input type="checkbox" id="selectedImages-1" name="selectedImages[]" value="1" style="display: none;"></div>
<label for="productCodeCopy">Products code</label>
<input type="text" class="textfields" id="productCodeCopy" name="productCodeCopy">
<br /><br />
<label for="confirmCodeCopy">&nbsp;</label>
<input type="button" class="admin-buttons green" name="confirmCodeCopy" id="confirmCodeCopy" value="Search">
<div id="copyToProducts"></div>

open_second.php は、現時点では POST 変数のみを出力するだけなので、まだ特別なことは何もありません。

解決した

わかりました、私はそれを解決しました。ダムダムの助けを借りて。

次の行を削除しました。

$('input:checkbox[name="selectedImages[]"]:checked');

そしてこれを追加しました：

var checkedItems = new Array();
var productToCopy = $('#productCodeCopy').val();
$("input:checkbox[name=selectedImages[]]:checked").each(function() {
    checkedItems.push($(this).val());
});

フォーム要素が存在しなかったため、.val() 関数を介して「手動で取得」しない限り、フィールド値を取得できませんでした.. 愚かな私..

これがどれだけ影響したかはわかりませんが、次の変更も行いました。

data: ({checked: checkedItems, copyTo: productCodeCopy"})

に

data: {"checked": checkedItems, "copyTo": productToCopy}

だから今はうまくいっています:)クール！

4

2 に答える 2

1

イベントハンダーをボタンまたはリンクに適用してajaxを実行する場合、ブラウザーがその要素をクリックした場合のデフォルトの処理を常に防止します。

2つの方法があります。いずれかを使用するか、ハンドラーからpreventDefault()戻るfalse

$("#confirmCodeCopy").on('click', function(event){
  /* method one*/
  event.preventDefault();
  /* handler code here*/

  /* method 2*/
  return false;

})

フォームに送信ハンドラーを追加して、フォームをアクションURLにリダイレクトするのではなく、フォームデータを使用してajaxを実行する場合も同様です。

于 2012-10-28T11:30:04.087 に答える
0

コードが未定義$('input:checkbox[name="selectedImages[]"]:checked');を返しているため、ajax呼び出しのjsonデータが無効になっています。そこでセレクターを確認してください。

于 2012-10-28T11:55:14.413 に答える