- PR -

TabStripコントロールでのConfirmについて

1
投稿者投稿内容
ゆっきー
ベテラン
会議室デビュー日: 2006/04/21
投稿数: 65
投稿日時: 2006-05-12 14:59
TabStripコントロールを使用して、WEBのメニュー画面を作成しています。

メニューの表示まではできているのですが、onSelectedIndexChangeイベントで編集中の場合は、Javascriptのconfirmでメッセージを表示して、キャンセルボタンが押された場合は、イベントをキャンセルし、OKボタンがクリックされた場合はページを移動するという機能を追加しようとしていますがうまくいきません。

TabStripコントロールに「Attributes.Add("onSelectedIndexChange",・・・」をコードで記述した場合、ソースの表示で見ると、onSelectedIndexChangeが前記のものと.netが勝手に作成したものと2つ存在しています。メッセージは表示されるので、イベントは実行されているようですが、前記のものだけが実行されているのか、.netが作成したものも実行されて、イベントが2回実行されているためなのかは不明です。
onMouseDownやonClickも試してみたのですが、結果は同じでした。
回避方法をご存知の方、アドバイスよろしくお願いします。

デザイン部
<iewc:TabStrip id="Tab_Menu" runat="server" TabSelectedStyle="background-color:#ffffff;color:#000000"
TabHoverStyle="background-color:#FA8072;"
TabDefaultStyle="background-color:#FFE4E1;font-family:verdana;font-weight:bold;font-size:10pt;color:#ffffff;width:79;height:21;text-align:center;">
<iewc:Tab Text="Tab 1"></iewc:Tab>
<iewc:TabSeparator></iewc:TabSeparator>
<iewc:Tab Text="Tab 2"></iewc:Tab>
<iewc:TabSeparator></iewc:TabSeparator>
<iewc:Tab Text="Tab 3"></iewc:Tab>
</iewc:TabStrip>

コード部
Tab_Menu.Attributes.Add"onSelectedIndexChange", "javascript:SelectedIndexChange(event);")

Jsファイル
function SelectedIndexChange(e)
{
if (!confirm('編集中のデータを破棄して別メニューへ移動します。よろしいですか?'))
{
e.cancel = true;
}
}

イベントのキャンセルではなくAttributeに直接書き込んでもダメでした・・・。
Tab_Menu.Attributes.Add("onSelectedIndexChange", "javascript:if (!confirm('編集中のデータを破棄して別メニューへ移動します。よろしいですか?')) false;")
未記入
ベテラン
会議室デビュー日: 2003/06/26
投稿数: 76
投稿日時: 2006-05-12 15:35
TabStripコントロールって使ったことないけど、こんな感じじゃ駄目ですか?

コード部
Tab_Menu.Attributes.Add("onSelectedIndexChange", "javascript:if(!SelectedIndexChange()) return false;")

Jsファイル
function SelectedIndexChange()
{
return confirm('編集中のデータを破棄して別メニューへ移動します。よろしいですか?'));
}


 onSelectedIndexChangeイベントの後ろに追加されるJavaScript(...もしかしたら__doPostBack)を実行しないようにしてみただけですが....。
 一度、展開されたHTMLソースを参照してみればいいのではないでしょうか。
ゆっきー
ベテラン
会議室デビュー日: 2006/04/21
投稿数: 65
投稿日時: 2006-05-12 15:55
さっそくのアドバイスありがとうございます。

試してみたところ、エラーはでませんがSelectedindexイベントはキャンセルされていないようで、外観の色などがTabSelectedStyleで設定したものに変わってしまいます。
イベントのキャンセルは無理なんでしょうか・・・。
未記入
ベテラン
会議室デビュー日: 2003/06/26
投稿数: 76
投稿日時: 2006-05-12 17:10
展開されたHTMLソースは確認されましたか?
意図したように展開されてます?

"javascript:if(!SelectedIndexChange()) return false;"
ではなくて
"if(!SelectedIndexChange()) return false;"
のほうが正解かな〜。

 もしよろしければ、onSelectedIndexChangeイベントに展開されたHTMLソースなど貼り付けてくれれば回答しやすいかも...

 会社では、不必要なツールをインストールできないから、確かめようがなくて...。
あっ、会社から投函していることは内緒だぜ〜!
ゆっきー
ベテラン
会議室デビュー日: 2006/04/21
投稿数: 65
投稿日時: 2006-05-12 17:52
意図したように設定はされているようですが、onSelectedIndexChangeが自作の分と.Netが勝手に作成したものと2種類入っています。

以下、TabStrip部分のHTMLソースです。
よろしくお願いします。

<?XML:NAMESPACE PREFIX="TSNS" /><?IMPORT NAMESPACE="TSNS" IMPLEMENTATION="/webctrl_client/1_0/tabstrip.htc" />
<TSNS:TabStrip id="Uc_MenuEventBV_Tab_Menu" onSelectedIndexChange="javascript:if(!SelectedIndexChange()) return false;" selectedIndex="0" sepDefaultImageUrl="./Images/sketch_sep.gif" tabDefaultStyle="background-color:lightblue;font-weight:normal;color:#ffffff;text-align:center;width:120;height:35;font-size:10pt;" tabHoverStyle="background-color:cornflowerblue;font-weight:bold;color:white;" tabSelectedStyle="background-color:#ccffff;color:#000000;font-weight:bold;" onSelectedIndexChange="JScript:document.Form1.__Uc_MenuEventBV_Tab_Menu_State__.value=event.index;if (getAttribute('_submitting') != 'true'){setAttribute('_submitting','true');try{__doPostBack('Uc_MenuEventBV$Tab_Menu','');}catch(e){setAttribute('_submitting','false');}}" onwcready="JScript:try{document.Form1.__Uc_MenuEventBV_Tab_Menu_State__.value=selectedIndex}catch(e){}">
未記入
ベテラン
会議室デビュー日: 2003/06/26
投稿数: 76
投稿日時: 2006-05-12 18:20
 お〜、ビヘイビアなのですね、TabStrip。

 onSelectedIndexChangeイベントが二つ作成されるのは問題ですね。それで、追加したJavaScriptが実行されないのではないかと...。
 う〜ん、BodyタグのOnLoadでonSelectedIndexChangeイベントを乗っ取るなど強引な手口しかないのでは?

 お力になれなくて済みませんでした。研究して、回答を発見したらUPさせていただきます〜(ToT)
ゆっきー
ベテラン
会議室デビュー日: 2006/04/21
投稿数: 65
投稿日時: 2006-05-12 18:40
こちらこそいろいろとアドバイスありがとうございました〜。

いろいろ試行錯誤しても厳しかったので、とりあえずDataListを使ってTabStripもどきを自作してみようかなと思います。

まだまだ精進せねば・・・。
1

スキルアップ/キャリアアップ(JOB@IT)