Reyza

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

Public

May 2008 - Posts

AJAX Control Toolkit on Mono Video from YouTube

AJAX Control Toolkit dijalankan dengan Mono? Bisa? Masa? Ngga percaya? Lihat saja video dari Youtube yang saya embed di posting blog ini.

http://www.youtube.com/v/cjMQOTwhOjM <p><a href="http://www.youtube.com/v/cjMQOTwhOjM" target="_blank">http://www.youtube.com/v/cjMQOTwhOjM</a></p>

View original media here: http://youtube.com/watch?v=cjMQOTwhOjM

Pasti pengen bisa juga kan meng-embed video Youtube pada posting blog sendiri? Caranya cukup dengan sintax berikut :

Capture

Selamat mencoba, tapi gunakan dengan BIJAK ya...jangan gunakan dengan NAFSU :)

Share this post: | | | |
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: | | | |
www.KillWithMe.com

Pernah mengunjungi http://www.killwithme.com ? Ketika kita memasuki website ini kita akan melihat tampilan seperti berikut :

Capture1

Lalu? Seperti biasa begitu kita melihat kata "Enter" maka langsung akan diklik, tanpa memperhatikan tulisan lainnya, walaupun ada pertanyaan seperti gambar di atas "Kill with me?". Setelah tombol "Enter" diklik maka banyak website akan memberikan warning, misalnya bila mengunjungi situs dewasa maka akan ada warning bahwa yang boleh mengakses ini hanya yang sudah berumur di atas 18 tahun (misalnya). Tetapi pasti kita tidak perduli akan itu, pasti langsung HB (hajaaaaaaaar bleeeeeeeeeeeeeeeeeeeeh).

Begitu juga disitu ini, akan ada perintangan bila masuk ke situs ini akan menyakiti orang yang tidak berhasah. Tapi? teteeeep...HB. Kenapa? Pertama, siapa yang tau sih kita mengakses situs walau persaratan tidak terpenuhi (misal : umur), kedua ... "kan pengen tauuuu....penasaran.......", tipikal manusia ketika dilarang makin penasaran dan makin ingin melakukan.

Capture2

Lalu apa yang saya lakukan ketika ada peringantan ketika mengakses situs ini ? Anda tidak perlu bertanya dan menebak saya melakukan apa? Cukup lihat gambar selanjutnya :

Capture

Sudah Terjawab?

Where are your morals?

Bagaimana dengan Anda? Apakah saat melenggang di internet Anda juga tidak membawa moral?

Ini adalah inti dari film "Untraceable".

Keyword : {Situs, Website, Hit, Counter, Penasaran, Banyak pengunjung, Semakin banyak pengunjung semakin cepat hal itu terjadi, Semakin banyak pengunjung semakin senang bagi yang memiliki situs, Film terakhir minggu ini, lagi-lagi cuma posting blog yang tidak ada sangkut pautnya dengan tempat ini}

Share this post: | | | |
Posted: May 04 2008, 02:53 PM by reyza | with 8 comment(s) |
Filed under: ,