0

特定の要素にドラッグ アンド ドロップ機能を追加する必要があるページがあります。ドロップ イベントが発生すると、php 関数への ajax 呼び出しが行われ、div の内容が更新されます。ドラッグ アンド ドロップ用に jQueryUI を使用して jQuery を使用し、PHP フレームワークとして CakePHP を使用しています (これが関連するかどうかはわかりません)。

Firefox、Safari、さらには IE でもすべて正常に動作していますが、Opera または Chrome では、div の内容は更新されません (ただし、PHP 関数からのアクションは実行されます)。

だから、ここにコードがあります：

jQuery('#lists div').
    filter(function() {return this.id.match(/item[\d]+_[\d]+/);}).
    each(function() { jQuery(this).draggable( {axis: 'y'}); });

jQuery('#lists div').
    filter(function() {
        return this.id.match(/list[\d]+/);}).
               each(function() { 
                   jQuery(this).droppable({
                      drop: function(event, ui) {
                            dropID = jQuery(event.target).attr('id');
                            dragID = jQuery(ui.draggable).attr('id');

                            itemID = dragID.substr(dragID.lastIndexOf('_') + 1);
                            oldListID = dragID.substr(4).replace(/_[\d]+/g, '');
                            newListID = drop.substr(4);

                            jQuery.ajax({
                                url:  "/lists/itemToList/"+itemID+"/"+oldListID+
                                      "/"+newListID,
                                type: "POST",
                                success: function (data) {
                                     jQuery('#lists').html(data);}
                            });
                         }
                 });
    });

基本的に成功関数は実行されませんが、(エラーイベントで) errorThrown を見ようとすると「未定義」です

4

4 に答える 4

1

次のようなことを試してください：

jQuery.ajax({
   url:  "/lists/itemToList/"+itemID+"/"+oldListID+
      "/"+newListID,
   type: "POST",
   success: function (data) {
      jQuery('#lists').html(data);
   }
   error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert(XMLHttpRequest.status);
      alert(XMLHttpRequest.responseText);
   }
});

リクエストに対してどのような http レスポンスを取得しているかが表示されます。私はしばらく前に同じ問題を抱えていました。私のスクリプトは Firefox と Chrome ではうまく機能しましたが、Opera と IE では何もしませんでした。私はそれをチェックしましたが、問題はphpバックエンドが404を返していることでした（ChromeとFFでどのように機能したかはまだわかりません）。

于 2009-11-26T20:39:46.520 に答える
1

質問を投稿してから長い時間が経っていることは知っていますが、他の誰かがそれを必要とする場合に備えて、解決策であることがわかったのは次のとおりです。問題はjavascriptではなくCakePHPでした:追加されたhtml success には ajax フォーム ($ajax->form() を使用してレンダリング) が含まれていました。$ajax->form() は、コントローラーからの $data 変数を配列にする必要がありましたが、何らかの理由でそうではなく、これによりフォームのレンダリングが壊れ、Opera と Chrome はこれを好みませんでした。したがって、解決策は単に追加することでした

$this->data = array();

コントローラーの itemToList() 関数に。

于 2011-01-25T16:04:44.907 に答える
0

クロスブラウザの問題を引き起こすコードには何も表示されません。私の感じでは、問題はコードにまったくあるのではなく、ChromeやOperaでのdivやそのコンテンツのレンダリングにあります（つまり、CSSの問題、またはinnerHTMLdivのが更新される行に沿った何か） 、ただし、スタイリングまたは配置が原因で、探していた視覚的な結果が得られません）。

Dragonflyまたはその他の開発者ツールを使用して、リクエストが成功した後、ターゲット要素のコンテンツが実際に変更されていないことを確認しましたか？それらの線に沿って、問題のあるブラウザでコードの実行をステップスルーしてみましたか？errorオプションにハンドラーを追加JQuery.ajaxして、リクエスト自体に問題があるかどうかを確認することもできますが、それが問題の原因であるとは思いません。

編集：コードブロックの下の最後のビットは表示されませんでした。これで、成功ハンドラーが実行されていないことを確認しました。リクエストのエラーハンドラーを実装しようとして、未定義の結果が得られたとのことですが、コードには表示されません。エラーハンドラのコードを投稿して、エラーの何が未定義であるかを説明していただけますか？

于 2009-11-06T19:20:38.473 に答える
0

彼は、alert(errorThrown) が「未定義」を示していることを意味していると思います。

于 2009-11-26T20:36:32.203 に答える