【jqGrid】loadonce:trueでpaginateを動かそうにも、動的にサーバから２回目以降読み込もうにもロードされなくなった話と解決策
いきさつ
jqGridを２つ並べて、
１つ目のグリッドでレコードを選択すると、
それに紐付くデータが２つ目のグリッドに動的に表示される。
そんな機能を実装したんですが、
どうやら２つ目のグリッドでページネーションが動作してないっぽい。
どこか設定ミスってるんだろうと高をくくって調べ始めたら、
解決に３時間もかかってしまったのでビボウロクに。
調査
グリッドの右下を見るに必要な件数はサーバから取れてるっぽい。
ただページャが機能していない。２ページ目があるはずなのに。
ということで軽くググってみると、どうやらサーバから動的にデータを反映させる場合は、
グリッドのオプションにloadonce:trueを指定するべきらしい。
$("#cmn-master-tb").jqGrid({
url: '',
loadonce: true, // こんな感じ
datatype : "json",
cellEdit: false,
するとどうだろうか！
確かにページャが動作したではありませんか！！！
しかしさらなる問題が
これで万事解決かと思いきや、
１つ目のグリッドでほかのレコードを選択してデータを見ようにも
２つ目のグリッドで動的に読み込んでくれない。何も音沙汰なし。
ここからが長かった。
単刀直入に解決方法
１つ目のグリッドのレコードを選択して、２つ目のグリッドに動的に読み込ませる部分のソースが以下のような感じなんですけれども、
jQuery("#cmn-master-tb").jqGrid('setGridParam',
url:"https://xxx.com/row.cmn_master_grp_code",
page:1
})
.trigger('reloadGrid');
これ、明示的に相手のグリッドのdatatypeを指定してあげないとダメみたいなのです。
jQuery("#cmn-master-tb").jqGrid('setGridParam',
url:"https://xxx.com/row.cmn_master_grp_code",
datatype: 'json', //これ
page:1
})
.trigger('reloadGrid');
いやーこんなんわかんないっすよー笑
【JQuery】画像トリミングプラグイン「Croppic.js」が富豪コーディングだったので軽量化しなければいけなくなった話【重すぎ】
事件の経緯
運営しているサイトでWeb上で画像をトリミングさせる機能（Twitterのプロフィールアイコン設定のときのアレみたいなやつ）を実装しているのですが、
ある日サイトをご利用いただいているユーザ様から
「トリミングしようと思って画像をタッチして移動させようにも動かせないです。 in Android」
というご連絡をいただきました。
はて、手持ちのスマホ（iPhone）で検証してみるも問題なく動かせる・・・何なのか。。
使ってるトリミングプラグイン
お洒落なサイトが印象的ですね。
自宅のテスト用Android実機で試してみる
「確かに動かせない。」
フロント側のメモリ不足あたりを疑いつつ、
なぜだろうなぜだろうと色々試行錯誤の上調べていった結果（プラグインごと乗り換えようともしたので丸３日かかりましたorz）、１件の記事にたどり着きました。
まさかねー！
だってほら、すごくお洒落なサイトだしブランド感も漂ってるし、新卒社会人みたいなコーディングになんてなってないよねー！（かく言う私も上の記事を見るまで意識してできてなかったですがｗ）
まさかでした。
重厚なmousemoveリスナ内のロジックがそこには広がってました、はい。
そこそこ潤沢なメモリを搭載した媒体なら耐えられそうですが、Android機とかそこらになると固まりそうなメモリ食いしん坊がそこにいました。
修正案
上記のサイトを参考にしつつ、
・レンダリング用にフレームレートを設ける
・スクロール系リスナ内ではイベントの登録のみにする
ように修正してみました。（なお、修正したのはドラッグ系ロジックのみです。多分ここだけの修正で大丈夫だとは思っているのですが・・・お気づきの点があれば教えてくださいm(__)m）
修正箇所 #454あたり
修正後
どなたかのお役に立てば光栄ですm(__)m
【追記：2019/2/28】
Android機でスクロールできない問題の根本原因違いました。。
どうやら
that.img.on("mousedown touchstart", function(e) {...
...
that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {...
といった「that.img.on(...」というイベント登録のところに原因があるようです。
アプリケーションのつくりにもよると思いますが、レンダリングする画像データが重かったりすると、that.imgに正常にイベントが登録されないようです。
よって、私の場合は一つ上の上位divにイベントを登録するように修正することで、この問題を回避することができました。
Bootstrap3のブレークポイントを増やしたいときの処方箋
やりたいこと
Bootstrap3のグリッドシステムを利用してるけど、タブレット以下のブレークポイントが768px未満ってこれちょっと大雑把すぎませんかね？（Extra（特別な）smallっていう割には全然特別感のない幅感というか・・・）
ということで自力で
col-xs ~320px
col-ss 360px (これを追加)
col-sm 768px
col-md 992px
col-lg 1200px~
となるようにscssを改変->cssを生成したい！
というのがやりたいことです。
（特別なブレークレイアウトにしなきゃいけないのって個人的にはiPhoneSEなどの横幅320px系だと思っているので、こういう分け方にしてます。）
稼働中のサービスに反映させたいと言うことで、col-xsが一番小さいブレークポイントとしていたるところにクラス指定してるので、
途中に挟み込む形にしたいと言うわけです。
編集するscss
当方はHonoka v3.3.7を利用しているため、これを改変していきますが、
行数は違えど公式版bootstrap3でも役に立つかもしれません。
honokak.osaka
※バージョン指定でダウンロードしたい場合は、Gitページに飛んでからTagsをご参照ください。
また、デフォルトで生のbootstrap3のsassはhonokaには同梱されていないので、別途/honoka/bootstrap/~として配置する必要があります。
github.com
※これもバージョンをTagsからしっかり合わせるようにしてください。
※分かりづらいですが/assets/stylesheets/配下にあります。
編集するファイル
honoka/_variables.scss
#289あたり
// Extra small screen / phone //** Deprecated `$screen-xs` as of v3.0.1 $screen-xs: 320px !default; // ！変更！ //** Deprecated `$screen-xs-min` as of v3.2.0 $screen-xs-min: $screen-xs !default; //** Deprecated `$screen-phone` as of v3.0.1 $screen-phone: $screen-xs-min !default; // ！追加！Small screen / smart //** Deprecated `$screen-sm` as of v3.0.1 $screen-ss: 360px !default; $screen-ss-min: $screen-ss !default; //** Deprecated `$screen-smart` as of v3.0.1 $screen-smart: $screen-ss-min !default; // Small screen / tablet //** Deprecated `$screen-sm` as of v3.0.1 $screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; //** Deprecated `$screen-tablet` as of v3.0.1 $screen-tablet: $screen-sm-min !default;
#320あたり つながる様に追加＆変更
$screen-xs-max: ($screen-ss-min - 1) !default; /*！sm->ss！*/ $screen-ss-max: ($screen-sm-min - 1) !default;/*！追加！*/ $screen-sm-max: ($screen-md-min - 1) !default; $screen-md-max: ($screen-lg-min - 1) !default;
honoka/bootstrap/_grid.scss
#56あたり
@include make-grid(xs);
// ！追加！
@media (min-width: $screen-ss-min) {
@include make-grid(ss);
}
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
@include make-grid(sm);
}
honoka/bootstrap/mixins/_grid.scss
#38おわりあたり
// ！追加！Generate the smart columns
@mixin make-ss-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-ss-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-ss-column-offset($columns) {
@media (min-width: $screen-ss-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-ss-column-push($columns) {
@media (min-width: $screen-ss-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-ss-column-pull($columns) {
@media (min-width: $screen-ss-min) {
right: percentage(($columns / $grid-columns));
}
}
honoka/bootstrap/mixins/_grid-framework.scss
#6からの関数に２箇所追加
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-ss-#{$i}, /*！追加！*/ .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-ss-#{$i},/*！追加！*/ .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
#{$list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ceil(($grid-gutter-width / 2));
padding-right: floor(($grid-gutter-width / 2));
}
}
honoka/bootstrap/_responsive-utilities.scss
#31
@include responsive-invisibility('.visible-xs');
@include responsive-invisibility('.visible-ss'); /*！追加！*/#37あたり
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-ss-block,/*！追加！*/ .visible-ss-inline,/*！追加！*/ .visible-ss-inline-block,/*！追加！*/
#74あたり 真似して追加
/*！追加！*/
@media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
@include responsive-visibility('.visible-sm');
}
.visible-ss-block {
@media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
display: block !important;
}
}
.visible-ss-inline {
@media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
display: inline !important;
}
}
.visible-ss-inline-block {
@media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
display: inline-block !important;
}
}#154あたり 真似して追加
/*！追加！*/
@media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
@include responsive-invisibility('.hidden-ss');
}
クリムゾンの迷宮を読んで（ネタバレなし）
先日読み終わった「クリムゾンの迷宮」について読書感想文を書いていきたいと思います。
（概要だけでネタバレはしないように書いていきます）
- 作者: 貴志祐介
- 出版社/メーカー: 角川書店(角川グループパブリッシング)
- 発売日: 1999/04/09
- メディア: 文庫
- 購入: 31人 クリック: 726回
- この商品を含むブログ (138件) を見る
おすすめ度
★★★★☆
概要
ある日起きたら一面表紙のイラストのようなクリムゾンな砂丘に訳も分からず自分がいる。
この「バングル・バングル」と言われる地を主人公は、ある指令のもと彷徨い歩くことになる。
感想
目覚めたら非現実的な世界に自分がいる、
この時点で私の場合完全に主人公に感情移入を果たしてしまっていたわけですが、
そこからのストーリー展開が続きが気になる続きが気になるの連続で、
読書習慣があまりない私のような読書ビギナーでも飽きることなく最後まで読むことができると思います。
読み終わった後、なんでこんなにスラスラ読めたのかを考察してみたのですが、気づいたのが
『回想シーン』が全然ないのと主人公目線で最後まで話が進んでいくということです。
回想シーンが全然ない
ストーリーが面白いのは勿論なのですが、
回想シーンがあまりないので、話が逆戻りせず、捲ったページの分だけ時間が進みます。
小説の表現の仕方はいろいろあると思いますが、
この小説のストーリーの内容的に続きが気になるばかりなので、
時間が戻されることによる「しらけ感」がなく、１本の時間軸で話の臨場感を保ったまま話が進んでいきます。
主人公目線で最後まで話が進んでいく
これもストーリーの内容的にすごく読みやすかったです。
ドラゴン○ールで例えると、
『悟空とフリーザがバチバチにやり合ってる途中で、「一方その頃…」と別のシーンに移動してしまう』
みたいな「時間に対する目線の平行移動」がないので、これまたしらけずに読み進められた１因だと思いました。
総評
「バトルロワイヤル」もののようなものが好きで、非現実的な世界に自分を置いてみたい。
そんな方は絶対に面白いと思える作品だと思います！（そうでない方も読みやすいので１本の映画を見る調子で是非。）
でも結末はもうちょっと情報が欲しかったなぁ…
- 作者: 貴志祐介
- 出版社/メーカー: 角川書店(角川グループパブリッシング)
- 発売日: 1999/04/09
- メディア: 文庫
- 購入: 31人 クリック: 726回
- この商品を含むブログ (138件) を見る
Javaバージョンあげたらorg.hibernate.HibernateException: identifier of an instance of was altered from xxx to null
仕事の都合上、アプリケーションのJava実行環境を
oracle製のJRE6からopen系のJRE7にバージョンアップすることになった。
すると、とある検索ロジックの処理で以下のようなhibernateエラーが発生。
org.hibernate.HibernateException: identifier of an instance of SampleModel was altered from xxx to null at org.hibernate.event.def.DefaultFlushEntityEventListener.checkId(DefaultFlushEntityEventListener.java:58) at org.hibernate.event.def.DefaultFlushEntityEventListener.getValues(DefaultFlushEntityEventListener.java:164) at org.hibernate.event.def.DefaultFlushEntityEventListener.onFlushEntity(DefaultFlushEntityEventListener.java:120)
解決法
当方はDBにpostgresqlを使っているが、
どうやらView系のテーブルに検索いった後、キャッシュを削除せずに次の検索にいくとエラーが出てるらしかった。
よってwebでいろいろ調べた結果、以下のようにView系の検索をsession.evict()してやると解決した。
// 検索（ViewSearchUtil内でView系テーブルを検索していると仮定） ViewModel viewModel = ViewSearchUtil.searchView(session, viewCode); if(viewMode != null){ process(viewModel); session.evict(viewModel); } // evictしないとここでエラー HogeModel hogeModel = HogeSearchUtil.search(session, hogeCode);
疑問
なぜJRE6->JRE7にあげたら再現するようになったのか。。
Hibernateで面白い記事
面白い記事を見つけたので。
マジ神！JqueryUIを使っててイメージ式アイコンにイライラ！フォント化したい人必見！
お久しぶりです、ピー山です！
久々に記事にしたいことがありましたので書きます☆٩(｡•ω<｡)و
JqueryUIのアイコンのimage式iconにイライラしたことありませんか？
僕はあります。
理由１
あれ、JqueryUIをインストールするときにcssディレクトリ直下にimagesディレクトリ配置しなきゃアイコンとして機能してくれないじゃないですか？
気持ち悪い。css直下に画像ファイルがあることがもう無理。
（cssディレクトリとは別にimage専用のディレクトリを用意しているため）
理由２
ローカルから本番環境にリリースするときに、
cssディレクトリをまるっとうｐすると絶妙にイライラする時間がかかる。
なぜなら細かいアイコン（画像ファイル）が１５０個近くあるから。
何とかアイコンフォント化できないん？
FontAwesomeに置き換えてくれるjqueryUI用のcssを配布していただけてるとか、
だいたい自分が考えるようなイライラは先人の方が解決＆記事にしてくれているものです。
・・・と思いきや、海外のサイト等を回ってもなかなか解決記事がない。
２時間ちかく徘徊しましたorz
ということでたどり着いた神をご紹介！
いやぁー見つけました。
有志でjqueryUIのアイコンをフォント化してくれているゼウスを。
神すぎる。しかもしっかりとjqueryUI1.11, 1.12ともにバージョンごとの対応もされてる。
適用も簡単
ファイルをダウンロードして、
①fontディレクトリ直下のフォントファイルを全てフォントを管理するディレクトリにコピー
②root直下にあるcssファイルを使ってるJqueryUIのバージョンに合わせてcssを管理するディレクトリにコピー（jquery.ui.cssのtopにバージョン表記されてます）
③【任意】②でコピーしたcssファイルの最初の10行目くらいまでにフォントファイルへのパス指定がされているので、①で置いた場所によっては適宜パスを変更
④jquery-ui-1.11.icon-font(.min).cssをjquery.ui.cssの次に呼び出して完了。
感動。
cssファイルの中にimagesアイコンファイルがないのにdatepickerなどでJqueryUIアイコンが表示されてマジ感動。
mkkeckさん本当にありがとう。
ということで、私みたいなストレスを抱えている方は、
導入も簡単なので試してみてはいかがでしょうか？
それではまたいつか_(:3｣ ∠)_