Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

Re-execute Javascript function in ASP.NET Ajax UpdatePanel

Pernah coba kode berikut :

<%@ Page Language="C#" 
        AutoEventWireup="true" 
        CodeBehind="Default.aspx.cs" 
        Inherits="WebApplication5._Default" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        function HelloWorld()
        {
            alert('Hello World');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script language="javascript" type="text/javascript">
            HelloWorld();
        </script>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

Hasilnya bisa ditebak :

  • Saat halaman diakses pertama kali (atau di-refresh) akan menampilkan dialog box seperti pada gambar di bawah.
  • Saat tombol diklik maka dialog box akan kembali bisa dilihat, bukan karena tombol yang mengeksekusinya, tetapi karena halaman melakukan 'full-postback' yang membuat halaman di-reload secara keseluruhan dan membuat fungsi HelloWorld() dieksekusi ulang.

Capture

Bagaimana kalau kode di atas dimodifikasi seperti berikut :

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <script language="javascript" type="text/javascript">
                    HelloWorld();
                </script>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

Hasilnya adalah sebagai berikut :

  • Seperti hasil di atas, ketika halaman di-load maka fungsi HelloWorld() akan terpanggil.
  • Ketika tombol diklik maka yang terjadi UpdatePanel akan terupdate, maka fungsi HelloWorld() tidak akan tereksekusi alias dialog box seperti diatas tidak akan dilihat lagi. Ada yang tau sebabnya kenapa?

Apa hal di atas ada kemungkinan mengganggu kita nantinya ? Coba perhatikan kasus berikut :

Misal saya menggunakan TinyMCE untuk membuat rich text editor seperti berikut :

Capture1

Maka akan digunakan bari kode seperti berikut :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <script type="text/javascript">
        tinyMCE.init({
            mode : "textareas",
            theme : "advanced"
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="15" Columns="80" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

Dengan kode di atas maka prilakunya akan seperti contoh pemanggilan fungsi HelloWorld() tanpa menggunakan UpdatePanel milik ASP.NET Ajax. Bagaimana bila control TextBox dan Button berada di antara UpdatePanel seperti baris kode berikut ?

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="15" Columns="80" runat="server"></asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

Saat halaman diload pertama kali hasilnya akan dilihat rich text editor seperti pada gambar di atas, lalu bila tombol Button1 diklik hasilnya akan seperti gambar berikut :

Capture2

Tidak ada lagi rich text editor, hal ini dikarenakan saat area UpdatePanel di-update fungsi Javascript tinyMCE.init() tidak dipanggil untuk mengubah textarea menjadi rich text editor.

Kasus lain adalah bila menggunakan Visifire di dalam UpdatePanel, dipastikan akan ada masalah seperti di atas juga, karena untuk menampilkan chart Visifire diperlukan kode Javascript seperti berikut :

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div id="VisifireChart0">
                <script type="text/javascript" > 
                    var vChart1 = new Visifire('Visifire.xap',450,300);
                    vChart1.setDataUri("Column2D6.xml");
                    vChart1.render("VisifireChart0");
                </script>
                </div>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Dipastikan setelah tombol diklik, chart tidak akan terlihat lagi dihalaman web anda.

Solusi yang biasa digunakan adalah menulis baris berikut dibawah baris UpdatePanel.

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest( endRequest );
function endRequest( sender, e ) 
{
   // kode untuk memanggil fungsi Javascript
}
</script>

Untuk kasus TinyMCE maka kode barisnya adalah seperti berikut :

<head runat="server">
    <title>Untitled Page</title>
    <script src="jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <script type="text/javascript">
        tinyMCE.init({
            mode : "textareas",
            theme : "advanced"
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="15" Columns="80" runat="server"></asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest( endRequest );
        function endRequest( sender, e ) 
        {
            tinyMCE.init({
            mode : "textareas",
            theme : "advanced"
            });
        }
        </script>
    </div>
    </form>
</body>

Sedangkan untuk kasus Visifire adalah sebagai berikut :

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="VisifireChart0">
        <script type="text/javascript" > 
            var vChart1 = new Visifire('Visifire.xap',450,300);
            vChart1.setDataUri("Column2D6.xml");
            vChart1.render("VisifireChart0");
        </script>
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest( endRequest );
function endRequest( sender, e ) 
{
    var vChart1 = new Visifire('Visifire.xap',450,300);
    vChart1.setDataUri("Column2D6.xml");
    vChart1.render("VisifireChart0");
}
</script>

Selebihnya tinggal anda sendiri yang berkreasi untuk menyesuaikan dengan kebutuhan :)

{Thanks to Jaya yang menemukan trik ini}

Share this post: | | | |

Comments

cahnom said:

Bisa juga tambahkan script di code-behind handler Button1.Click untuk execute script.

ScriptManager.RegisterStartupScript(this, typeof(string), "MyScript", "tinyMCE.init({mode : 'textareas',theme : 'advanced'});", true);

# May 7, 2008 9:05 AM

Use Visifire Silverlight Control on an UpdatePanel « Andrew Whitten’s Team System & WCF blog said:

Pingback from  Use Visifire Silverlight Control on an UpdatePanel &laquo; Andrew Whitten&#8217;s Team System &amp; WCF blog

# May 29, 2008 10:00 AM

Andrew said:

Thanks! That was what I was looking for

# May 29, 2008 10:04 AM

cahnom said:

Lebih bagus tinyMCE.init fitaruh di pageLoad daripada di endRequest. Kalo ditaruh di pageLoad, tinyMCE.ini yang di atas (dalam head) tidak perlu ditulis. Jadi tidak perlu menulis 2x.

# June 20, 2008 7:43 AM