0

私はjQueryを使用して単純なモーダルを構築しました。これは、URLを取得し、ajaxメソッドを使用してロードし、モーダルボックスのデザインで画面に表示するdivに応答htmlを挿入します。簡単なもの!

ただし、これらのページは実際のURLdomain.com/posts/addであり、アプリ内のリンクをクリックするだけでなく、ブラウザから直接アクセスできます。ユーザーがアドレスバーにURLを入力した場合でも、常にモーダルで表示されることをお勧めします。現在、リクエストがAjaxでない場合は、ホームページにリダイレクトするか、404を表示して、これが発生しないようにします。

Chromeストアがこれを行うのと同じ方法でユーザーがHTTP経由で直接ページにアクセスする場合は、これらのページをモーダルでロードすることをお勧めします(例:https ://chrome.google.com/webstore/detail/pjkljhegncpnkpknbcohdijeoejaedia)

どうすればこれを行うことができますか?本当に厄介なJavaScriptを実行する必要はありませんか?任意のアイデアや提案をいただければ幸いです。これは、ユーザーが前後のボタンを使用できるようにし、モーダルが表示および非表示になるという点で、適切なアプリのように機能する必要があることに注意してください

私が使用するモーダルコードについては...

それは本当にシンプルで、これはそれがどのように見えるかの例です(私のものはこれよりも堅牢であることに注意してください、純粋に単純さの例のためのコード)

$('.ajax-link').click(function(e){

e.preventDefault;

$.ajax({

url: $(this).attr('href'),
success: function(response) {
$('<div id="modal">' + response + '</div>').appendTo('body');
}
});

});

4

3 に答える 3

0

まず、代わりに.get()を使用します。

次に、別のドメインの完全な URL を使用している場合、上記のリンクに記載されているセキュリティの問題が原因である可能性が最も高いです。

ブラウザーのセキュリティ制限により、ほとんどの "Ajax" リクエストは同一オリジン ポリシーの対象となります。要求は、別のドメイン、サブドメイン、またはプロトコルからデータを正常に取得できません。

あなたが使用していない限りJSONP、私はあなたがそうであるとは思わない.

于 2012-06-27T00:04:03.697 に答える
0

Okies はこれを行う方法を考え出しました。

これを適切に行うには MVC フレームワークが必要です IMO 静的な性質のために昔ながらのページでどのように可能かわかりませんが、基本的には、ビューは他のビューから継承する必要があるという考えです。たとえば:

人のリストと人を追加するためのフォームの 2 つのビューがあります。ただし、これらはどちらもリストやモーダルなどの別のビューから継承するため、ユーザーが HTTP を使用して人物の追加を要求すると、フォームが読み込まれますが、継承されたリストが使用されるため、目的の効果が得られます。したがって、事実上、ロジックはすべてコントローラーで行われます。

継承に関するすばらしい記事: http://mark-story.com/posts/view/view-inheritance-in-cakephpは、私が使用する別のフレームワークである CakePHP です。

うまくいけば、これを試してみたいと思っている他の人にとっては理にかなっていますが、試してみただけで、おやつのように機能します!

更新:これについてもう少し考えた後、継承は必要以上に複雑であり、モーダルをDOMの下部に表示するにはモーダルを完全に複製しないと判断しました...多くの複雑なビューの構造!

私の代替計画は、コントローラーで XMLHttp チェックを実行し、そうでない場合はフォームの代わりにリスト ビューにロードすることですが、クエリ文字列または JSON のようなものを使用して、AJAX を使用して URL から目的のビューにロードします。これは、取得する必要がある同じページに対する二重の要求のように聞こえるかもしれませんが、機能します。

唯一の問題は、ビューと JSON の両方を送信して、他のビューをモーダルにロードするように指示できないことです...それを行う方法はありますか? クエリ文字列を渡す以外に?


更新: 2

考えれば考えるほど、継承を行う方が良いように思えます。私が知る限り、JSONを使用して継承を行うことは実際には不可能であるためです...

于 2012-06-27T00:45:10.627 に答える
0

ページの読み込み方法を示すためにハッシュタグまたは URL 変数を使用することを検討しましたか? Google Chrome で見たところ、すべてのモーダル ウィンドウは詳細サブディレクトリにあり、他の領域はカテゴリまたは検索です。そのウィンドウの位置は、おそらくページがどのように表示されるかを示しています。

于 2012-06-27T00:46:24.623 に答える