jQuery .attr() tidak berfungsi pada plugin jQuery dialog

Pernahkah anda meng-costumize jQuery.dialog plugin ? Tag default HTML nya kurang lebih seperti berikut :

<div id="user-detail" title="Ini form User Detail"></div>

Tag seperti HTML diatas itu akan menghasilkan nilai konstan pada bagian title. Perhatikan gambar dibawah ini.(ilustrasi1.1)

Ilustrasi 1.1

Pada suatu kasus, saya ingin membuat sebuah fungsi javascript(ilustrasi 1.2) dimana pada fungsi ini nantinya akan dilakukan pemanggilan terhadap selektor jQuery.dialog namun kali ini bagian title akan kita setting secara dinamis. Bagaimana caranya?

function user_detail(selector, id, title){
    var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);

    $(selector).attr('title', title)
                     .dialog('close')
                     .html(output)
                     .dialog('open');
}

 Ilustrasi 1.2

jQuery sendiri sudah melengkapi library nya supaya kita bisa dengan mudah mengubah value dari suatu attribut tertentu. Yap! dengan menggunakan .attr() (lihat ilustrasi 1.2) . Namun jangan harap fungsi ini akan bekerja pada selektor untuk jQuery Dialog yang script HTML sudah saya berikan diatas tadi.

Lalu bagaimana caranya?
Cukup simple!
Anda cukup mengubah tag yang dibuat oleh jQuery.dialog dan me-replace nya dengan variable yang anda kirim ke fungsi dengan menggunakan .text(). Maka kurang lebih gantilah script fungsi yang sudah dibuat tadi seperti ilustrasi 1.3.

function user_detail(selector, id, title){
    var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
    $("span.ui-dialog-title").text(title); 

 
    $(selector).dialog('close')
                     .html(output)
                     .dialog('open');
} 

Ilustrasi 1.3
 

Selamat mencoba! semoga bermanfaat :)

(You can translate this article to English! Check out on sidebar bottom.)