0

JCrop をブートストラップのモーダルに統合しようとしています。この詳細にもかかわらず、問題はイメージが「動的に」ダウンロードされているという事実にあるようです。つまり：

1) フォームは AJAX によって送信されます。

$('#postFileForm').ajaxForm({ success: afterPost });

2) 「afterPost」関数が正しく呼び出されています。この関数は、サーバーから返されたテキストをパラメーターとして持っています。

function afterPost(responseText, statusText, xhr, $form) {
    $(".downloadedContent").html(responseText);
    $("#cropbox").Jcrop();
    ...
}

3) サーバーから次のテキストが返されます。

<img src='xxx' alt='yyy' id='cropbox' />

html jQuery メソッドを介して挿入すると、画像が DOM に追加され、それを操作できると思います。画像を挿入した直後に Chrome でデバッグすると、通常は jQuery で取得できます。

$("#cropbox").attr('src') //returns the source, f.e

しかし、トリミングは機能しません。style 属性が次のようになっているため、何かが発生しているようです。

style='display:none; visibility:hidden; width:...'

cssに関連するものかもしれないと思いました（Bootstrapで使用しているという事実によると）が、画像が動的にダウンロードされる部分を削除して、彼の場所に置くだけですべてが正しく機能します。

どんな助けでも大歓迎です！ありがとう！

4

1 に答える 1

0

すみません。

時間を無駄にしてしまったことをお詫び申し上げます:)。JCrop は、jQuery セレクターが返す最初の使用可能な要素にコントロールをバインドします。

この場合、2 つの場所に同じクラスがあり、セレクターでそれを指していなかったことが原因です。

$(".downloadedContent").html(responseText) は $("#someDiv .downloadedContent) のようなものでなければなりません。

JCrop は非表示の div にアタッチしていましたが、それがすべての話でした。

ご協力いただきありがとうございます。

于 2013-06-04T14:25:50.133 に答える