Category "jQuery"を表示しています。
2018.1.20 土
Laravl5ではPOSTのときにCSRFトークンを必ず使うというのがコツというだけでその他は普通のAjaxと同じです。 GETする DEMO GETする際にはCSRFトークンは必要ないので、そのまま返り値を取得するという感じになります。 /* routes */ Route::get('/ajax/get_json', function(){ return view('develop.ajax_get_json'); }); Route::get('/api/ajax/get_json', 'Test\TestController@ajax_get_json'); コントローラからjsonを返してあげるようにすればOKです。いろいろ細かいことやりたいときはresponce()で返してあげれ...
2018.1.19 金
非同期とか何とかちょっと面倒くさいですが、要はブラウザー自体のHTTPリクエストとHTTPレスポンスをJS内部で完結できるってのがAjaxです。ブラウザーのリクエスト&レスポンスとは別で実行されるわけですからGUI的にはスムーズな動きとかが可能ですなんですが、内部はちゃんとリクエストとレスポンスがあるので、適当にやったらものすごいサーバー負荷になったりしますよ。 JavascriptをUIにしてWEBサーバーにアクセスするというだけでAjaxがどうしたこうしたという話ではなく「JavascriptをUIにしてWEBサーバーにアクセスする」ことができるようになった(そういう仕組を頭のよい人が考えてくれた)というものです。 ここではjQueryのAjaxを使っての説明です。 GETでリクエストし...
2018.1.17 水
基本的にはこのコピペでいけます。 $("html,body").animate({scrollTop:$('移動したいところのID').offset().top}); とはいえ、何かしらのトリガーが大抵の場合あるので、 $(function(){ $('#search').on('click', function(){ $("html,body").animate({scrollTop:$('#here').offset().top}); }); }); #searchがクリックされると#hereまで移動します。
2017.7.11 火
PHPで絵文字対処 Formに絵文字入力されると困ってしまう場合4バイト文字を削除でいったん対処。その他いい方法あるんでしょうか。 $text = "EMOJI"; // 😾とかの絵文字 $text = preg_replace('/[\xF0-\xF7][\x80-\xBF][\x80-\xBF][\x80-\xBF]/', '', $text); 猫ちゃん絵文字はWordpressの場合は「😾」はエディタ上では 😾 自動的に変換されますね。 内部的にどうやっているのか全然調べていませんが、Disable Emojisという絵文字を無効化するプラグインの中身を調べると本体調べるより早そう。 Javascriptで絵文字対処 P...
2017.7.4 火
全バージョのCDNはここ https://code.jquery.com/jquery/
2017.6.4 日
フロントの実装を殆どしていない数年間でだいぶajaxの実装方法が変わってきたのでびっくりです。新しめのjQueryではだいぶ書き方が変わっていました。 $.ajaxの基本形 成功時と失敗時のリターンはdone()とfail()で取得するのがいいみたいです。jQuery 1.8以上の書き方になるようです。 ajax.phpではPOSTをうける何らかの処理をしておくわけですがここでは割愛。 $.ajax({ type: 'POST', url: "/ajax.php", }).done(function(data) { alert('success!!'); }).fail(function(data) { alert('error!!!'); }); 実用的なところまで書くとこんな感じか。JS...
2017.4.9 日
Functionとかユーザー定義関数とかサブルーチンとかいろいろな言い方がありますが、あるまとまったルーチンを整理して書いておいて使うときにその都度呼び出すことができるのは大変有意義なことです。というのも無駄な処理や繰り返し処理などをできるだけ避けるという意味では、プログラムにはもう欠かすことのできない機構なのです。 jQueryではJavascriptと同様の定義方法でFunctionが利用できます。というか全く同じです。 Functionを使う 引数がない場合 特に引数が必要ない場合は以下のように書けます。 [jQuery code] <script type="text/javascript"> $(function(){ changetext(); //Functionを...
2017.4.9 日
どのプログラム言語もそうですが、現在変数に入っている値を出力してみてなんぼという世界観がありまして、開発中においてもデバックにおいても欠かせないものがあります。jQueryで出力するにはどうするのかというと、Attributes/APIのhtml()やtext()を利用します。Javascriptの開発中ではdocument.write()を使用したりalert()使用したりする方もおられると思いますが、jQueryはDOM要素に直接アクセスできるので非常に楽ちんです。console.log()も使えますが。 htmlタグを表示する 文字列を表示する 既存の文字列の前に表示する 既存の文字列の後に表示する 既存のタグの前に表示する 既存のタグの後ろに表示する スカラー変数を出力する 配列を出...
2017.3.29 水
あんまりフロントエンド的な仕事しないのですが、時々しないといけないときがあってそういうときに若い子からおしえてもらった備忘録。 すべてを読み込んでから処理。 いろんなパラメータがうまいこと取得できないとか取得できていてもおかしな値だったときには、window.onloadをかませます。 window.onload = function() { doSomething(); // DOM 構築後に実行したい関数の呼び出し }; ブロックのheight()が取得できなくてかなり悶絶しましたが、すべてが読み込まれる前にJSが実行されてしまうと対象のオブジェクトが取得できないということになるそうです。 そういう意味でJavascriptの読み込み自体を付近に書くというのが近年主流になってきた気がしま...
2017.3.23 木
これいいですよ。 – Remodal – GitHub Remodalの入手 Githubからもってくるのが一番手っ取り早いかと思います。GitHub ダウンロードしたらREADMEなどいろいろなファイルが入っていますがミニマムで使うのは以下の2ファイルになります。 Remodal-master/src/remodal.css Remodal-master/dist/remodal.min.js (または、Remodal-master/src/remodal.js) 自分でデザインとかこだわらない人は、以下のテーマも読み込んでしまいましょう。 Remodal-master/src/remodal-default-theme.css 設定 まずはファイルを適当なところで...
2017.2.27 月
scrollTop()で取得してscroll()でリアルタイムで監視して取得 というのが基本になるので、以下のようになります。 $(function(){ $(window).scroll(function(){ var scr_count = $(document).scrollTop(); }); });
2016.11.15 火
しばらく使っていなかったらAjaxが新しくなっておりました。大した違いではないのですが、古い方のsuccess:~error:~という書き方が後方互換でかろうじて動いている感じなので新しい方使った方がいいです。基本的な書き方は、 $.ajax({ url: "xxxx.php", }).done(function(data){ alert('success!!'); }).fail(function(data){ alert('error!!!'); }); という構文になっていて、xxx.phpからの標準出力をAjaxの方で受け取るというようなものになっています。パラメータや値の受け渡しは以前とそんなに変わっていないので直感的にはそのまま使っていい感じになっているようです。jQueyのaj...
2016.9.7 水
<img src="[IMAGE_FILE_NAME]_off" class="CLASS" > $(function(){ if(0<$(".CLASS").size()){ $(".CLASS").hover(function(){ $(this).attr("src",$(this).attr('src').replace(/_off/,'_on')); },function(){ $(this).attr("src",$(this).attr('src').replace(/_on/,'_off')); }); } });
2016.5.11 水
YouTubeのAPIを使って自力でいろいろやるとブラウザー依存のバグが多く出まして、原因が釈然としないのですが、ライブラリー使った方が安定感ありそうですね。 http://2inc.org/blog/2012/06/09/1595/ http://www.blinderhidden.com/demo/js/20130902-jquery-youtubegallery/
2016.3.6 日
アクセス時のbody幅とWindowを動的に伸び縮みさせたときのbody幅を取得します。これ使うとレスポンシブ対応のWEBデザインに比較的柔軟に対応できます。 静的には$(window).width()でそのまま取得できるのですが、動的にはこのままではダメでsetTimeout()を使って幅を取得するってところが面倒なのです。 $(function(){ // Window width default var egwidth = $(window).width(); console.log(egwidth); if (egwidth <= 640) { alert("スマホで見ている。"); } else if (egwidth > 640) { alert("PCで見ている。"...