- PR -

JavaScriptの外だしについて

1|2 次のページへ»
投稿者投稿内容
hiro
会議室デビュー日: 2007/08/10
投稿数: 18
投稿日時: 2007-08-13 09:45
お世話になっております。
ModalPopUpについて学習をしています。
以下のコードで実装しました。
問題なく実行出来ています。

コード：----------------------------------------------------
<head runat="server">
<title>無題のページ</title>
<script language="javascript" type="text/javascript">
<!--
function onOk(){
name = document.getElementById('TextBox2').value
document.getElementById('TextBox1').value = name
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
&nbsp;
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:scriptmanager>
</div>
<asp:TextBox ID="TextBox1" runat="server" Width="230px"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" runat="server">名前を入力</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" BackColor="#FFC080" Height="106px" Width="322px">
<br />
名前を入力して下さい。<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="OK" />
<asp:Button ID="Button2" runat="server" Text="NG" /></asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Button2"
DropShadow="True" OkControlID="Button1" OnOkScript="onOk()" PopupControlID="Panel1"
TargetControlID="LinkButton1" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</form>
</body>

次の段階で、JavaScriptを外だし使用と思い以下の実装を行ないました。
実行した時点で、「構文エラーです」、「オブジェクトを指定して下さい」の
エラーが表示されます。
ScriptManagerのJavaScriptの指定方法を変えたのですが、
現象は変わりませんでした。

以下の現象の対処方法がありましたら、教えて下さい。
宜しくお願い致します。

コード：----------------------------------------------------
<head runat="server">
<title>無題のページ</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<scripts>
<asp:scriptreference resourceuicultures="ja-JP,en-US" path="Scripts/RepChg.js"></asp:scriptreference>
</scripts>
</asp:scriptmanager>

<asp:TextBox ID="TextBox1" runat="server" Width="230px"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" runat="server">名前を入力</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" BackColor="#FFC080" Height="106px" Width="322px">
<br />
名前を入力して下さい。<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="OK" />
<asp:Button ID="Button2" runat="server" Text="NG" /></asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Button2"
DropShadow="True" OkControlID="Button1" OnOkScript="onOk()" PopupControlID="Panel1"
TargetControlID="LinkButton1" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</form>
</body>


// JScript ファイル　Scripts配下、RepChg.js

<script language="javascript" type="text/javascript">
<!--
function onOk(){
name = document.getElementById('TextBox2').value
document.getElementById('TextBox1').value = name
}
-->
</script>
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2007-08-13 10:11
引用:

hiroさんの書き込み (2007-08-13 09:45) より:
コード:
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <scripts>           
                <asp:scriptreference resourceuicultures="ja-JP,en-US" path="Scripts/RepChg.js"></asp:scriptreference>
            </scripts>
        </asp:scriptmanager>


ModalPopUp Extender から呼び出す前に普通の HTML から関数が呼び出されるかを試したらどうなりますか？
<input type="button" onclick="onOk()" /> みたいな感じで。
これができないなら登録が間違っていますよね。

ScriptReference を直に ScriptManager の Scripts に登録したときは単なるリンクが作られるはずなので、 HTML 側に <script src="Scripts/RepChg.js" type="text/javascript"></script> が吐き出されていると思いますが、このファイルは参照できますか？

_________________
かるあ のメモ と スニペット
kuma
大ベテラン
会議室デビュー日: 2004/02/25
投稿数: 110
投稿日時: 2007-08-13 11:44
新しいことに挑戦することは好ましいことですが
基本的なことを知らなくていいわけではありません。
今回の場合であればHTMLの<script/>の使い方をしっかりと身に付けましょう。
chack
常連さん
会議室デビュー日: 2002/11/18
投稿数: 48
お住まい・勤務地: 埼玉県
投稿日時: 2007-08-13 13:51
引用:
// JScript ファイル　Scripts配下、RepChg.js

<script language="javascript" type="text/javascript">
<!--
function onOk(){
name = document.getElementById('TextBox2').value
document.getElementById('TextBox1').value = name
}
-->
</script>


.js ファイルに<script>タグも書いているのですか？
.js ファイルには<script>タグは不要ですよ。


コード:
// JScript ファイル　Scripts配下、RepChg.js 
function onOk(){ 
  var name = document.getElementById('TextBox2').value;
  document.getElementById('TextBox1').value = name;
}


または

コード:
function onOk(){ 
  $get('TextBox1').value = $get('TextBox2').value;
}


でどうでしょう。
hiro
会議室デビュー日: 2007/08/10
投稿数: 18
投稿日時: 2007-08-13 13:52
返信ありがとうございます。

JavaScriptファイルを変更しました。
問題なく動きました。
ありがとうございました。

コード：-------------------------------------
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<scripts>
<asp:scriptreference resourceuicultures="ja-JP,en-US" path="Scripts/RepChg.js"></asp:scriptreference>
</scripts>
</asp:scriptmanager>
<asp:TextBox ID="TextBox1" runat="server" Width="230px"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" runat="server">名前を入力</asp:LinkButton>
<input type="button" onclick="onOk()" />
<asp:Panel ID="Panel1" runat="server" BackColor="#FFC080" Height="106px" Width="322px">
<br />
名前を入力して下さい。<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="OK" />
<asp:Button ID="Button2" runat="server" Text="NG" /></asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Button2"
DropShadow="True" OkControlID="Button1" OnOkScript="onOk()" PopupControlID="Panel1"
TargetControlID="LinkButton1" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</form>

JavaScript=====================================
function onOk(){
name = document.getElementById('TextBox2').value
document.getElementById('TextBox1').value = name
}




To kumaさん
　おっしゃるとおりですね。
　Scriptの使い方も、合わせて学習しようと思います。
　ありがとうございます。
hiro
会議室デビュー日: 2007/08/10
投稿数: 18
投稿日時: 2007-08-13 23:14
申し訳ありませんが、もう１点、確認させて下さい。

マスターページを作成し、
正常に動いていたコードを書いたところ、
「オブジェクトがありません。」とエラーが出ます。
ScriptManagerとScriptManagerProxyでは、JavaScriptの
指定方法が違うのでしょうか？

マスターページには、ScriptManagerを配置しただけです。
JavaScriptの変更はしていません。

コード:-----------------------------------------
<asp:ScriptManagerProxy id="ScriptManagerProxy1" runat="server">
<scripts>
<asp:scriptreference resourceuicultures="ja-JP,en-US" path="Scripts/RepChg.js"></asp:scriptreference>
</scripts>
</asp:ScriptManagerProxy>
<asp:TextBox ID="TextBox1" runat="server" Width="230px"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" runat="server">名前を入力</asp:LinkButton>
<input type="button" onclick="onOk()" />
<asp:Panel ID="Panel1" runat="server" BackColor="#FFC080" Height="106px" Width="322px">
<br />
名前を入力して下さい。<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="OK" />
<asp:Button ID="Button2" runat="server" Text="NG" /></asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Button2"
DropShadow="True" OkControlID="Button1" OnOkScript="onOk()" PopupControlID="Panel1"
TargetControlID="LinkButton1" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>

JavaScript=====================================
function onOk(){
name = document.getElementById('TextBox2').value
document.getElementById('TextBox1').value = name
}
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2007-08-14 09:17
引用:

hiroさんの書き込み (2007-08-13 23:14) より:

マスターページを作成し、
正常に動いていたコードを書いたところ、
「オブジェクトがありません。」とエラーが出ます。
ScriptManagerとScriptManagerProxyでは、JavaScriptの
指定方法が違うのでしょうか？

同じです。
コンテンツページのディレクトリが代わって Script へのリンクが壊れたということはありませんか？
前回も書きましたが、まずは出力された HTML を元に単純な例から試していくといいと思います。
_________________
かるあ のメモ と スニペット
chack
常連さん
会議室デビュー日: 2002/11/18
投稿数: 48
お住まい・勤務地: 埼玉県
投稿日時: 2007-08-14 10:34
マスタページの ContentPlaceHolder に配置したWebフォーム(aspx)では、
サーバコントロールの ID が、実行時に変更されます。

（ここ、結構はまるところ。かるあさんがおっしゃっているように、
出力された HTML を見てみましょう。）

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

は、

<input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" id="ctl00_ContentPlaceHolder1_TextBox1" />

となります。

解決策は、サーバコントロールの TextBox にする必要がなければ、
通常の HTML の input 要素で指定します。

<input id="TextBox1" type="text" />

もしくは、サーバコントロールの TextBox を使用する必要があるのであれば、スクリプトを下記のように変更します。

コード:
function onOk(){
  var name = document.getElementById('ctl00$ContentPlaceHolder1$TextBox2').value;
  document.getElementById('ctl00$ContentPlaceHolder1$TextBox1').value = name;
}



＃MSDN フォーラムにもマルチポストされていましたが、できるだけ控えましょうね。
http://forums.microsoft.com/MSDN-JA/ShowPost.aspx?PostID=2000804&SiteID=7
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）