投票後に外部のJavascript関数を実行する

アンケート用Ajax簡易投票所Q v3.25 ユーザガイド

投票が行なわれた後、ディフォルトの対応では、「ご投票ありがとうございました」というお知らせボックスを表示します。外部のJavascript関数を実行して、この対応を変更または拡張することができます。

外部のJavascript関数の指定

投票後にJavascript関数を実行するには、貼り付けた投票所タグに、data-onvoteを追加して、実行したい関数の名前を指定します。下の例では、投票が行なわれた後にfoo1という名前を持ったjavascript関数を実行します。

<div class='ajax-poll' tclass='simple' data-onvote='foo1'></div>

投票が行なわれた後に、foo1という名前を持ったjavascript関数が呼ばれるので、投票所を貼りつけたホストページにfoo1関数を書いておいてください。下の例では、投票が行なわれた時に「投票完了！」というメッセージをダイアログボックスで表示します。

<script>
function foo1() {
	alert("投票完了！");
	return true;
}
</script>

この例では、return true;の行で、trueを返しています。trueを返すことで、お知らせボックスの「ご投票ありがとうございました」も表示されます。下の投票所で試してみてください。

お知らせボックスを非表示にするには、以下のようにfalseを返します。

<div class='ajax-poll' tclass='simple' data-onvote='foo2'></div>

<script>
function foo2() {
	alert("投票完了！");
	return false;
}
</script>

この例では、「投票完了！」というメッセージのダイアログボックスは表示されますが、お知らせボックスの「ご投票ありがとうございました」は表示されません。下の投票所で試してみてください。

投票後に別のページへ飛ばす外部関数を示します。この例では、www.yahoo.co.jpへ飛ばします。

<div class='ajax-poll' tclass='simple' data-onvote='foo3'></div>

<script>
function foo3() {
	document.location = 'http://www.yahoo.co.jp/';
	return false;
}
</script>

今までの例に出てきた外部関数は、foo()のように引数がありませんでした。実際、外部関数には次の二つの引数が送られています。

jqo :	投票所のjQueryオブジェクト
tclass :	投票所の名前

以下の例では、投票後に（投票所を消して）「(--投票所名--)の投票完了！」のメッセージをホストページに書きこむ例を示します。

<div class='ajax-poll' tclass='simple' data-onvote='foo4'></div>

<script>
function foo4( jqo, tclass ) {
	jqo.html( tclass + 'の投票完了！' );
	return false;
}
</script>

下の投票所を試してみてください。投票後、投票所が消えて「simpleの投票完了！」のメッセージがページに挿入されます。

※ 上記の例で使用されているhtml()はjQueryの関数です。html()の使用法については、jQueryの解説書をご参照ください。