JavaScriptライブラリ を自ら学ぶ人のための質問スレッドです。

■質問を書く上で
(1) 質問にならない投稿はご遠慮ください。(煽り、コード制作依頼など)
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 長い間連続して質問する場合にレス番を名前にしてあれば、質問の流れが回答者に伝わりやすくなります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合はhttp://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。質問テンプレートを活用してみてください。

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

前スレ：
【jQuery】JavaScript ライブラリ総合質問所 vol.2
http://toro.2ch.net/test/read.cgi/hp/1350728831/

関連スレ：

+ JavaScript の質問用スレッド vol.106 +
http://toro.2ch.net/test/read.cgi/hp/1368631760/

JavaScript Tips コレクション
http://toro.2ch.net/test/read.cgi/hp/1070611524/

1行javascriptプログラミング　　　
http://toro.2ch.net/test/read.cgi/hp/1066750037/

JavaScriptスレ2
http://toro.2ch.net/test/read.cgi/tech/1330477388/

サーバーサイドJavaScript総合
http://kohada.2ch.net/test/read.cgi/php/1210836132/

【node.js】サーバサイドjavascript 2【Rhino】
http://toro.2ch.net/test/read.cgi/tech/1358937029/

復活したか

ｊQは使いやすくて、主にセレクタを指定するコードが短くでき、それはそれで魅力的なのだが、
チェーン（っていうのかな？）が超長くなって、うまくインデント＋改行しないと読みづらくなるのが欠点だな。

jqMobi、軽くて早くていいんだけど
jQueryのノリで使うと、いろいろハマる。
足りない機能も多く、仕様が微妙に違う点も多い。

jQueryと似て非なる独自のものと割りきって
個人プロジェクトで使うぶんにはいいかな。。。
仕事に使うと死ねる。

jQuery Mobile + mysql + php でﾕｰｻﾞｰﾏｽﾀに登録した情報でログイン画面を作りたいのですが
どうにもうまくできません。いい方法ないですか。
現在login.php（jqm適用）にて認証行ってOKならmain.php（jqm適用）に以下記述で飛ぶようにしてるのですが
　$login_url = "http://{$_SERVER["HTTP_HOST"]}/test/main.php";
　header("Location: {$login_url}");
上記の命令でページを切り替えるとjqmのページ遷移で移動しているようで、mein.phpに記述してある
jsのイベントが発生してくれません。何かいい方法はないでしょうか、お知恵を拝借したいです。

jQMのページ遷移は基本的に、すでにDOMとしてサーバからロードされている
DIV要素をページとして扱うから、仕組みをきちんと理解してないとハマる。
ajaxページ遷移をオプション定義でOFFにしてやってみれ。

それでも解らなければ、jQMを使っても幸せにはなれないなら
さっさと他のフレームワークに乗り換えるか自作するのが吉。

デフォajaxページ遷移OFF、必要なところをつけてできました。ありがとうございます
ﾄﾞｰﾅﾂ本見ながらやっておりましてそのあたりの意識を全くしておりませんでした。再度勉強しなおします。

ＪＱＭのイベントに関する入門書はないかな
デザインはよくみるけどイベントに関するあたりがあまり書いてなくて

【環境】jQuery 1.10.1

$.getScript(について教えてください。
外部スクリプトの読み込みが完了後のコールバック関数に
引数をもたせたいのですが、希望の値をわたすことができません。
お詳しい方どうかご助言をお願いします。

【サンプルコード】
・メインのコード
$(function(){
for(var i = 0; i < 2; i++) {
$.getScript('test.js')
.done(function(script, textStatus) {
console.log(i);
});
}
});

・test.js
console.log('test.');


【期待する結果】
test.　　0　　test.　　1

【実際の結果】
test.　　2　　test.　　2

ない

送ってしまった・・・
jQuery.autopager をhttp://lagoscript.org/jquery/autopager を見ながら設定中なのですが
3ページ目以降の内容が 全て2ページ目と同じになってしまいます。

現在は $.autopager(); でoption は設定してないのですが、 startやload に
Aタグの内容を書き替える 記述とか 必要なのでしょうか？

それはどっちかっつーとオーサリングツールだろ

確かに。。。
表示を他のブラウザと揃える方法は無いでしょうか？
自分ではCSSをどういじっても隙間をなくすことができませんでした

webサイトにFacebookのウォールを貼りつけました
参考にしたサイト：http://fukuyama.co/fbwall
上記サイトの下部に「追記：本文が長いので抜粋したい」というカスタマイズ方法が掲載されております
ところが、この通りに実行して表示が「・・・」になるのはclassが.fb-wall-descriptionの部分です

本文に反映させるには.fb-wall-boxではないかと思うのですが、如何せんそこから先がわかりません
jsファイル（jquery.neosmart.fb.wall.js）は、http://www.neosmart.de/social-media/facebook-wall/
からダウンロードしたものです

if(exists(data[k].description)){
thisDesc = modText(data[k].description);
if(thisDesc.length>299)thisDesc=thisDesc.substr(0,thisDesc.lastIndexOf(' '))+' ...';
output += '<span class="fb-wall-description">'+thisDesc+'</span>';
}

書き換えして試したのですが、うまくいきません
見本通りにやれるだけで、記述の内容はちんぷんかんぷんのレベルですが、何かしらのご教示を賜りたく
よろしくお願いいたします

>>29
レス、ありがとうございます
いろいろと試してみました
省略はできましたが、テキストが改行されません
文字数の指定で省略したいのですが難しいですね

その後の試行錯誤の結果、望む結果に至り、自力解決できました
お騒がせしました

どうやったら解決できたのか、書いてくれると
他の人の勉強にもなってありがたいぞ

>>32
それぐらい自分でやれ
あまえんな。

>>34
65 名無しさん＠お腹いっぱい。 sage 2013/07/31(水) NY:AN:NY.AN ID:j5t3rm/ZO
いやーん

jQuery-UIも使える環境だと分かりましたので
>>36は取り戻しいたします。
ありがとうございました。

jQueryプラグインのスライドショー「ImageNavigation」を設置したのですが、ヘッダーの上を通過してしまいます。
上手いことヘッダの下を通す方法ないでしょうか？

今こんな感じです。
http://simapan.digiweb.jp/index.html

>>38

CSSの#headerに、
z-index: 999;
とか入れてみな

>>39
おぉ…出来ました！
ありがとうございます！

z-indexの意味もちゃんと理解しとけな

jQuery使えないから、
英語がわからないから
って

どこかの個人が作った
ライブラリを使うのはやめなさい。

自分でできることだけしなさい。
できないなら出来るようになりなさい。

>>45
優しいな。

【環境】windows7 64bit home corome
【何をしたのか】下記。innerHTMLを勉強中
【エラーメッセージ】なし
【期待する結果】以下のコードでボタンを押した時に、id=test2のタグ内も、innerHTMLで内容を変更して"test_ok"と表示させたい。
id=test1の部分だと、上手くいきました。
また、これはスコープの問題なのでしょうか。
【サンプルコード】
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#form1').submit(function() {
$.ajax({
type: "POST",
url: "db.php",
dataType: 'Json',
data: "postdata",
error: function(retobj){ //普段はsuccessです。
document.getElementById("form1").innerHTML="form1_ok";
document.getElementById("test1").innerHTML="test_ok"
document.getElementById("test2").innerHTML="test_ok"
}});});});</script></head>

<body>
<div id="test2">test!</div>
<div>
<div id="test1">test!</div>
<form method="post" name="form1" id="form1"><input type="submit" value="送信"></form>
</div>

こんなんでどう？
とりあえず郵便番号検索してくる処理にしてみた。

<html><head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){$(document).on("click", "#btn_send", function(){
$("#btn_send").addClass('ui-disabled');
$("#form1 span.ui-btn-text").text("送信中");
$.ajax(
{async: true,type: 'GET',
url: 'http://api.postalcode.jp/v1/zipsearch',
data: {"zipcode":" 1100006"},dataType: 'jsonp'})
.done(function( data ) {console.log("通信完了時の処理");
var address = data.zipcode.a1;
var town = address.prefecture + address.city + address.town;
$("#test2").text("test2_ok");
$("#test1").text(town);
$("#form1 span.ui-btn-text").text("送信完了");
$("#btn_send").removeClass('ui-disabled');})
.fail(function( data ) {console.log("通信エラー");})
.always(function( data ) {console.log("通信結果の可否に関わらず必ず実行される処理");
});});
});
</script></head>
<body><div id="test2">test!</div><div>
<div id="test1">test!</div><form method="post" name="form1" id="form1"><input type="button" id="btn_send" value="送信"></form>
</div></body></html>

>>48
ありがとうございます。
なんでうまくいくんだろう。

ChromeのJavaScriptデバッガとかを使って
動きを追ってみるといいよ