ajaxの最近のブログ記事

前のエントリーで入力後の確認画面を作成する場合を書いたが
そのままadd.ctpをコピーすると当然フォームのままだったりします
テキストとかはそのまま表示に変えやすいんですけど
連動したリストボックスとかメンドクサイですよね
といっても値表示用のメソッド書けばいいんですが
さくっと逃げるためにリストの選択自体は
エラーチェックで再描画するようのままで
disabledにすることで逃げちゃいました

<?php echo $form->select('category_id',
                            $list,
                            null,
                            array('id'=>'categories','disabled'=>'disabled'),"選択してください");
?>

入力フォームで
画像等を複数追加できる場合
足したり引いたり個数を変動させたい場合がある
そのような場合

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
var arInput = 5; //初期入力フォームの数
var Default = arInput;
function addInput() {
　arInput ++
　$("#area").before('<span id=\"group'+arInput+'\"><input type=text></span>\n');
}
function delInput() {
$("#group"+arInput).remove();
　if(arInput > Default){
　　arInput --
　}
}

<div class="file-form">
    <hr id="area" />
　　<input type="button" onclick="addInput()" value="＋" />
　　<input type="button" onclick="delInput()" value="－" />

</div>

$("#area").beforeのところでid=areaの前に追加を行っている



参考にしたサイトが見つからなくなってしまったので
リンク貼ることができませんm(__)m
見つかったら貼ります

jCarousel Liteを利用して画像のカルーセル（って読むの？）を作って
それを選択したときにHTMLを入れ替えるような処理を行いたい場合

$(function() {


    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });


	$(".anyClass img").click(function() {
    	$(".top img").attr("src", $(this).attr("src"));
		$(".items").load("test.php", {
			cordinate_id: $(this).attr("name")
		});

	})
});

こんな感じで行う
一覧の画面から何かでID的なものを特定しなければいけないのだが
このリストを作る事も動的に行うと思うので属性nameにIDを設定してしまう

HTMLでは
<div class="anyClass">
		<ul>
        	<li><img src="images/photo_5.jpg" alt="" width="68" height="100" name = "1"></li>
		<li><img src="images/photo_6.jpg" alt="" width="68" height="68"  name="2"></li>
        	<li><img src="images/photo_7.jpg" alt="" width="87" height="130" name="3"></li>
        	<li><img src="images/photo_8.jpg" alt="" width="68" height="68" name="4"></li>
		<!-- name に　コーディネートIDを持たせる -->
    	　　　　</ul>
</div>
の用にname="ID"とする