- PR -

ajaxToolkit:ModalPopupExtenderをjavascriptで実行したいのです。

投稿者投稿内容
由加
常連さん
会議室デビュー日: 2008/04/02
投稿数: 34
投稿日時: 2008-04-16 09:46
お早うございます。
昨日に続いての質問で申し訳ありません。

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=44418&forum=7
で、GridViewのボタンでポストバックを無くすことはできました。ありがとうございました。
続きがあって、最終的に行いたいことは、GridViewの値をjavascriptで隠しテキストボックスに入れ、その後、同じくjavascriptでボタンを押し、ModalPopupExtenderを表示したい(隠しテキストボックスに入れた値を引数にDynamicServiceMethodを実行しModalPopupExtenderを更新して表示)、のです。
イメージとしては、GridViewの行を選択すると、その行に応じた値が入れられたModalPopupExtenderを表示したいのです。
昨日の続きで、javascriptでTargetControlIDをクリックすると、「無効なポストバックまたはコールバック引数です」と、エラーとなってしまいます。
試しにGridViewの代わりにただのServerボタンを作って(<INPUT>タグではTargetControlIDとして認識できないので)、javascriptで実行したのですが、この場合もサーバにポストされてしまい、ModalPopupExtenderが表示されてしまいます。
ModalPopupExtenderのTargetControlIDを複数してして、GridViewのRowDataBound時に追加できるか、javascriptでうまく動作できればよいのですが、
方法がみあたりません。
どなたかご存知の方がおりましたら、ご教授お願いします。
お願いばかりですいません。
私も早く答える側になりたいです。・・・でも、私の稚拙な質問に比べて高度なものばかりで、まだまだ答えられず。結果の報告ぐらいが精一杯です。



[ メッセージ編集済み 編集者: 由加 編集日時 2008-04-16 09:47 ]
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2008-04-16 12:57
引用:
試しにGridViewの代わりにただのServerボタンを作って(<INPUT>タグではTargetControlIDとして認識できないので)、

<INPUT runat="server" とすればTargetControlIDにできませんでしたっけ。

ちなみにGridViewをTargetControlにすることもできます。普通のセルをクリックしても
ポップアップが出てきたりしちゃいますが。
由加
常連さん
会議室デビュー日: 2008/04/02
投稿数: 34
投稿日時: 2008-04-16 13:24
ありがとうございます。
<INPUT runat="server"
とやったら、確かにTargetControlIDとして認識できました。
一歩前進で、これならjavascriptでそのボタンを押しても、
ModalPopupExtenderがちゃんと表示されました。
ですが、やはりGridViewのボタンでjavascriptを実行すると、
「無効なポストバック」としてエラーとなってしまいます。
引用:

ちなみにGridViewをTargetControlにすることもできます。普通のセルをクリックしても
ポップアップが出てきたりしちゃいますが。


この発想自体、私にはありませんでした。
ただ、他の列のセルをクリックしても反応してしまうのは、厳しいですね。う〜ん。
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2008-04-16 14:00
引用:
ですが、やはりGridViewのボタンでjavascriptを実行すると、
「無効なポストバック」としてエラーとなってしまいます。

それは
引用:
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=44418&forum=7
で、GridViewのボタンでポストバックを無くすことはできました。ありがとうございました。

こちらで解決済みと思ってました。このときと何が違いますか?
一度、ページを最初から作り直してみるとか。当方ではポストバックしたときでも「無効な〜」は出ません。
由加
常連さん
会議室デビュー日: 2008/04/02
投稿数: 34
投稿日時: 2008-04-16 17:02
こんにちは。
ありがとうございます。
引用:

こちらで解決済みと思ってました。このときと何が違いますか?


はい。GridViewでjavascriptを実行し、ポストバックされないボタンを作ることは、おかげでできました。
やりたいことの流れとしては、
GridViewでボタンを押下→javascriptを実行し、テキストボックスに値を入れる→javascriptでModalPopupExtenderのTargetControlIDとなるボタンを押下→ModalPopupを表示
です。
GridViewでボタンを押下した際にjavascriptでテキストボックスに値を入れることはできます。
また、単純にjavascriptでTargetControlIDとなるボタンを押下し、ModalPopupを表示させることもできました。
但し、GridViewでボタンを押下し、その際実行されるjavascriptで、テキストボックスに値を入れ、TargetControlIDとなるボタンを押下させると、「無効なポストバック」となってしまいます。
javascriptは、
コード:
document.getElementById('txtCode').innerText=val;
document.getElementById('ctl00_ContentPlaceHolder1_btn').Click();


です。

よろしくお願いします。
由加
常連さん
会議室デビュー日: 2008/04/02
投稿数: 34
投稿日時: 2008-04-16 17:15
すいません。自己レスです。
javascriptのClickの記述をclickにしたら、うまく動作しました。
この違いでなぜ「無効なポストバック」となるかは、不明ですが、
一応解決しました。
ありがとうございました。
つまらないオチですいません。
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2008-04-18 05:47
引用:

javascriptのClickの記述をclickにしたら、うまく動作しました。
この違いでなぜ「無効なポストバック」となるかは、不明ですが、
一応解決しました。



ちょっと、興味があるのでよろしければソースコードを掲載していただけませんか。
どこをどのように書き換えたのですか?
_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
由加
常連さん
会議室デビュー日: 2008/04/02
投稿数: 34
投稿日時: 2008-04-18 09:46
おはようございます。

コード:
<script language="javascript" type="text/javascript">
<!--
    function Push(val)
    {
        document.getElementById('ctl00_ContentPlaceHolder1_txtCode').innerText=val;
        document.getElementById('ctl00_ContentPlaceHolder1_btnGo').click();
        document.getElementById('ctl00_ContentPlaceHolder1_btnA').click();
    }
-->
</script>



<asp:GridView runat="server" ID="grd" EnableViewState="true" CellPadding="3" AutoGenerateColumns="false" AllowSorting="false" Width="315px" OnRowDataBound="grd_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <HeaderStyle Width="40%" />
            <ItemStyle Width="40%" HorizontalAlign="Center"/>
            <ItemTemplate>
                <asp:Label runat="server" ID="lblCode" Text='<%# DataBinder.Eval(Container,"DataItem.id") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="data" HeaderText="data" >
            <ItemStyle HorizontalAlign="Left" Width="40%" />
            <HeaderStyle Width="40%" />
        </asp:BoundField>
        <asp:TemplateField HeaderText="詳細">
            <HeaderStyle Width="20%" />
            <ItemStyle Width="20%" HorizontalAlign="Center" />
            <ItemTemplate>
                <asp:Button runat="server"  ID="btnDetail" Text="詳細" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="ボタン">
            <HeaderStyle Width="20%" />
            <ItemStyle Width="20%" HorizontalAlign="Center" />
            <ItemTemplate>
                <input type="button" id="btnDe" value="ボタン" />   
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:ScriptManager runat="server" ID="mgrBtn">
</asp:ScriptManager>
<asp:Panel runat="server" ID="pnlBk">
    <asp:Panel runat="server" ID="pnlPop" Wrap="False" BackColor="#FFFFFF">
         <asp:UpdatePanel runat="server" ID="pnl1">
         <ContentTemplate>
         <asp:GridView runat="server" ID="sgrd" EnableViewState="true" CellPadding="3" AutoGenerateColumns="false" AllowSorting="false" Width="315px">
            <Columns>
                <asp:TemplateField HeaderText="ID">
                <HeaderStyle Width="40%" />
                <ItemStyle Width="40%" HorizontalAlign="Center"/>
                <ItemTemplate>
                    <asp:Label runat="server" ID="lblCode" Text='<%# DataBinder.Eval(Container,"DataItem.id") %>'></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="data" HeaderText="data">
                <ItemStyle HorizontalAlign="Left" Width="40%" />
                <HeaderStyle Width="40%" />
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <asp:TextBox runat="server" ID="txtCode" Width="0px" Height="0px" ></asp:TextBox>
        </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnA" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button runat="server" ID="btnPOk" Text="はい" ValidationGroup="fileVali" /><asp:Button runat="server" ID="btnPCan" Text="いいえ" />
    </asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="popYn" BackgroundCssClass="modalBackground" TargetControlID="btnGo" PopupControlID="pnlBk" OkControlID="btnPOk" OnOkScript="mdlOk" CancelControlID="btnPCan" OnCancelScript="mdlCan">
</ajaxToolkit:ModalPopupExtender>
<asp:Button runat="server" ID="btnGo" Text="" Width="0px" Height="0px" OnClick="btnGo_Click"/>



  protected void grd_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowIndex >= 0)
        {
            string strFunc;
            strFunc = "Push(" + e.Row.RowIndex.ToString() + ");return false";
            ((Button)e.Row.FindControl("btnDetail")).OnClientClick = strFunc;
        }
    }




です。
javascriptの
click()をClick()にすると、無効なポストバックとなってしまい、
click()では、あくまで見た目上ですが、正常に動きます。
何か原因のようなものはわかりますでしょうか。

よろしくお願いします。

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