タグ付けされた質問 「javascript」

ブートストラップモーダルに関していくつか質問がありますが、これとまったく同じではないので先に進みます。 私はそのようにonclickを呼び出すモーダルを持っています... $(".modal-link").click(function(event){ $("#modal-content").modal('show'); }); これは正常に動作しますが、モーダルを表示するときに最初の入力要素に焦点を当てたい...場合によっては、最初の入力要素のIDが#photo_nameです。 だから私は試した $(".modal-link").click(function(event){ $("#modal-content").modal('show'); $("input#photo_name").focus(); }); しかし、これは役に立たなかった。最後に、「show」イベントにバインドしてみましたが、それでも入力がフォーカスされません。最後にテストのためだけに、私は疑いがあるのでこれはjsの読み込み順序に関するものです。1秒遅延するかどうかを確認するためにsetTimeoutを入力し、フォーカスが機能するかどうかを確認します。しかし、この方法は明らかにくだらないです。setTimeoutを使用せずに以下と同じ効果を発揮する方法はありますか？ $("#modal-content").on('show', function(event){ window.setTimeout(function(){ $(event.currentTarget).find('input#photo_name').first().focus() }, 0500); });

182 javascript  twitter-bootstrap  modal-dialog 

Twitterのtypeahead.js 0.9.3を使用していますが、私の提案はまったくスタイル付けされていません。 私はこれを手に入れています： このようなものの代わりに：（例のページから取得） 先行入力を有効にするJavaScript： $('.search-typeahead').typeahead({ name: 'videos', remote: { url: '/api/v1/internal/videos/typeahead?text=%QUERY' } }); HTML input要素： <input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/> その他の注意事項： 私が取り組んでいるサイトにはjQuery 1.10.1があり、Twitterブートストラップを使用していません。私が作成しなかったため、干渉しているのではないかと心配しているCSSがたくさんありますが、プラグインは独自のスタイルを追加しているようです（付随する.cssファイルはありません）。 ？なぜスタイルが機能するのか混乱していますが、プラグインによって追加されたものが機能せず、透明な背景、境界線なしなどの候補が表示されます。

182 javascript  css  typeahead.js 

イベントハンドラのコールバックがの範囲に変更とインスタンスメソッドを使用してthisから、「マイインスタンス」と「ただのコールバックと呼ばれるものは何でもします」。だから私のコードはこのようになります function MyObject() { this.doSomething = function() { ... } var self = this $('#foobar').bind('click', function(){ self.doSomethng() // this.doSomething() would not work here }) } 機能しますが、それが最善の方法ですか？それは私には奇妙に見えます。

182 javascript  jquery  scope  closures 

for-eachループがJavaScriptの連想配列オブジェクトを繰り返し処理しないのはなぜですか？ // defining an array var array = []; // assigning values to corresponding keys array["Main"] = "Main page"; array["Guide"] = "Guide page"; array["Articles"] = "Articles page"; array["Forum"] = "Forum board"; // expected: loop over every item, // yet it logs only "last" assigned value - "Forum" for (var i …

182 javascript  arrays  foreach 

この質問がSOおよび他のいくつかのWebサイトでいくつかの異なる方法で質問されるのを見ましたが、それらのほとんどは具体的すぎるか、古くなっています。私は誰かが推測に迷うことなくここで決定的な答えを提供できることを望んでいます。 CSSまたはJavaScriptのいずれかを使用して、誰かがブラウザー内で印刷するときにデフォルトのプリンター設定を変更する方法はありますか？そしてもちろん、「ブラウザからの印刷物」とは、PDFや他のプラグインに依存するMIMEタイプではなく、何らかの形式のHTMLを意味します。 ご注意ください： 一部のブラウザーがこれを提供し、他のブラウザーが提供しない場合（または一部のブラウザーでその方法を知っているだけの場合）、ブラウザー固有のソリューションを歓迎します。 同様に、これを行うことに対して特定の制限がある主流のブラウザーを知っている場合は、それも役立ちますが、かなり最新のドキュメントをいただければ幸いです。（単に「XYZのセキュリティポリシーに反する」と言っても、XYZが過去3年間にこのポリシーに大幅な変更を加えた場合、あまり説得力がありません）。 最後に、「デフォルトの印刷設​​定を変更する」と言ったとき、私は自分のページだけを意味するわけではありません。特に、印刷の余白、ヘッダー、およびフッターについて言及しています。 CSSには、ページの向きとページのマージンを変更するオプションがあることをよく知っています。多くの闘争の1つはFirefoxです。ページの余白を1インチに設定すると、既に配置されている1/2インチに追加されます。 私はクライアントのサイトでPDFの使用を減らしたいと思っていますが、プレゼンテーションの侵害（および信頼性の欠如）が主な懸念事項です。

182 javascript  html  css  browser  printing 

DOMにAngularテンプレートがあります。コントローラがサービスから新しいデータを取得すると、$ scopeのモデルが更新され、テンプレートが再レンダリングされます。これまでのところすべて良い。 問題は、テンプレートが再レンダリングされてDOMにある（この場合はjQueryプラグイン）後、追加の作業を行う必要があることです。 AfterRenderのように、聞くべきイベントがあるようですが、そのようなものを見つけることができません。たぶん、指令は進むべき道かもしれませんが、それはあまりにも早く発砲するように見えました。 ここに私の問題を概説するjsFiddleがあります：Fiddle-AngularIssue ==更新== 役立つコメントに基づいて、それに応じてDOM操作を処理するディレクティブに切り替え、ディレクティブ内に$ watchモデルを実装しました。ただし、私はまだ同じ基本的な問題を抱えています。$ watchイベント内のコードは、テンプレートがコンパイルされてDOMに挿入される前に発生するため、jqueryプラグインは常に空のテーブルを評価しています。 興味深いことに、非同期呼び出しを削除すると、すべてが正常に機能するので、これは正しい方向への一歩です。 これらの変更を反映するために更新したFiddleは次のとおりです。http：//jsfiddle.net/uNREn/12/

182 javascript  jquery  dom  angularjs 

WebサイトのjQuery機能に問題があります。これは、window.scroll() ウィンドウを使用してスクロール位置が変更されたことを認識するために関数を使用し、変更時にいくつかの関数を呼び出してサーバーからデータをロードすることです。 問題は、.scroll()スクロール位置が少しでも変更され、下部にデータが読み込まれるとすぐに関数が呼び出されることです。しかし、私が達成したいのは、Facebookフィードの場合のように、スクロール/ページの位置が下部に達したときに新しいデータをロードすることです。 しかし、jQueryを使用してスクロール位置を検出する方法がわかりませんか？ function getData() { $.getJSON('Get/GetData?no=1', function (responseText) { //Load some data from the server }) }; $(window).scroll(function () { getData(); });

182 javascript  jquery  scroll 

Array reduce()から1つの値を取得するための素敵なArrayメソッドがあります。例： [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue; }); オブジェクトで同じことを達成する最良の方法は何ですか？私はこれをしたいと思います： { a: {value:1}, b: {value:2}, c: {value:3} }.reduce(function(previous, current, index, array){ return previous.value + current.value; }); ただし、Objectにはreduce()メソッドが実装されていないようです。

182 javascript  arrays  object  reduce 

JavaScriptに、オブジェクトにプロパティが存在しないかどうかを確認するための「not in」演算子はありますか？GoogleやStack Overflowの周りではこれについて何も見つかりませんでした。この種の機能が必要な場所で私が取り組んでいるコードの小さなスニペットは次のとおりです。 var tutorTimes = {}; $(checked).each(function(idx){ id = $(this).attr('class'); if(id in tutorTimes){} else{ //Rest of my logic will go here } }); ご覧のとおり、すべてをelseステートメントに入れています。その部分を使用するためだけにif– elseステートメントを設定するのは私には間違っているようですelse。

182 javascript  object  properties  operators 

私はこのようなものを持っています： $scope.traveler = [ { description: 'Senior', Amount: 50}, { description: 'Senior', Amount: 50}, { description: 'Adult', Amount: 75}, { description: 'Child', Amount: 35}, { description: 'Infant', Amount: 25 }, ]; この配列の合計量を取得するには、次のようにします。 $scope.totalAmount = function(){ var total = 0; for (var i = 0; i < $scope.traveler.length; i++) { total …

182 javascript  arrays  prototype-programming 

モーダルをビューポートの中央に配置したい（中央）私はいくつかのcssプロパティを追加しようとしました .modal { position: fixed; top:50%; left:50%; } 私はこの例を使用していますhttp://jsfiddle.net/rniemeyer/Wjjnd/ 私は試した $("#MyModal").modal('show').css( { 'margin-top': function () { return -($(this).height() / 2); }, 'margin-left': function () { return -($(this).width() / 2); } })

181 javascript  twitter-bootstrap  bootstrap-modal 

ブートストラップのポップオーバーを使用してウェブサイトを構築していますが、ポップオーバーをクリックではなくホバーに表示する方法を理解できません。 私がやりたいのは、誰かがリンクをクリックする代わりにリンクの上にカーソルを置いたときにポップオーバーを表示させ、離れるとポップオーバーが消えるようにすることです。ドキュメントには、data属性またはjqueryのいずれかを使用して可能であると記載されています。複数のポップオーバーがあるので、jqueryを使用するほうがはるかに便利です。

181 javascript  jquery  twitter-bootstrap 

私はこのモジュールのルートを持っています： var mainModule = angular.module('lpConnect', []). config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/home', {template:'views/home.html', controller:HomeCtrl}). when('/admin', {template:'views/admin.html', controller:AdminCtrl}). otherwise({redirectTo:'/connect'}); }]); ホームHTML： <div ng-include src="views.partial1"></div> partial1 HTML： <form ng-submit="addLine()"> <input type="text" ng-model="lineText" size="30" placeholder="Type your message here"> </form> HomeCtrl： function HomeCtrl($scope, $location, $window, $http, Common) { ... $scope.views = { partial1:"views/partial1.html" }; …

181 javascript  html  angularjs  angularjs-scope  angularjs-ng-include 

ReactでES6クラスを使用するのは初めてですが、以前は現在のオブジェクトにメソッドをバインドしていましたが（最初の例を参照）、ES6を使用すると、クラス関数を矢印でクラスインスタンスに永続的にバインドできますか？（コールバック関数として渡すときに便利です。）CoffeeScriptでできるように使用しようとすると、エラーが発生します。 class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } SomeClass.handleInputChangeたとえばsetTimeout、に渡した場合、スコープはwindowオブジェクトではなくクラスインスタンスにスコープされます。

181 javascript  reactjs  ecmascript-6  babeljs  ecmascript-next 

AngularJSのドキュメントといくつかのチュートリアルを読むのにかなりの時間を費やしてきましたが、ドキュメントがどれほど近づき難いかに驚いています。 私は、AngularJSを入手しようとしている他の人にも役立つかもしれない、簡単で答えられる質問があります。 AngularJSディレクティブとは何ですか？ ディレクティブのどこかにシンプルで正確な定義があるはずですが、AngularJSのWebサイトでは、これらの驚くほど役に立たない定義が提供されています。 ホームページ： ディレクティブは、AngularJSで利用できるユニークで強力な機能です。ディレクティブを使用すると、アプリケーションに固有の新しいHTML構文を作成できます。 では開発者ドキュメント： ディレクティブは、HTMLの新しいトリックを教える方法です。DOMコンパイル中に、ディレクティブはHTMLと照合されて実行されます。これにより、ディレクティブで動作を登録したり、DOMを変換したりできます。 そして、皮肉にも、聴衆がそれらが何であるかをすでに理解していると想定しているように見える指令についての一連の話があります。 だれでも、明確な参照のために、指令が説明するものの正確な定義を提供できますか？ それは何か（例としてjQueryの明確な定義を参照） 対処することを意図している実際的な問題と状況 それが具現化する設計パターン、またはAngularJSのMVC / MVWとされるミッションにどのように適合するか。

181 javascript  angularjs  angular-directive