AJAX: Javascript function does not work after content is loaded using ajax
Question
Currently, I am having problem where after i load my first content using ajax my javascript functiion is not working. I tried other solutions but most of them are in jquery format. Mine is in javascript format. I have tried to create a simple alert function to test whether the function is being called. But i ended up getting this error Uncaught ReferenceError: showArtistDetails is not defined Actually the function is already defined at the top of my head tag but still its showing undefined. Can I know are there any ways to solve this error.
This is the ajax code:
function showArtistDetails(str) {
if (str == "") {
alert("hi");
document.getElementById("artist").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
alert("hi1");
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
alert("hi2");
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("artist").innerHTML = xmlhttp.responseText;
alert("hi3");
}
};
xmlhttp.open("GET","getArtist.php?title="+str,true);
alert("hi4");
xmlhttp.send();
alert("hi5");
}
}
This is the php code:
echo "<td onclick=\"showArtistDetails(this.value)\">" . $row['CDTitle'] . "</td>";
I really need someones help on this problem. Most of the users had the same problem with jquery function but mine is different. Thank you in advance. Helps are really appreciated.
2 answers
solution1
0 2016-04-02 11:44:05
Your code seem bug free. i din't find issue, check bellow code.
Try to place at bottom of page.
And make sure you use type="text/javascript"
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Fanzine</title>
</head>
<body>
<div id="wholeThing">
<div id="binder">
<section id="content">
<article>
<header>
<hgroup>
<h1 style="text-align:center; font-size: 20px;">Tip Top Fanzine</h1>
</hgroup>
</header>
<p> <!-- Content -->
<div style="text-align:center;">
<select name="category" onchange="showMusic(this.value)"><option value='1'></option><option value='10'>Chamber</option><option value='11'>Classic Rock</option><option value='12'>Classical</option><option value='13'>Comedy</option><option value='14'>Contemporary Folk</option><option value='15'>Country</option><option value='16'>Cult</option><option value='17'>Death Metal</option><option value='18'>Easy Listening</option><option value='19'>Electronic</option><option value='2'>Acid Jazz</option><option value='20'>Electronica</option><option value='21'>Folk</option><option value='22'>Free Style</option><option value='23'>General Folk</option><option value='24'>General Rock</option><option value='25'>genre</option><option value='26'>Gothic</option><option value='27'>Jazz</option><option value='28'>Jungle/Drum 'N Bass</option><option value='29'>Keyboard</option><option value='3'>Alternative</option><option value='30'>Latin</option><option value='31'>Latin Rap</option><option value='32'>Louie</option><option value='33'>Medieval</option><option value='34'>misc</option><option value='35'>Miscellaneous</option><option value='36'>Mob Hits</option><option value='37'>New Age</option><option value='38'>New Wave</option><option value='39'>Oldies</option><option value='4'>Alternative Pop/Rock</option><option value='40'>Other</option><option value='41'>Pop</option><option value='42'>Pop/Rock</option><option value='43'>Progressive Folk</option><option value='44'>Psychedelic</option><option value='45'>Rap</option><option value='46'>Rap/R&B</option><option value='47'>Reggae</option><option value='48'>RnB</option><option value='49'>Rock</option><option value='5'>Ambient</option><option value='50'>Rock/Pop</option><option value='51'>RockNRoll</option><option value='52'>Roots Reggae</option><option value='53'>Soft Rock</option><option value='54'>Soul</option><option value='55'>Soundtrack</option><option value='56'>Techno</option><option value='57'>Traditional Folk</option><option value='58'>Traditional Pop</option><option value='59'>Trip-Hop</option><option value='6'>AvantGarde</option><option value='60'>Vocal</option><option value='61'>World</option><option value='62'>World Classical</option><option value='63'>Afro-Beat</option><option value='7'>Ballad</option><option value='8'>Bluegrass</option><option value='9'>Blues</option></select>
</div> </p>
<div id="albums"></div>
</article>
</section>
</div>
</div>
<script>
function showMusic(str) {
if (str == "") {
document.getElementById("albums").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("albums").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getAlbums.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</body>
</html>
PHP Script
<?php
echo "<pre>";
print_r($_REQUEST);
echo "</pre>";
exit;
?>
solution2
0 2016-04-02 12:33:34
You say: "the function is already defined at the top of my head tag"
I only see one named function in the head tag: showMusic(str)
Where is showArtistDetails defined?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.