none
Passing Data melalui Javascript RRS feed

  • Pertanyaan

  • Teman-teman mohon bantuannya.

    Saya melakukan Query dan hasilnya ditampilkan pada GridView. Pada GridView tersebut, saya memasukkan Radio Button, untuk User pilih baris yang dikehendaki. Dan setelah itu klik Button Laporan. Untuk menampilkan Laporan pada New Window/New Tab.

    Contoh Seperti gambar dibawah ini:

    Masalah saya saat ini, belum bisa Passing Kode cabang yang dipilih seperti gambar diatas. ke Halaman Web yang lain.

    Saya menggunakan Javascript seperti dibawah ini:

    function passnewwindow() {
            
            var param = document.getElementById(Request.Form("myRadio")).innerHTML;
            javascipt: window.open("WFLapDetailJual.aspx?Kode=" + param);
        }

    Terima kasih.

    Kamis, 27 September 2012 15.21

Jawaban

  • File JavaScript Anda ditaruh di mana? Saya tidak melihat file/kode javascript di halaman .ASPX Anda.

    Anda bisa ubah kode .ASPX di atas menjadi:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table>
            <tr>
                <td>
    <div id="grid">
                    <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
    </div>
                </td>
            </tr>
                        <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="navigate()" />
                </td>
            </tr>
            </table>
        </div>
        </form>
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="file-javascript-anda.js" type="text/javascript"></script>
    </body>
    </html>

    Dalam kode di atas, saya tambahkan <div id="grid"> di luar <asp:GridView />. Kode tersebut berfungsi untuk mempermudah mencari elemen GridView dengan jQuery, karena ID GridView yang dirender di klien akan berubah (Bisa dilihat di browser dengan klik kanan -> "View Source"). Di akhir file .aspx ditambahkan javascript file jQuery dan file-javascript-anda.js

    Sebelumnya Anda harus download library jQuery dari http://jquery.com/. File jQuery dan file-javascript-anda.js simpan di tempat yang sama dengan file .aspx.

    Pada file javascript (file-javascript-anda.js), tulis kode seperti di bawah:

    function navigate() {
        // debugger;
        // buka komentar baris di atas untuk melakukan debugging
        var param = $("#grid input[type=radio]:checked").closest("td").find("+ td").text();
        // cek nilai param dengan debugger (IE atau Visual Studio)
        window.open("WFLapDetailJual.aspx?kode" + param);
        return false;
    }

    Untuk mempelajari bagaimana penggunaan selector jQuery, Anda bisa lihat dokumentasinya di http://docs.jquery.com/


    Ahmad Masykur http://www.masykur.web.id/


    • Diedit oleh Ahmad Masykur Selasa, 02 Oktober 2012 01.24 Menambahkan return false untuk mencegah postback.
    • Ditandai sebagai Jawaban oleh Frangky_Koe Selasa, 02 Oktober 2012 07.25
    Selasa, 02 Oktober 2012 01.08

Semua Balasan

  • Anda bisa gunakan jQuery (www.jquery.com)

    Misal kode Anda seperti di bawah

    <div id="grid">
    <asp:GridView id="GridView1">
    </asp:GridView>
    </div>
    Kode javascript menggunakan jQuery
    function passnewwindow() {
      var param = $("grid table tr input[type=radio]:checked").closest("tr").find("td:eq(1)").text();
      window.open("WFLapDetailJual.aspx?kode" + param);
    }


    Ahmad Masykur http://www.masykur.web.id/

    Senin, 01 Oktober 2012 04.38
  • Hallo Mas Ahmad, terima kasih telah Reply postingan saya.

    Saya sudah coba menggunakan script JQuery seperti yang diberikan Mas Ahmad. Tapi tidak respon waktu klik Button. Harusnya New Window terbuka.

    Saya buat seperti ini:

    <script type="text/javascript">    

    function navigate() { var param = $("GridView1 table tr input[type=radio]:checked").closest("tr").find("td:eq(1)").text(); window.open("WFLapDetailJual.aspx?kode" + param); }

    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table>
            <tr>
                <td>
                    <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
                </td>
            </tr>
                        <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="navigate()" />
          
                </td>
                
            </tr>
    
            </table>
            
        </div>
        </form>
    </body>
    </html>




    Senin, 01 Oktober 2012 06.25
  • Tambahkan return false; di akhir function untuk mencegah twrjadinya postback Untuk mencari radio button mana yang dipilih berdasarkan .aspx Anda, ubah javascript menjadi <script type="text/javascript"> function navigate() { var param = $("input[type=radio]:checked").closest("tr").find("td:eq(1)").text(); window.open("WFLapDetailJual.aspx?kode" + param); return false; } </script> Dengan asumsi di halaman hanya ada radio buttons di dalam Grid.

    Ahmad Masykur http://www.masykur.web.id/

    Senin, 01 Oktober 2012 14.12
  • Mas Ahmad,

    masih belum bisa. Waktu saya klik Button, New Window-nya tidak dibuka.

    Waktu klik Button tidak ada respon.

    Tolong saya Mas, kalau mungkin tahu penyelesaian masalah ini.

    Saya hanya ingin mendapatan Kode Cabang, sesuai yang di klik oleh User pada GridView, dan kode cabang itu dipassing ke halaman web lain (New Window)

    Terima kasih.

    Senin, 01 Oktober 2012 15.08
  • File JavaScript Anda ditaruh di mana? Saya tidak melihat file/kode javascript di halaman .ASPX Anda.

    Anda bisa ubah kode .ASPX di atas menjadi:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table>
            <tr>
                <td>
    <div id="grid">
                    <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
    </div>
                </td>
            </tr>
                        <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="navigate()" />
                </td>
            </tr>
            </table>
        </div>
        </form>
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="file-javascript-anda.js" type="text/javascript"></script>
    </body>
    </html>

    Dalam kode di atas, saya tambahkan <div id="grid"> di luar <asp:GridView />. Kode tersebut berfungsi untuk mempermudah mencari elemen GridView dengan jQuery, karena ID GridView yang dirender di klien akan berubah (Bisa dilihat di browser dengan klik kanan -> "View Source"). Di akhir file .aspx ditambahkan javascript file jQuery dan file-javascript-anda.js

    Sebelumnya Anda harus download library jQuery dari http://jquery.com/. File jQuery dan file-javascript-anda.js simpan di tempat yang sama dengan file .aspx.

    Pada file javascript (file-javascript-anda.js), tulis kode seperti di bawah:

    function navigate() {
        // debugger;
        // buka komentar baris di atas untuk melakukan debugging
        var param = $("#grid input[type=radio]:checked").closest("td").find("+ td").text();
        // cek nilai param dengan debugger (IE atau Visual Studio)
        window.open("WFLapDetailJual.aspx?kode" + param);
        return false;
    }

    Untuk mempelajari bagaimana penggunaan selector jQuery, Anda bisa lihat dokumentasinya di http://docs.jquery.com/


    Ahmad Masykur http://www.masykur.web.id/


    • Diedit oleh Ahmad Masykur Selasa, 02 Oktober 2012 01.24 Menambahkan return false untuk mencegah postback.
    • Ditandai sebagai Jawaban oleh Frangky_Koe Selasa, 02 Oktober 2012 07.25
    Selasa, 02 Oktober 2012 01.08
  • Mas Ahmad Masykur, saya sangat mengucapkan terima kasih pada anda.

    Masalah yang saya hadapi, akhirnya terselesaikan karena bantuan Mas Ahmad.

    Karena anda, saya juga baru tahu tentang JQuery.

    Mas Ahmad telah memberikan pengalaman baru bagi saya.

    Sekali lagi, terima kasih Mas Ahmad.



    • Diedit oleh Frangky_Koe Selasa, 02 Oktober 2012 07.30
    Selasa, 02 Oktober 2012 07.29
  • Pak Frangky,

    Kalau pada ASP C#.net 2010, anda bisa lakukan passing parameter antar form dengan cara sbb :

    1. Pada form untuk melemparkan kode cabang pakai syntax sbb :

            Context.Items["sKode"] = "";
            Server.Transfer("frmNewWindow.aspx");

            sKode = variable kode cabang

            frmNewWindows.aspx adalah form untuk menerima input parameter

    2. Pada form penerima parameter (frmNewWindows.aspx) di form load pakai syntax sbb:

        sParam = Context.Items["sKode"].ToString();

    Mungkin cara di atas bisa membantu.

    Regards,

    Sentoso Bunyamin

    Rabu, 24 Oktober 2012 01.33
  • Hallo Jakarta terima kasih telah berusaha menolong saya, untuk kasus passing data.

    Misalnya Struktur Website saya atau Map Website saya seperti ini.

    Misalkan saya punya 4 halaman Web.

    1. Login.aspx  (ini merupakan halaman login user)

    2. Welcome.aspx (Halaman akan muncul jika user berhasil login)

    3. Transaksi.aspx

    4. Laporan.aspx

    Ke empat halaman web diatas urutan untuk diakes oleh user seperti ini:

    Login.apsx >>> Welcome.aspx >>> Transaksi.aspx >>> Laporan.aspx

    Saya ingin data yang diinput oleh user di halaman Login.aspx (seperti Nama User). dipakai pada halaman Laporan.aspx

    bagaimana caranya agar pada halaman Laporan.aspx, Aplikasi web ini bisa tahu UserName apa yang diketik oleh User di halaman Login.aspx?

    Terima kasih.





    Jumat, 26 Oktober 2012 16.09