SD Shared

Wednesday 4 December 2013

Mengatasi Javascript yang Tidak Jalan pada Halaman Jquery Mobile

Diposkan oleh Sujud Dermawan di 06:15 Label: ,
Sebelum mengatasi masalah ini tentu kita perlu memahami bagaimana Jquery Mobile bekerja. Cara kerja halaman pada jquery mobile yaitu menggunakan Ajax.

Halaman pertama tentu akan berjalan secara normal, tetapi pada saat kita menuju ke halaman kedua tentu hanya akan tag BODY (Div dengan tag "role='page'" yang dimuat dalam dom, kecuali jika halaman kedua tersebut direfresh.

Mungkin bagi anda hal tersebut tidak menjadi salah, tapi bagaimana jika tiap halaman - halaman html memiliki tampilan yang unik, katakanlah javascript yang berbeda, belum lagi css tambahan, maka semuanya yang ditemukan diselain tag BODY yaitu mungkin HEAD tidak akan tereksekusi.

Ada beberapa solusi untuk masalah ini , ada yang baik dan ada yang buruk , segala sesuatu harus bergantung pada arsitektur yang ada.

Solusi pertama : 

 Pada halaman kedua atau halaman lainnya, copy script javasript anda pada tag BODY, seperti dibawah ini :

<body>
    <div data-role="page">
        <script>
            // Letakkan kode javascript anda disini
        </script>
           //  Mulai dengan content html anda
    <div>
</div>
</div>

Solusi tersebut merupakan cara yang cepat namun terlihat buruk

Solusi kedua :

Pindahkan semua javascript pada halaman utama, dibuat dengan metode external, kemudian load script tersebut pada halama utama tersebut, seperti dibawah ini :

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>
</div>
</body>

Solusi ketiga :

 Menggunakan atrribut "rel = External " pada tiap tombol dan semua elemen yang digunakan untuk ganti halaman. Dengan cara begitu maka ajax pada Jquery Mobile tidak digunakan, sayangnya ini bukan solusi yang terbaik, karena jika ajax tersebut tidak gunakan maka akan kehilngan banyak fungsi dan fasilitas pada Jquery Mobile tersebut.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

No comments:

Berikan Komentar

Subscribe to: Post Comments (Atom)