Posts tagged click

[iPhone 開発メモ] 警告画面の表示

3

iPhone アプリで警告画面を表示させる方法です。

警告画面を表示する

UIAlertView *alert = [[UIAlertView alloc]
    initWithTitle:@"Alert Test"
    message:@"Message!!\nThis is Alert Test."
    delegate:self
    cancelButtonTitle:@"Cancel"
    otherButtonTitles:@"One", @"Two", nil];
[alert show];
[alert release];

(続きを読む…)

jQuery で Ajax のメモ

0

jQuery の自分へのメモです。
(続きを読む…)

MacBook のトラックパッドの設定を変更

0

長年 ThinkPad を愛用していた理由のひとつにノートパソコンのタッチパッドにどうしても馴染めなかったことがあります。ThinkPad のトラックポインタが大好きでデスクトップでもトラックポインタの付いたキーボードを使用していたくらいです。それがあり、Mac に移行するのに今ひとつ踏み切れませんでした。しかし、他の人は使えているのだから絶対に慣れるはずと考えて思い切って Mac を購入しました。
(続きを読む…)

CakePHP jQuery を使用した Ajax ファイルアップロード

6

下記ページを参考にさせていただきました。
“jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan
David Golding Design Blog -

上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。

jQuery 使用準備

jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。
アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。
<?php echo $javascript->link(array('jquery.js','jquery.form.js')); ?>

ビューにアップロードするフォームを作成する

今回は users コントローラの form アクションでフォームを表示します。Ajax の処理を行うのは users コントローラの upload アクションです。
views/users/form.ctp

<h1>upload test</h1>
<?php echo $form->create('User',array('name'=>'uploadForm','id'=>'uploadForm','type'=>'file'));?>
<?php echo $form->input('upload_file',array('label'=>'Upload Text File ','type'=>'file'));?>
<?php echo $form->button('アップロード',array('onClick'=>'$('#uploadForm').ajaxSubmit({target: '#uploadFile',url: '/users/upload'}); return false;'));?>
</form>
<div id="uploadFile"></div>

コントローラの処理

views/users/form.ctp から「アップロード」ボタンを押すと users/upload アクションの $this->data にアップロードファイルの情報が入ってきます。ここでは mime タイプによって JPEG ファイルのみをアップロードできるようにしています。アップロード後に views/users/upload.ctp を出力します。

function upload() {
    if (!$this->data['User']['upload_file']) {
        $this->set('error','アップロードするファイルを選択してください');
	$this->render('upload','ajax');
    } else {
	if ($this->data['User']['upload_file']['type'] != 'image/jpeg') {
	    $this->set('error','アップロードできる画像は JPEG のみです');
	    $this->render('upload','ajax');
	} else {
	    $filename = '/files/'.intval(rand()).'.jpg';
	    rename($this->data['User']['upload_file']['tmp_name'], WWW_ROOT.$filename);
	    $this->set('filename', $filename);
	    $this->render('upload','ajax');
	}
    }
}

Ajax が返すビューを作成する

/users/upload で処理した結果を返すビューを作成します。今回は veiws/users/upload.ctp として作成しました。ここで img タグによりアップロードしたファイルを表示しています。

<?php if (!empty($error)): ?>
<p><?php echo $error;?></p>
<?php else: ?>
<p>Upload successful</p>
<?php echo $html->image($filename); ?>
<?php endif; ?>

以上で jQuery を使用して Ajax で画像のアップロードができます。

GoogleMap 特定のキーワードで表示させる

0

Google AJAX Search API を使用してキーワードや住所から自分のサイトに Google Map を表示させるメモ

Google AJAX Search API KEY と Google Map API KEY を指定して JavaScript を読み込む

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=Google AJAX Search API KEY" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Google Map API KEY" type="text/javascript"></script>

実際の表示部分。 q=キーワードで表示させる地図のキーワード(または住所)を指定する。

<script type="text/javascript">
<!--
var gls;
var gMap;

function OnLocalSearch() {
    if (!gls.results) return;
    var first = gls.results[0];
    var point = new GLatLng(parseFloat(first.lat), parseFloat(first.lng));
    var zoom = 15;
    gMap.addControl(new GSmallMapControl());
    gMap.addControl(new GMapTypeControl());
    gMap.setMapType(G_MAP_TYPE);
    gMap.setCenter(point, zoom);
    var marker = new GMarker(point);
    gMap.addOverlay(marker);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
}

function load() {
    gMap = new GMap2(document.getElementById("map"));
    gMap.addControl(new GSmallMapControl());
    gMap.addControl(new GMapTypeControl());
    gMap.setCenter(new GLatLng(0, 0));
    gls = new GlocalSearch();
    gls.setCenterPoint(gMap);
    gls.setSearchCompleteCallback(null, OnLocalSearch);
    var q = "横浜ランドマークタワー";
    gls.execute(q);
}
//-->
</script>

<body onLoad="load()">
<div id="map" style="width: 410px; height: 320px"></div>
</body>

各 API KEY の取得は下記ページから
Sign-up for an AJAX Search API Key – Google AJAX Search API – Google Code
Sign Up for the Google Maps API – Google Maps API – Google Code

CakePHP 入力フォームで確認画面を表示する方法

2

フォームを入力後、すぐに保存ではなく一度確認画面を表示させたい場合のやり方。

こちらに詳しいやり方が書いてあります。
http://www12.atwiki.jp/nezox/pages/6.html

ポイントは

  • 入力フォームで
    <input type="hidden" name="mode" value="confirm">

    とする。

  • コントローラの add アクションでバリデーションチェック後に
     if (@$_POST["mode"]=="confirm") {
        // 確認画面を表示する
        $this->render('confirm');
    } else {
        // 保存処理
        if ($this->User->save($this->data)) {
            $this->flash('Your post has been saved.', '/users');
        }
    }
  • 確認画面の view を confirm.thtml を作成
     <h1>確認画面</h1>
    <form action="<?php echo $html->url('/users/add'); ?>" method="post">
    ログインID:
    <?php echo $html->tagValue('Users/login_id'); ?
    <?php echo $html->hidden('Users/login_id', array('value'=>$html->tagValue('Users/login_id'))); ?>
    <input type="button" value="戻る" onclick="history.back();">
    <input type="submit" value="新規登録">
    </form>
Go to Top