Ajax・jquery

jquery.validateでチェックボックスを必須項目にしたい時

jquery validateを使ったチェックにおいて通常の「input type=”text”」では自由に必須項目(required)の設定は簡単だが、複数選択が可能なチェックボックスにおいて必須項目の設定をしたい場合、同じやり方ではうまくいかない。サイトによってはjquery validateで「チェックボックスの必須項目は設定出来ない」と書いてあるところもあるが、チェックボックスの必須項目設定も可能。

テキストボックスでの必須項目設定とエラー表示は

<input type="text" size=50 name="name" class="required">
name:{required: "お名前を入力してください"},

のようにする。

チェックボックスの場合

例えば以下のようなフォームにおいてjquery validateを使ったチェックを行い、いずれか1つを選択することを条件にしたい時、

<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>

テキストボックスの時と同じようにしてnameであるlesson[]等を記載し

lesson[]:{required: "レッスンを選択してください"},

のようにするとエラーとなり失敗する。
[]を使う時は「’」「”」で囲み

'lesson[]':{required: "受講希望日を選択してください"},

とすれば良い。

htmlとjavascriptのサンプルは以下

JAVASCRIPT・HTML

(function(){
var rules = {
'lesson[]': {required: true}
};
var messages = {
'lesson[]':{required: "受講希望日を選択してください"}
};
$(function(){
$('#form').validate({
rules: rules,
messages: messages,
errorPlacement: function(error, element){
if (element.attr("name") == "lesson" ) error.insertAfter("#lesson_err");
}
});
});
})();
<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>
<div id="lesson_err"></div>

何もチェックしなかった場合「lesson_err」の位置に「受講希望日を選択してください」が表示される。

jquery mobile 1.2でヘッダーに表示されるボタンが上に寄っている時

jquery mobile 1.2をデフォルトで使用している時、
ヘッダーに埋めこまれる左右のボタンがヘッダーに対して上に寄っていることがある。
きちんと天地中央に配置するには二つの方法、いずれかを使えばいい。

まずはスタイルシート(CSS)で指定しやすいように、ヘッダーにIDを振っておく。

<div data-role="header" data-theme="c" id="header">

まずはヘッダーの天地を減らす方法
40pxの数値はお好みで。

<style>
#header {
height:40px;
}
</style>

もう一つはボタンの位置を下げる方法

<style>
#header .ui-btn-left, #header .ui-btn-right {
margin-top:5px;
}
</style>

それぞれ左右に指定したボタンの上にマージンを指定し下げる。

jQuery Mobileのリスト表示の階層化とBackボタン表示の方法

jQuery Mobileではdata-role=”listview”で指定することによりリスト表示ができる。

また、そのリストの折りたたみもdata-role=”collapsible”を指定するだけで簡単に折り畳みメニューになる。

そのまま使えるサンプルコードは以下。

<div data-role="collapsible">
<h6>都道府県から選択</h6>
<ul data-role="listview" data-inset="true">
<li><a href="#">北海道</a></li>
<li><a href="#">青森県</a></li>
<li><a href="#">岩手県</a></li>
<li><a href="#">宮城県</a></li>
<li><a href="#">秋田県</a></li>
<li><a href="#">山形県</a></li>
<li><a href="#">福島県</a></li>
<li><a href="#">茨城県</a></li>
<li><a href="#">栃木県</a></li>
<li><a href="#">群馬県</a></li>
<li><a href="#">埼玉県</a></li>
<li><a href="#">千葉県</a></li>
<li><a href="#">東京都</a></li>
<li><a href="#">神奈川県</a></li>
<li><a href="#">新潟県</a></li>
<li><a href="#">富山県</a></li>
<li><a href="#">石川県</a></li>
<li><a href="#">福井県</a></li>
<li><a href="#">山梨県</a></li>
<li><a href="#">長野県</a></li>
<li><a href="#">岐阜県</a></li>
<li><a href="#">静岡県</a></li>
<li><a href="#">愛知県</a></li>
<li><a href="#">三重県</a></li>
<li><a href="#">滋賀県</a></li>
<li><a href="#">京都府</a></li>
<li><a href="#">大阪府</a></li>
<li><a href="#">兵庫県</a></li>
<li><a href="#">奈良県</a></li>
<li><a href="#">和歌山県</a></li>
<li><a href="#">鳥取県</a></li>
<li><a href="#">島根県</a></li>
<li><a href="#">岡山県</a></li>
<li><a href="#">広島県</a></li>
<li><a href="#">山口県</a></li>
<li><a href="#">徳島県</a></li>
<li><a href="#">香川県</a></li>
<li><a href="#">愛媛県</a></li>
<li><a href="#">高知県</a></li>
<li><a href="#">福岡県</a></li>
<li><a href="#">佐賀県</a></li>
<li><a href="#">長崎県</a></li>
<li><a href="#">熊本県</a></li>
<li><a href="#">大分県</a></li>
<li><a href="#">宮崎県</a></li>
<li><a href="#">鹿児島県</a></li>
<li><a href="#">沖縄県</a></li>
</ul>
</div>

さらに、都道府県名のようにリストの選択肢が多くなるものは階層化したリストにすることも可能。

jQuery Mobile により階層毎のリストビューが自動的に作成される。

都道府県を地方別に折り畳んだメニューは以下のそのまま使えるサンプルコード。

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">都道府県から選択</li>
<li><a href="#">北海道</a></li>
<li>東北地方
<ul data-inset="true">
<li><a href="#">青森県</a></li>
<li><a href="#">岩手県</a></li>
<li><a href="#">宮城県</a></li>
<li><a href="#">秋田県</a></li>
<li><a href="#">山形県</a></li>
<li><a href="#">福島県</a></li>
</ul>
<li>関東地方
<ul data-inset="true">
<li><a href="#">茨城県</a></li>
<li><a href="#">栃木県</a></li>
<li><a href="#">群馬県</a></li>
<li><a href="#">埼玉県</a></li>
<li><a href="#">千葉県</a></li>
<li><a href="#">東京都</a></li>
<li><a href="#">神奈川県</a></li>
</ul>
<li>北陸地方
<ul data-inset="true">
<li><a href="#">新潟県</a></li>
<li><a href="#">富山県</a></li>
<li><a href="#">石川県</a></li>
<li><a href="#">福井県</a></li>
</ul>
<li>中部地方
<ul data-inset="true">
<li><a href="#">山梨県</a></li>
<li><a href="#">長野県</a></li>
<li><a href="#">岐阜県</a></li>
<li><a href="#">静岡県</a></li>
<li><a href="#">愛知県</a></li>
</ul>
<li>近畿地方
<ul data-inset="true">
<li><a href="#">三重県</a></li>
<li><a href="#">滋賀県</a></li>
<li><a href="#">京都府</a></li>
<li><a href="#">大阪府</a></li>
<li><a href="#">兵庫県</a></li>
<li><a href="#">奈良県</a></li>
<li><a href="#">和歌山県</a></li>
</ul>
<li>中国・四国地方
<ul data-inset="true">
<li><a href="#">鳥取県</a></li>
<li><a href="#">島根県</a></li>
<li><a href="#">岡山県</a></li>
<li><a href="#">広島県</a></li>
<li><a href="#">山口県</a></li>
<li><a href="#">徳島県</a></li>
<li><a href="#">香川県</a></li>
<li><a href="#">愛媛県</a></li>
<li><a href="#">高知県</a></li>
</ul>
<li>九州地方
<ul data-inset="true">
<li><a href="#">福岡県</a></li>
<li><a href="#">佐賀県</a></li>
<li><a href="#">長崎県</a></li>
<li><a href="#">熊本県</a></li>
<li><a href="#">大分県</a></li>
<li><a href="#">宮崎県</a></li>
<li><a href="#">鹿児島県</a></li>
</ul>
<li><a href="#">沖縄県</a></li>
</ul>

ただし、jQuery Mobileのデフォルトでは階層構造にしたリストにサブ項目が表示された時、Backボタン(戻るボタン)は表示されない。
そのままリストを辿るユーザーには問題無いが、前ページに戻りたいユーザーにはこのままでは不便。
そこでmobileinitで以下の設定をする。

<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>

場所はヘッダ内、jquery.mobileを読み込む前に入れることが必要。
これでBackボタン(戻るボタン)が自動的に付与される。

jQueryMobileよりも軽量なフレームワークの紹介

http://www.extjs.co.jp/products/touch/
Sencha Touch 2.0
世界初のHTML5対応JavaScriptフレームワークをうたうSencha Touch
2010/11/15よりSencha Touchの商用ライセンスが無料になった模様。

http://jqtouch.com
jQTouch
ウェブサイトでは更新が止まっているようで未だにiPhone3Gの画像を使っているうえ、フレームワークの内容もiPhone初期の頃のUIが見受けられる。

http://zeptojs.com
ZeptoはjQuery Mobileライクなフレームワーク
MITライセンス

http://www.jqmobi.com
従来より8倍軽量になったというjQ.Mobi
jQueryMobileの対抗はこれが本命といえるだろう。

CDNも用意されている(jQ.Mobi 1.11)

query selector libary
http://cdn.jqmobi.com/1.11/jq.mobi.min.js”>jq.mobi.min.js
library
http://cdn.jqmobi.com/1.11/jq.ui.min.js”>jq.ui.min.js

default theme
http://cdn.jqmobi.com/1.11/jq.ui.css”>jq.ui.css
carbon theme
http://cdn.jqmobi.com/1.11/jq.ui.carbon.css”>jq.ui.carbon.css
eco theme
http://cdn.jqmobi.com/1.11/jq.ui.eco.css”>jq.ui.eco.css
frosty theme
http://cdn.jqmobi.com/1.11/jq.ui.frosty.css”>jq.ui.frosty.css
slate theme
http://cdn.jqmobi.com/1.11/jq.ui.slate.css”>jq.ui.slate.css
volcano theme
http://cdn.jqmobi.com/1.11/jq.ui.volcano.css”>jq.ui.volcano.css
Vectory icon library
http://cdn.jqmobi.com/1.11/icons.css”>icons.css

jqUi style builderも用意されておりカラーカスタマイズが簡単にできる。
http://www.jqmobi.com/style.php

WordPressのスマホ用プラグインwp-pdaのカラーカスタマイズはこの方法

iPhone・Android等のスマートフォンに対応させるWordPress用のプラグインWordpress PDA & iPhone(wp-pda)はベースにJquery mobileを使用している。
そのためwp-pdaの配布ファイルでは、ウェブサイトを高速化するため、jquery、jquery mobileの各javascriptおよびスタイルシートcssはCDNで直接呼び出しており、CSSを使ったカスタマイズが分かりにくいという難点がある。
デフォルトでは黒いタイトルラインとブルー系のナビボタン、日付になっているが、これを変更したいと思うことは多いはず。
色の変更であれば、意外なほど簡単に配色をカスタマイズしてサイトのデザインを変えることが可能なので紹介。

修正するのは以下のファイル
wp-content/plugins/wp-pda/style.css

ファイルを開き、最後に以下のスタイルシートを追加する

.ui-btn-active,
.ui-bar-b,
.ui-bar-c {
background: #fff;
color: #fff;
font-weight: bold;
border: 1px solid #bf0059;
text-shadow: 0 -1px 1px #bf0059;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffbbca), to( #ff90a7));
background-image: -webkit-linear-gradient(#ffbbca, #ff90a7);
background-image: -moz-linear-gradient(#ffbbca, #ff90a7);
background-image: -ms-linear-gradient(#ffbbca, #ff90a7);
background-image: -o-linear-gradient(#ffbbca, #ff90a7);
background-image: linear-gradient(#ffbbca, #ff90a7);
}

各項目の解説

background:
ヘッダ、タイトル、ナビ選択状態の背景色

color:
ヘッダ、タイトル、ナビ選択状態の文字色

border:
回りのラインの色(同系色の濃いめにすると良い)

text-shadow:
タイトル文字の影(同系色の濃いめにすると良い)

background-image:
複数あるが、多くのブラウザに対応させるためのもの(同じ色で指定していく)

WordPress PDA & iPhone不具合修正(サブカテゴリ対応版)

WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) を新しいjQuery Mobileで使用すると、カテゴリー表示にした場合にレイアウトに不具合が発生する。
前回のエントリ『Wordpress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法』では、カテゴリを呼び出す階層を制限することで表示不具合に対処したが、サブカテゴリに辿り着けないのは不便なため、別の修正方法をとることにした。

前回修正してしまっている場合も、

<?php if($detectedPage=='categories') :?>
〜
<?php endif; ?>

をそのまま入れ替えればいい。

修正するのは、前回と同じ以下のファイル
/plugins/wp-pda/jqmobile-theme/index.php

オリジナル

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r|\t|> </", "", $categoriesHTML);
$categoriesHTML = str_replace("a> (",'a><span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")<ul class='children'>","</span><ul class='children'>",$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span></li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

に変更する。

この修正を施すことにより、カテゴリリストをタップすると、サブカテゴリが存在する場合はサブカテゴリ一覧、無い場合は該当カテゴリのファイル一覧が表示される。

WordPress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法

WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) は便利だが、jquery mobileのバージョンをjQuery Mobile 1.1や、新しいjQuery Mobile 1.2にすると、カテゴリー表示にした場合にレイアウトに不具合が発生する。

症状としては、エラー等で表示されない訳ではなく、サブカテゴリまであるカテゴリの表示部分に余分なテキスト等が表示されてしまい、表示が崩れてしまう。
階層が浅いサイトならば問題なく使える場合もあるだろうが、現実的にはこの表示バグを修正した方が良いだろう。

修正するのは以下のファイル
plugins/wp-pda/jqmobile-theme/index.php

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0'); $categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0&depth=1');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML; ?>
</ul>
</div>
<?php endif; ?>

のように修正。具体的には

$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');

の部分に「&depth=1」を入れて階層取得を1階層に制限するだけの話。

この1行を修正するだけで、表示バグは直る。

クリッカプルマップ対応Jqueryのみでツールチップ

ツールチップのJavascriptは数多くあるが、クリッカプルマップに対応したものが以外に少ない。
下のサンプルでは、他のJavascriptファイルを必要としないシンプルなTooltipでありながら以下の機能を備える。
  • 表示時のフェードインおよび速度の設定が可能。
  • 表示時の半透明(透明度)が設定可能。
  • マウス座標に対する表示位置が設定可能。
  • 画像を使わずツールチップの角丸が設定可能。
  • 文字サイズフォントの設定が自由。
スクリプトは以下の通り。
Jquery他、ファイルのダウンロードは不要。使いたいページの<body>内にスクリプトをそのまま丸ごとコピーするだけで簡単に実装できる。
【スクリプト】
JAVASCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
$(function(){
$('area.tooltip').mouseover(function(e){
$('div#' + e.target.id).css({opacity:0, display:'block'});
$('div#' + e.target.id).fadeTo('normal', 0.5);
});
$('area.tooltip').mousemove(function(e){
$('div#' + e.target.id).css('left', e.pageX + 20);
$('div#' + e.target.id).css('top', e.pageY - 50);
});
$('area.tooltip').mouseout(function(e){
$('div#' + e.target.id).css({display:'none'});
});
});
</script>

CSS

<style>
.tipText {
position: absolute;
padding: 10px;
background-color: #ffffff;
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tipText b {
font-size:20px;
}
</style>

HTML

<img src="bgt.gif" width="234" height="60" border="0" usemap="#Map" style="margin-left: 0px;" />
<map name="Map">
<area shape="circle" coords="208,28,20" href="javascript:void(0);" onClick="copen(1);" id="tip1" class="tooltip" />
<area shape="rect" coords="17,28,166,50" href="javascript:void(0);" onClick="copen(2);" id="tip2" class="tooltip" />
</map>
<div id="tip1" class="tipText" style="display:none;"><b>王様</b><br />(さらに容量が拡大されました)</div>
<div id="tip2" class="tipText" style="display:none;"><b>ハッスルサーバー</b><br />(おすすめのサーバーです)</div>

【設定(カスタマイズ)】

フェードイン・透明度
$(‘div#’ + e.target.id).fadeTo(‘normal’, 0.5);
速度は、”fast”、”normal”、”slow”、または完了までの時間をミリ秒
透明度は、0から1。薄いと読み辛くなるから0.5以上が好ましい
表示位置
$(‘div#’ + e.target.id).css(‘left’, e.pageX + 20);
$(‘div#’ + e.target.id).css(‘top’, e.pageY – 50);
上記ではマウスの位置右側20ピクセル離れた位置、上に50ピクセル上がった位置が基点となる。
背景色
background-color: #ffffff;
背景色を濃くした場合は文字色を白にするといい(color: #ffffff;を追加)
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
この指定で右側と下側に1ピクセルの線を設定している。
角丸
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
古いブラウザは四角のまま
フォントサイズ
font-size:20px;
<b>以外の部分にサイズを指定したい場合はtipText内に指定する
.tipText {
font-size:14px;
}

【指定方法】

クリッカプルマップ
  <area shape=”circle” coords=”208,28,20″ href=”javascript:void(0);” onClick=”copen(1);” id=”tip1″ class=”tooltip” />
クリッカプルマップのhrefはjavascript:void(0);とする
onClick=”copen(1);”
カッコ内の数字1から順に振っていく
id=”tip1″の数字も合わせる
この数字が表示される文字のIDに対応する
 class=”tooltip”必須
ツールチップ
<div id=”tip1″ class=”tipText” style=”display:none;”><b>王様</b><br />(さらに容量が拡大されました)</div>
id=”tip1″の数字がクリッカプルマップに設定したIDの数字に対応する
class=”tipText”必須
 style=”display:none;”で非表示にしておく

jcartのカート(買い物カゴ)をスクロールしてもついてくるようにする

前回の記事で、PHP+jQueryでつくられたDB不要のシンプルなプログラム『jcart』の商品削除にアラートを追加する方法を掲載したが、多くのショッピングカートにあってjcartに無い機能として、カート(買い物カゴ)がスクロールすると隠れてしまうことへの対応がある。

jcartはjqueryを使ったプログラムだから、この機能を追加するのは簡単。最小限の機能であればヘッダにJavascriptの一文を追加するだけでも可能だが、コントロールのし易さとオプションの使い易さを考え、jQuery Scroll Followを使うことにする。

『jQuery Scroll Follow』
http://kitchen.net-perspective.com/open-source/scroll-follow/

上記サイトに全てのデータが揃っているから簡単に導入できる。

ヘッダ内の

<script type="text/javascript" src="jcart/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jcart/js/jcart.js"></script>

の部分にui.core.js、jquery.scroll-follow.jsを追加

JAVASCRIPT

<script type="text/javascript" src="jcart/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jcart/js/ui.core.js"></script>
<script type="text/javascript" src="jcart/js/jquery.scroll-follow.js"></script>
<script type="text/javascript" src="jcart/js/jcart.js"></script>

さらに

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function (){
$('#kago').scrollFollow({speed:300, offset:30});
});
</script>

を追加。

speed:300, offset:30はオプションだから、デフォルトのままで構わないという人は

$('#kago').scrollFollow();

で良い。

speedはスクロール速度(ミリ秒)
offsetはスクロール後のブラウザの上部からのピクセル数
#kagoはスクロールさせたいアイテムのID
デフォルトのjcartではsidebarがこれに該当する。

スタイルシートの一例は以下

CSS

#kago{
float: right;
position: relative;
width: 220px;
margin: 0px;
padding: 0px;
}

HTMLサンプルコードは以下

HTML

<div id="kago">
<div id="jcart">
$jcart->display_cart();
</div>
</div>

以上で、jcartのショッピングカート(買い物カゴ)がスクロールについてくるようになる。

jCartでカート(買い物カゴ)内のアイテムを削除する際にアラートを出したい場合

PHP+jQueryでつくられたDB不要の簡単カート、jCartは、シンプルで導入も簡単だが、シンプルだけに省略された機能がある。
そのひとつがカートに入れた商品を削除する時。

カートの金額欄の下に表示されている削除ボタンの処理(config.phpの設定によりremove)
ユーザーに優しい設計にしたい場合、ボタンを押したらそのまま削除ではなく、確認用のアラートを表示したいところ。

普通に考えれば、リンクタグ(a href=〜)の場合はonclick=’return confirm()を追加してあげればいいので、

/jcart/jcart.php 内にある

echo tab(7) . "<a class='jcart-remove' href='?jcartRemove={$item['id']}'>{$config['text']['removeLink']}</a>€n";

の部分にonclickを追加し、

echo tab(7) . "<a class='jcart-remove' href='?jcartRemove={$item['id']}' onclick='return confirm(€"削除してよろしいですか?€")'>{$config['text']['removeLink']}</
a>€n";

のようにすればいいのだが、ajax環境下ではページ推移が無いこともあり、この方法では失敗しアラート画面が表示されることなく削除されてしまう。

jCartでカート(買い物カゴ)内のアイテムを削除する際にアラートを出したい場合は、以下の方法。

/jcart/js/jcart.js 内にある

function remove(link) {
// Get the query string of the link that was clicked
var queryString = link.attr('href');
queryString = queryString.split('=');
// The id of the item to remove
var removeId = queryString[1];
// Remove the item and refresh cart display
$.ajax({
type: 'GET',
data: {
"jcartRemove": removeId,
"jcartIsCheckout": isCheckout
}
});
}

にconfirm(‘削除してよろしいですか?’)を追加し、返り値がtrueだったら、削除を実行するようにする。

function remove(link) {
// Get the query string of the link that was clicked
var queryString = link.attr('href');
queryString = queryString.split('=');
// The id of the item to remove
var removeId = queryString[1];
if(confirm('削除してよろしいですか?')){
// Remove the item and refresh cart display
$.ajax({
type: 'GET',
data: {
"jcartRemove": removeId,
"jcartIsCheckout": isCheckout
}
});
}
}

これにより、商品選択ページの右に表示されるカートの「削除(remove)」リンク、およびcheckout.phpページのアイテム表示の「削除(remove)」リンク、どちらもリンクをクリックした時アラート画面が表示されるようになる。