Welcome to Abdul Malik Ikhsan's Blog

jQuery : Ajax Multi Window Modal using jQueryUI

Posted in Javascript by samsonasik on June 7, 2010

jQueryUI adalah bundle untuk low-level abstraction jQuery library untuk kebutuhan interaksi dan efek. jQueryUI mempunyai banyak theme yang bisa kita pilih serta kita modifikasi sesuai kebutuhan.

Pada kesempatan kali ini, saya akan mencoba memaparkan tentang Ajax Multi Window Modal dengan jQueryUI. Untuk yang terbiasa memakai prototype javascript Framework tentulah telah terbiasa dengan multi windownya. Bagaimana dengan jQuery ? Saya pernah discuss dengan salah satu senior saya di kantor saya dulu, kalau untuk jQuery, kita memang harus pintar-pintar memilah mana yang cocok untuk dipakai ( karena ke-OpenSource-annya , banyak developer-developer yang mengembangkan plugin-plugin yang tentu tidak termonitor dengan baik dari sisi kualitasnya – baca : salah satu kelemahan open source,- kalau untuk kelebihan opensource tentu tidak perlu kita bicarakan di sini 🙂 ). jQueryUI adalah salah satu bundle library yang sangat saya rekomendasikan untuk dipakai karena dikembangkan dengan jQuery’s event-driven architecture

Ok, let’s begin.
Pertama, kita download dulu jQueryUI nya. Setelah itu, kita bisa pilah folder-folder dalam development bundle yang telah kita download tadi. Kita hanya butuh library jQuery nya, kemudian folder external, themes, dan ui, setelah itu baiknya kita kelompokkan dalam satu folder khusus. seperti berikut.

Dari gambar di atas, ceritanya index.html adalah file utama yang akan menampilkan halaman-halaman lain dalam bentuk window modal, loaded.html adalah isi window pertama yang akan ditampilkan, dan loaded2.html adalah isi window kedua yang akan ditampilkan.
Nah, setelah kita siapkan file-file di atas, saatnya coding 😀

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<link type="text/css" href="jqueryUI/themes/start/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jqueryUI/external/jquery.bgiframe-2.1.1.js.js"></script>
<script type="text/javascript" src="jqueryUI/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jqueryUI/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jqueryUI/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jqueryUI/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="jqueryUI/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="jqueryUI/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="jqueryUI/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript">
//variable for options value of window
var dialogOpt1,dialogOpt2 = {};
//variable check if popop opened
var setpopup1,setpopup2 = false;
//for popup1
function setOpts1(tinggi,lebar,judul,url)
{
 //reset...
 setpopup1 = true;

 //set options
 dialogOpt1 = {
 bgiframe: true,
 modal: true,
 autoOpen: false,
 height:tinggi,
 width:lebar,
 draggable: true,
 resizeable: true,
 title:judul
 };

 //assign idwindow
 $("#example").dialog(dialogOpt1);
 $("#example").load(url, [], function(){
 $("#example").dialog("open");
 }
 );
}

//for popup2
function setOpts2(tinggi,lebar,judul,url)
{
 //reset...
 setpopup2 = true;

 //set options
 dialogOpt2 = {
 bgiframe: true,
 modal: true,
 autoOpen: false,
 height:tinggi,
 width:lebar,
 draggable: true,
 resizeable: true,
 title:judul
 };

 //assign idwindow
 $("#example2").dialog(dialogOpt2);
 $("#example2").load(url, [], function(){
 $("#example2").dialog("open");
 }
 );
}

$(document).ready(function(){
 //for auto center windows if page is long
 $(window).bind('scroll', function() {
 dialogOpt1.position  = 'center';
 dialogOpt2.position  = 'center';
 if (setpopup1==true && $(".ui-dialog").css("display")!="none" )  $("#example").dialog(dialogOpt1);
 if (setpopup2==true && $(".ui-dialog").css("display")!="none" )  $("#example2").dialog(dialogOpt2);
 });
});
</script>

<input type="button" value="show" onclick="setOpts1(400,900,'First Content','loaded.html');"/>
<div id="example"></div>
<div id="example2"></div>

Kalau sudah, kita siapkan file dengan content yang akan dipanggil.
a. loaded.html ( file pertama yg diload / popup window modal pertama )

<input type="button" id="showdialog2" value="show" onclick="setOpts2(200,400,'Second Content','loaded2.html');"/>
First Modal

b. loaded2.html ( file kedua yg diload / popup window modal kedua)

Second Modal.

Ok, kalau sudah, tinggal kita test, sehingga tampil seperti berikut :

10 Responses

Subscribe to comments with RSS.

  1. winyata senjaya said, on June 23, 2010 at 7:12 am

    mantaff master…^_^

  2. samsonasik said, on June 23, 2010 at 12:26 pm

    eeeeeeeeeeehhhhhhhhhhhhhh

  3. TopanDesign said, on February 18, 2011 at 12:34 am

    Dulu pernah download Jquery, tp lom pernah coba pake, cz lom bisa makenya.
    mungkin ini jadi awal pembelajaran saya,
    thanks

  4. sinzo said, on July 21, 2011 at 4:48 pm

    mau tanya om, kalo pingin ngebuka URL pake dialogbox nya bisa gak yah? jadi di htmlnya
    buka gogel

    trus kluar dialog isinya google.com

    tengkyu 😛

  5. samsonasik said, on July 21, 2011 at 7:08 pm

    ada 2 cara :
    1. tambahkan <iframe> dalam popup
    2. menggunakan fasilitas mashup YQL ( Yahoo Query Language ) , bisa baca di sini https://samsonasik.wordpress.com/2011/03/17/yql-and-json-cross-domain-request-handling/

  6. sinzo said, on July 21, 2011 at 7:17 pm

    tengkyu jawabannya 😛

  7. sekolah penerbangan said, on June 18, 2013 at 7:03 pm

    I think that everything wrote made a ton of sense.
    However, consider this, suppose you added a little content?
    I mean, I don’t wish to tell you how to run your website, however suppose you added a headline to possibly grab a person’s
    attention? I mean jQuery : Ajax Multi Window Modal using jQueryUI | Welcome to Abdul Malik Ikhsan’s Blog is a little vanilla. You ought to peek at Yahoo’s front page and see how
    they create post headlines to grab viewers interested.

    You might add a video or a picture or two to grab people interested
    about what you’ve got to say. Just my opinion, it might bring your website a little bit more interesting.

  8. Prima Uciha Edo Tensei said, on September 27, 2013 at 7:11 am

    Mau tanya pak, bagaimana ya cara mengirimkan variabel agar bisa dibaca ke dalam modalnya itu.
    maksud saya, saya menggunakan modal untuk detail artikel/produk diweb saya. nah bagaimana ya cara biar ketika kita klick link untuk popup modalnya maka otomatis modalnya akan membaca variabel $id-nya.
    Mohon bantuannya 🙂

    • samsonasik said, on September 27, 2013 at 8:32 pm

      1. masukin ke variable global di paling atas source jsnya yg keubah pas onclick
      2. buat element yg bisa berubah pada modal pas halaman utama diklik, nanti buat dia rely ke situ.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: