問題タブ [progressive-enhancement]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - ajaxによってロードされた単純なHTML拡張モーダルダイアログを作成できません
アプリケーションにウィザードのようなページがいくつかあり、小さなステップ間を移動しながら状態を維持します。ナビゲーションは直線的ではなく、「プログレッシブ エンハンスメント」の方法で JavaScript を 1 行も使わずにすべてがうまく機能します。
私のアプリケーションでは、javascript が有効になっているユーザーに対して、ajax によってダイアログの各完全なステップをロードし、ステップのアクションを処理してダイアログを閉じることにより、一連のダイアログで上記の流れを変えたいと考えています。各ステップには、実行するための独自のスクリプトが埋め込まれています。ダイアログの読み込み時に、いくつかのステップ UI イベントをインターセプトします。
問題は、JQuery UI ダイアログがアクション ボタンを作成する必要があることです。ボタンの作成をプラグインに与えることはできず、ボタンのメタデータを要求し、フォーム、ボタン、データ入力、および作業に必要なすべての機能を備えた完全な機能ページが既にあります。 、完了しました。タイトルバー、タイトルバーでドラッグ、タイトルバーの閉じるボタン、クリーンアップへのイベントを閉じる、ダイアログのコンテンツに合わせてストレッチ、ロードなど、ウィンドウ固有のものを管理するダイアログにのみロードしたいオーバーレイ付きのモーダル モード。
ダイアログステップに埋め込まれたスクリプトによってダイアログ内のボタンクリックをインターセプトする方法が見つかりません.ダイアログ内のボタンはajaxによってデータを投稿する必要がありますが、通常のページ投稿でメインページを一緒に投稿します.
非常に古いプラグインをいくつか見つけましたが、私は JQuery UI が好きで、シンプルで見栄えがよく、iframe のないものを探しています。
ボクシー: http://onehackoranother.com/projects/jquery/boxy/tests.html
シンプルモーダル: http://www.ericmmartin.com/projects/simplemodal/
jqModal: http://dev.iceburg.net/jquery/jqModal/
@liho1eye : コメントを投稿中
編集：@ liho1eyeの助けを借りて、私はそれに到達しました：
javascript - Javascriptが無効になっている場合のAjaxフォールバック
問題：
i）JSF2アプリケーションで、タブコントロールを使用してページを作成したいのですが、ユーザーがタブをクリックすると、以下のパネルのコンテンツがサーバーのxhtmlファイルからajax呼び出しを介して読み込まれます。
ii）これでグレースフルデグラデーション（Javascriptが無効になっている場合）をサポートして、タブをクリックするとHTTPリクエストが発生し、新しいページが読み込まれるようにします...またはその逆で、プログレッシブエンハンスメントを使用します。
部分的な解決策：
i）BalusCがjsf 2 outputLinkをajaxする方法に
投稿したコード例でこれを達成できると思います：-
質問
これを拡張して問題を解決するにはどうすればよいですか（ii）または、他のまったく異なる方法はありますか？たぶん私はnoscriptでこれを達成できると思いますが、方法がわかりません！
編集：考えられる解決策-まだ検証していません：
上記のコードは、ajaxが無効になっている場合でも機能するはずです。http://www.laliluna.de/articles/posts/jsf-2-evaluation-test.html :)
エレガントによると、HTTPを介して機能するはずです。やってみます。
javascript - KnockoutJSによるプログレッシブエンハンスメント
次のようなデータがあるとしましょう
これは、次のようにノックアウトテンプレートにバインドされたビューモデルとして簡単に表すことができます。
問題は、プログレッシブエンハンスメントを使用したときに同じ結果をどのように達成できるかということです。つまり、最初にサーバー側でテンプレートをレンダリングしてから、ノックアウトテンプレートとビューモデルをそのレンダリングにバインドします。
単純なサーバー側のテンプレートは次のようになります。
私はいくつかの異なる可能性を探求しました：
1つは、1つのノックアウトテンプレートと1つのサーバー側テンプレートを作成し、サーバー側テンプレートのDOMを解析することによって動的にノックアウトビューモデルを生成することです。このように、JavaScriptが有効になっている場合はノックアウトテンプレートのみが表示され、JavaScriptが無効になっている場合はサーバー側のテンプレートのみが表示されます。それらは、同じように見えるようにスタイルを設定できます。
別のアプローチは、ファセット配列内の各アイテムのバインディングを、そのファセットの既存のDOM要素に個別に適用することです。ただし、これはまだ1レベルの深さであり、ネストされた要素では機能しません。
これらのアプローチはどちらもかなりクリーンではないようです。別の解決策は、レンダリング全体を処理し、可能であれば既存の要素を再利用するカスタムバインディングを作成することです。
他のアイデアはありますか？
model-view-controller - YUI 3.5 App Framework サーバー ルーティング
私は現在、かなり大きなアプリケーションで YUI 3.5 pr1 (およびリリースされた最終バージョン) の実装を検討しています。
バックエンドは PHP と MySQL で構築されており、フロント コントローラー パターンを持つ MVC 構造を使用しています。それ自体で、サーバーは URL (http://mysite.com/module/submodule/option) などを処理し、完全にレンダリングされたページを返すことができます。
アプリケーション全体で YUI に App Framework を実装して、javascript 対応のブラウザーが、履歴管理が可能な 1 ページのアプリのようなものを効果的に持つようにしたいと考えています。
現在、ステージング サイトでアプリ フレームワークのドキュメントを見ています。残念ながら、ドキュメントは完全ではありません (特に、サーバーとのルーティング調整と、徐々に強化されたアプリに関するセクション)。
いずれにせよ、ユーザーがHTML4 ブラウザー (すべてのバージョンの IE) でhttp://mysite.com/modules/submodule/optionにアクセスし、JavaScript が有効になっている場合、ユーザーはhttp://mysiteにリダイレクトされる必要があります。 .com/#/modules/submodule/option .
これは App Framework に組み込まれているものですか? ページ全体をレンダリングしてハッシュタグ付き URL にリダイレクトし、再度レンダリングする必要のないソリューションを利用したいと考えています。
最後に、App Framework の紹介ビデオを見たところ、Handlebars テンプレート エンジンを使用していると書かれていました。サーバー側のテンプレート エンジンとしてTwigを使用しています。アプリ フレームワークで別のテンプレート エンジンを使用することは可能ですか? 特にtwig js エンジン.
jquery - jquery と asp.net を使用したプログレッシブ エンハンスメント
javascript なしで正常に動作する Web サイトを構築しました (リンク ボタンの使用も避けました)。今、私は jquery と json を使用して javascript を使用して、よりリッチなインタラクティブな Web サイトを作成したいと考えています。javascriptが有効になっているときにjqueryとjson（サーバーにデータを送信するための部分的なポストバック）で動作する送信ボタンの例を誰かに見せてもらえますか。JavaScript が無効になっている場合は、通常のサーバー側の投稿を行う必要があります。
jquery - HTMLフォームを徐々に強化し、jQuery UIの日付ピッカーが機能しない
私は HTML5 フォームを徐々に強化することに慣れていません。現在、クロスブラウザー フォームを作成するために jQuery UI と HTML5 の新しい入力タイプを試しています。スクリプトの条件付き読み込みにModernizrとYepnopeを使用し、 CSS-tricks.comで提供されているチュートリアルに従っています。しかし、私はObject [object Object] has no method 'datepicker'エラーが発生しています。
Modernizr.load()の代わりに which を使用できることがわかりましたがyepnope()、それは機能せず、Object #<Object> has no method 'load'エラーが発生したため、 に戻りましたyepnope()。以下は<Head>、ウェブページのセクションごとです。
との<body>形をしています<input type='date' name='dtTest'/>
少しグーグルした後、エラーの原因がjQueryコアの2回のロードであることがわかりました。これもフォローしましたが、問題を修正できません。
ありがとう。
注: Chrome 17 と Opera 11.61 でページをテストしています。
firefox - FirefoxとChromeのボタン幅の違い
FF / Chrome CSSの質問がたくさんあることは知っていますが、これを正確に見つけることができないようです。
これが問題を示すJSフィドルです：http：//jsfiddle.net/ajkochanowicz/G5rdD/1/
（長いCSSについてお詫びします、これはサイトからコピーされました。）
基本的に、FirefoxとChromeは、ボタンの最も内側の幅に2つの異なる値、4と6を与えています。両方とも4以下にしたいと思います。これを引き起こしているのは何ですか？
javascript - MVC3「控えめな JavaScript」モデルの検証
私は次のように ajax 呼び出しを行っていました。
これまでのところ、私のデザインは徐々に強化されています。
そして今、実際のリクエストを行う前に、クライアント側でもモデルの検証を実装したいと考えています。
最新のスクリプトjquery.validation.jsとともに、プラグインをプロジェクトに含めました。jquery.validation.unobtrusive.js
次に、コードを次のように変更しました。
これは、検証が最初に通過しない限りリクエストを行わないことを除いて、まったく同じであると私は考えました。
検証の側面は、モデルからビューのDOMに設定されたデータ属性mvcを使用して、完全に期待どおりに完全に機能します。
これが失敗し、その理由がわからない部分は、私が ajax ではないことに戻ったことです。ページがリロードされるだけで、submitHandler決して起動しません（このリンクが示唆するものとは反対です）
submitHandler( onSuccess、など)の他の一般的な名前をいくつか試しましたsuccessが、どれも機能していないようです。
jquery - ファンシーボックスと優雅な劣化？
インライン コンテンツを使用してライトボックス経由でログイン フォームを入力しようとしていますが、ユーザーが JavaScript を持っていない場合は、これを適切に低下させたいと考えています。fancybox のドキュメントによると、私のアンカー タグにはhref、次のように表示するコンテンツの ID が必要です。
誰かが JavaScript をオフにしてアクセスするまでは、これで問題ありません。そして、それらは存在しない何かにリンクされます。私の考えでは、より良い解決策は次のようなマークアップです。
このようにして、何かが故障した場合、ユーザーは外部のログオン ページに誘導されます。ファンシーボックスまたは他のライトボックスソリューションでこれを達成する方法はありますか?
css - :not(:hover) と :hover は、アクセス可能な要素を非表示にする安全な方法ですか?
特定のページ要素をホバーなどでのみ表示できるようにすると便利な場合があります。例として、stackoverflow の「フィードバック - この投稿は役に立ちましたか?」ウィジェットがあります。これらの要素はインターフェースにとって重要である可能性があるため、このようなホバー表示機能は漸進的な拡張である必要があります。つまり、目立たず、適切に劣化する必要があります。
通常の方法では、JavaScript を使用しているように見えます。たとえば、要素を非表示にして、親要素がホバーされたときにそれらを使用できるようにします。その選択の理由は、:hover特にレガシー ブラウザーではすべての要素がサポートされていないため、最初から css2 までの要素を非表示にすることを禁止している可能性があります。(js/jQuery の例については、hover で要素を表示する jquery を参照)
古いブラウザーに影響を与えずに、:not(:hover)とを使用して、純粋な css3 で安全に*このような機能を実現できるかどうか疑問に思います。:hover私が見る限り、要件は、サポートするすべてのブラウザーがすべての要素を:not()サポートする必要があるということです。:hover以下の情報源によると、そのように思われる
実装例: http://jsfiddle.net/LGQMJ/
どう思いますか？異議またはその他の情報源はありますか?
*念のために言うと、ブラウザーは常に最後の手段としてすべての要素を表示する必要があるということです。