Category - JavaScript

Rails6 select2 導入

$ yarn add tempusdominus-bootstrap-4
$ yarn add jquery
$ yarn add jquery-ui
$ yarn add select2

・app/javascript/packs/application.js
require('jquery')
require('jquery-ui')
import 'bootstrap'
import "../stylesheets/application"
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/menu.css';
import 'jquery-ui/themes/base/autocomplete.css';
import 'jquery-ui/themes/base/theme.css';
import 'select2/dist/css/select2.css';


・app/javascript/stylesheets/application.scss
@import 'bootstrap';
@import "~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4";


<select id="multiple" class="multiple" multiple="multiple">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select>


$(function () {
$('#multiple').select2({
placeholder: 'Please Select',
allowClear: true,
dropdownAutoWidth: true,
width: 'auto',
multiple: true
})
});

解除する場合は
$('#multiple').val(null).trigger('change');

read more

CentOS 8 node.js yarn install

# curl -sL https://rpm.nodesource.com/setup_12.x | bash -
# dnf install -y nodejs

# curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
# dnf install -y yarn

read more

jQuery form内の全入力欄の情報を取得

$("form:first :input").each(function(){
var input = $(this);
console.log(input);
console.log(input.attr('name'));
});

read more

jQueryでのTrim

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
$.trim( String )

read more

WYSIWYG エディタ

Fantastic WYSIWYG editor on jQuery

Redactor
http://redactorjs.com/

read more

JavaScript グラフ

Elycharts - http://elycharts.com/
Flot - http://code.google.com/p/flot/
Flotr - http://solutoire.com/flotr/
jqPlot - http://www.jqplot.com
jQuery Sparkline - http://omnipotent.net/jquery.sparkline/
jQuery-Visualize - https://github.com/filamentgroup/jQuery-Visualize
MilkChart - http://mootools.net/forge/p/milkchart
moochart - http://moochart.coneri.se/
MooWheel - http://www.labs.unwieldy.net/moowheel/
PlotKit - http://www.liquidx.net/plotkit/
table2chart - http://mootools.net/forge/p/table2chart
TufteGraph - http://xaviershay.github.com/tufte-graph/
YUI Charts - http://yuilibrary.com/yui/docs/charts/

read more

JavaScriptでHTMLエスケープ

prototype.jsより

//htmlな文字をエスケープ
var escapeHTML = function(_strTarget){
var div = document.createElement('div');
var text = document.createTextNode('');
div.appendChild(text);
text.data = _strTarget;
return div.innerHTML;
}
何かHTML要素の中のテキストノードにエスケープされていない文字列を突っ込んで、それを要素のinnerHTMLとして取り出すと、エスケープされた文字列を得ることができる。

read more

insertAdjacentHTML、insertAdjacentTextをFirefoxで使う

IE Methods
http://www.mts.net/~tfriesen/dhtml/ie_methods.html

ie_method.js をダウンロードしてHTML内で呼び出す。
<script language="Javascript1.5" src="ie_methods.js"> </script>

read more

Javascript function

function functionName( var ){

}

これはこういう風に書くのと同じ

var functionName = function(var){

}

read more

Javascript Class生成

prototype.js のクラス生成機能を使います

prototype.jp をまずロード

var Test = Class.create();
Test.alert = function(text){
      var str = text;
      alert(str);
}

呼び出すときは Test.alert("www");

read more

input type=image で フォームが2回送信される IE

input type="button" を input type="image" src="" に変えて
さらにonclickイベントを追加すると formを二重に送信してしまうことがあります

マイクロソフトも認めています。
input type=image で フォームが2回送信される

私の環境では下記のように変更すれば二重送信は解消されました。

INPUT type="image" src="image.gif" onclick="doSubmit();"
                 ↓
INPUT type="image" src="image.gif" onclick="doSubmit(); return false;"

read more

Recent entry

Search

Tag Cloud

Page Top