<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
I have included the above two script sources in school.php which has the replace function. But in the console of my browser I am getting I am getting this error of-
Uncaught TypeError: Cannot read property 'replace' of undefined
at HTMLInputElement.<anonymous> (edit.php?profile_id=70:76)
at HTMLInputElement.dispatch (jquery-3.2.1.js:5206)
at HTMLInputElement.elemData.handle (jquery-3.2.1.js:5014)
My line 76 is-
var source = $('#edu_template').html();
$('#edu_fields').append(source.replace(/@COUNT@/g,countEdu));
$('.school').autocomplete({source : "school.php"});
My html script is as follows-
<script>
countEdu=<?=$pos?>;
$(document).ready(function(){
window.console && console.log('Document ready to call');
$('#addEdu').click(function(event){
event.preventDefault();
if (countEdu>=9){
alert("Max is 9");
return ;
}
countEdu++;
window.console && console.log("Add" + countEdu);
var source = $('#edu_template').html();
$('#edu_fields').append(source.replace(/@COUNT@/g,countEdu));
$('.school').autocomplete({source : "school.php"});
});
$('.school').autocomplete({
source: "school.php"
});
});
</script>
And the school.php is as below-(full code-ignore the css imports)
<html>
<body>
<?php
include_once("../config.php");
header("content-type : application/json;charset=utf-8");
$term = $_GET['term'];
error_log("Look=".$term);
$stmt = $pdo->prepare('SELECT name FROM Institution WHERE name LIKE :prefix');
$retval = array();
$stmt->execute(array( ':prefix' => $_REQUEST['term']."%"));
while ($row = $stmt-> fetch(PDO::FETCH_ASSOC))
{
$retval[]=$row['name'];
}
echo(json_encode($retval,JSON_PRETTY_PRINT));
?>
<script id ="edu_template" type ="text">
<div id = "edu@COUNT@">
<p>Year:<input type ="text" name = "edu_year@COUNT@" value=""/>
<input type = "button" value ="-" onclick="$('#edu@COUNT@').remove();
return false;
"><br>
<p>School:<input type ="text" size = "80" name = "edu_school@COUNT@" class="school" value=""/> </p></div>
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</body>
</html>