javascript - Ajax function doesn't work when called inside a JQuery append -
i have onchange function inside jquery append call ajax function. code:
var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showu(str) { if (str=="") { document.getelementbyid(txt).innerhtml=""; return; } if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid(txt).innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","gettujuan5.php?q="+str,true); xmlhttp.send(); } $("#fullboard_dalam_kota").append('<tr align="center" valign="middle" bgcolor="#e4e4e4">' +'<td width="19%" ><input name="penyelenggara[]" type="text" id="'+tambah+'" onchange=showu(this.value)></td>' +'<td width="19%" ><div id="'+txt+'"><b></b></div>' +'</td>' +'<td width="19%" ><input name="jumlah_peserta[]" type="text" id="jumlah_peserta[]"></td>' +'<td width="19%" ><input name="jumlah_hari[]" type="text" id="jumlah_hari[]"></td>' +'</tr>') tambah=tambah+1; txt=txt+1; } var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showu(str) { if (str=="") { document.getelementbyid(txt).innerhtml=""; return; } if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid(txt).innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","gettujuan5.php?q="+str,true); xmlhttp.send(); } $("#fullboard_dalam_kota").append('<tr align="center" valign="middle" bgcolor="#e4e4e4">' +'<td width="19%" ><input name="penyelenggara[]" type="text" id="'+tambah+'" onchange=showu(this.value)></td>' +'<td width="19%" ><div id="'+txt+'"><b></b></div>' +'</td>' +'<td width="19%" ><input name="jumlah_peserta[]" type="text" id="jumlah_peserta[]"></td>' +'<td width="19%" ><input name="jumlah_hari[]" type="text" id="jumlah_hari[]"></td>' +'</tr>') tambah=tambah+1; txt=txt+1; }
but apparently onchange function doesn't work because doesn't return ajax value. what's wrong codes?
the problem using global variable txt
inside showu
method, txt point id
not exists in page.
var data = '<?php echo $data; ?>'; var tambah = 1; var txt = 1; function showu(str, txt) { if (str == "") { document.getelementbyid(txt).innerhtml = ""; return; } if (window.xmlhttprequest) { // code ie7+, firefox, chrome, opera, safari xmlhttp = new xmlhttprequest(); } else { // code ie6, ie5 xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { document.getelementbyid(txt).innerhtml = xmlhttp.responsetext; } } xmlhttp.open("get", "gettujuan5.php?q=" + str, true); xmlhttp.send(); } function add_fullboard_dalam_kota() { $("#fullboard_dalam_kota").append('<tr align="center" valign="middle" bgcolor="#e4e4e4">' + '<td width="19%" ><input name="penyelenggara[]" type="text" id="' + tambah + '" onchange="showu(this.value, \'' + txt + '\')"></td>' + '<td width="19%" ><div id="' + txt + '"><b></b></div>' + '</td>' + '<td width="19%" ><input name="jumlah_peserta[]" type="text" id="jumlah_peserta[]"></td>' + '<td width="19%" ><input name="jumlah_hari[]" type="text" id="jumlah_hari[]"></td>' + '</tr>'); showu(); tambah = tambah + 1; txt = txt + 1; }
note: use jquery.ajax() instead of using native ajax
in case since loading html fragment use
function showu(str, txt) { if (str == "") { $('#' + txt).empty() return; } $('#' + txt).load("gettujuan5.php?q=" + str); }
Comments
Post a Comment