Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Element tidak terbaca di JavaScript
Jadi gini, saya meload content dari file lain ke dalam sebuah element. Misalnya, saya membuat sebuah div:
<div id="parent">
</div>
Nah, di dalam div#parent tersebut saya meload content yang berasal dari file content.php dengan AJAX.
if(window.XMLHttpRequest)
{
var xhttp = new XMLHttpRequest();
}
else
{
var xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
document.getElementById('parent').innerHTML = this.responseText;
}
}
xhttp.open('GET', '/url/ke/content.php');
xhttp.send();
Misal isi dari file content.php adalah:
<p id="content"></p>
Hasilnya jadi gini:
<div id="parent">
<p id="content"></p>
</div>
Masalahnya, ketika saya mencoba mendapatkan element p#content (document.getElementById('content')) setelah AJAX load berhasil dan setelah content berhasil muncul/ditambahkan, hasilnya selalu null, seolah element p#content tidak kebaca oleh document. Tapi, kalau saya langsung pakek innerHTML tanpa menggunakan AJAX, element p#content bisa kebaca. Kenapa ya? Apakah ada solusi?
2 Jawaban:
agan ngambil elementnya jgn diluar blok kode (function) xhttp.onreadystatechange. itu pola non-blocking code bukan blocking code (prosesnya asyncronize).
xhttp.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
document.getElementById('parent').innerHTML = this.responseText;
// ngambil selector element disini dapet
}
}
// kalo ngambil selector element disini ga bakal dapet
// karena prosesnya terjadi di blok berbeda
agan pelajarin perbedaan blocking code sama non-blocking, pahamin asyncronize sama syncronize, juga pahamin multithreading. disitu agan baru bakal paham bener meletakan kode agan seharusnya dimana
Jawaban Terpilih
Udah solved, saya pakek delegate event, dan alhamdulillah bisa ke baca:
document.addEventListener(event, function(e)
{
var ee = e.target;
while(ee && ee !== this)
{
if(ee.matches(target))
{
callback.call(ee, e);
}
ee = ee.parentNode;
}
}, false);