プレビュー画面の実装をお手軽に！jQueryプラグイン「jquery.previewButton.js」

投稿日 2011年12月9日
更新日 2013年1月4日
著者キタジマタカシ
カテゴリー jQuery
カテゴリー jquery.previewButton.js

2011/12/13: いろいろな要素を柔軟にPostできるように修正しました。

jquery.previewButton.jsをダウンロード

デモページ

デモページ

ソースとか、使い方とか

ウィンドウを生成し、フォームを複製、複製したフォームから生成したウィンドウにPostする仕組みです。

引数

url	プレビュー用ページのurl
post	Postするデータのキーとタイプのハッシュ。タイプの種類 text…テキストフィールド textarea…テキストエリア radio…ラジオボタン select…セレクトボックス checkbox…チェックボックス ※checkboxの場合は、キー名の後に自動的に[]が付加されるので注意！

入力フォームページ

...省略...

<!-- jQueryと、jquery.previewButton.jsを読み込みます。 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.previewButton.js"></script>
<!-- input#previewButtonを押したときに/path/to/preview.phpにデータをPost。 -->
<script type="text/javascript">
(function($){
	$('input#previewButton').previewButton({
		'url'  : '/path/to/preview.php',
		'post' : {
			'title'   : 'text',
			'content' : 'textarea'
		}
	});
})(jQuery);
</script>

...省略...

<form method="post" action="./">
	<input type="text" name="title" size="60" />
	<textarea name="content" cols="50" rows="5"></textarea>
	<input type="button" name="previewButton" id="previewButton" value="プレビュー" />
</form>

...省略...

プレビューページ

プレビュー用のページではPostデータを表示するコードを記述してください。例えば以下のような感じで…。

<?php if ( !empty( $_POST['title'] ) ) : ?>
<h1><?php echo htmlspecialchars( $_POST['title'], ENT_QUOTES, 'utf-8' ); ?></h1>
<?php endif; ?>

<?php if ( !empty( $_POST['content'] ) ) : ?>
<?php echo $_POST['content']; ?>
<?php endif; ?>

jquery.previewButton.jsをダウンロード

参考: window.open()でPOST – 特攻チームA野郎!! IT編

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

記事一覧

この投稿へのコメント

ゆーすけが 2012年9月30日 1:11 AM にコメント

やりたかったことがそのまま紹介されていたので早速導入しましたが、別ウィンドウすら立ち上がりません。
サンプルを拝見したところ、switchさせない分、ソースが異なるようなのです。そちらは動かすことができました。
せっかくいろいろな要素を柔軟にPostできるように修正していただいたので、是非使わせていただきたいのですが、再度ソースをご確認いただけますでしょうか？
キタジマタカシが 2012年9月30日 9:29 AM にコメント

ゆーすけさま
コメントありがとうございます。すみません、状況が良くわからないのですがバグがあるということでそうか？
ゆーすけが 2012年9月30日 12:46 PM にコメント

すみません、端的にいうと

修正版である“DLした「jquery.previewButton.js」と、このページのサンプルソース”と未修正版と思われる“デモページのソース”で内容が異なる。

修正版を導入したところプレビューボタンが何も反応しないため、デモページよりソースを持ってきて改変したところ動くようになった。

という事です。
jquery.previewButton.jsへのパスは合ってたので、他に原因がわからない上、JSに明るくないため他に原因が探れませんでした。

結局、デモページを参考にして思い描いていた挙動を導入することができましたが、jquery.previewButton.jsが便利そうだったため、導入できれば良いな、と思いコメントを残させていただきました。
キタジマタカシが 2012年9月30日 3:18 PM にコメント

コメントありがとうございます。
確認いたしましたところ、ご指摘のとおり、GitHub上のプラグインとデモでjsのコードが違っておりました。デモの方もバージョンアップして動作を確認できました。
「入力フォームページ」のサンプルコードで一部間違いがあり、「’/path/to/preview.php’」の後ろの「,」が抜けておりました。下記が正しいです（サンプルコードの方も現在は修正済みです）。

$(‘input#previewButton’).previewButton({
‘url’ : ‘/path/to/preview.php’,
‘post’ : {
‘title’ : ‘text’,
‘content’ : ‘textarea’
}
});

上記のコードだと、input#previewButton をクリックしたときに /path/to/preview.php に、title と content を送信する、ということになります。プレビューボタンが反応しないということだと、input#previewButtonの部分を変更する必要があるかもしれません。
カツラギテツが 2014年11月10日 10:35 PM にコメント

はじめまして。少し前の記事にコメントで申し訳ないのですが、こちらのプラグインにて
画像の表示もしたいと考えております。

$_FILESで取得のそれ以前の問題というのは認識しているのですが、
当方PHPには弱く、色々と調べて入るのですがなかなか打開策にはなりません。

お手数おかけいたしますが、ヒントなど頂けますと幸いです。

キタジマタカシが 2014年11月11日 12:07 PM にコメント

カツラギテツさま

随分前に作ったものでちょっと忘れている部分もありますが、次のように修正していただくとどうでしょうか？
（テストしたわけではないので、動かない可能性も高いです…すみません）

まずプラグインを修正

// 下記のように修正
var newform = $('<form id="previewForm" enctype="multipart/form-data" style="display:none"></form>');

次に実行部分を修正

(function($){
    $('input#previewButton').previewButton({
        'url'  : '/path/to/preview.php',
        'post' : {
            'title'   : 'text',
            'content' : 'textarea',
            'fileupload'   : 'text' // inputフィールドをコピーするだけなのでtextで良いかと…
        }
    });
})(jQuery);

そしてプレビュー用ページに

<?php
var_dump( $_FILES['ファイルフィールドのname属性'] );
?>

TEMO が 2014年12月28日 3:29 PM にコメント

こちらのプレビュー機能を利用しようと、
実装を試みたのですがうまく動きません。(別ウィンドーが開きません)

wordpressでjQueryを読み込みました。
コンフリクトをさけるために$をjQueryに置き換えて実行しました。
上記の対応でchromeのjavascript console で発生したエラーは解消しましたが、
プレビューされません。

思考錯誤の状態で行き詰まってしまいました。
実際に設定した際にあった問題などがあれば教えて頂けないでしょうか？

あまり詳しくなくて申し訳ないのですが、
宜しくお願い致します。
TEMO が 2014年12月28日 4:32 PM にコメント

うまくコメントが残せていなかったので、再度コメントをさせて頂きます。

記事に記載のプラグインを利用してみたのですが、うまく実行されません。(別ウィンドーが表示されません)

wordpressに導入を試みています。
コンフリクト解消するために$をjQueryに置き換えることで、
chrome javascript コンソールに表示されるエラーが解消致しましたが、
プレビューされません。

あまり詳しくなく申し訳ないのですが、
考えられる原因もしくは実際にwordpressに設置したい際に発生した問題などがあれば
教えていただけないでしょうか。

過去記事で申し訳ないのですが、よろしくお願いいたします。

プレビュー画面の実装をお手軽に！jQueryプラグイン「jquery.previewButton.js」

デモページ

ソースとか、使い方とか

引数

入力フォームページ

プレビューページ

この記事を書いた人

キタジマタカシ

アクセシビリティの向上に。文字サイズ変更と色反転ができるjQueryプラグイン作った。

jqueryでカテゴリごとにメニューの画像を切り替えるTips 2

シンプルなスライドショーjQueryプラグイン「jquery.SimpleSlideShow.js」

スクロールすると自動的にトップへ戻るボタンがでてくるjQueryプラグインを作りました。