I have been trying to append html data from a html file to a html page. It seems to be something very simple, but it is not working! Can you help me?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var theCitiesList="<?php echo htmlentities(file_get_contents("cityOptions.html")); ?>";
$("select#chooseCity").html(theCitiesList);
});
</script>
</head>
<body>
<FORM id="searchForm">
<h2>Selecione uma cidade: </h2>
<select id="chooseCity"></select>
</FORM>
</body>
</html>
cityOptions.html is basically a long list of cities such as:
<option value="" selected></option>
<option value="1">California</option>
<option value="2">New York</option>
kenorb
169k96 gold badges712 silver badges796 bronze badges
asked Feb 13, 2014 at 13:42
DanielTheRocketMan
3,2496 gold badges41 silver badges71 bronze badges
3 Answers 3
You can use JQuery .load() like;
$("select#chooseCity").load("cityOptions.html");
This will load cityOptions.html in to your specified html area
answered Feb 13, 2014 at 13:58
Hüseyin BABAL
15.6k5 gold badges53 silver badges74 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
.load() is shortcut of $.get():
$(document).ready(function() {
$.get('cityOptions.html', function(data) {
$('#chooseCity').html(data);
});
});
answered Feb 13, 2014 at 14:02
Chen-Tsu Lin
23.3k16 gold badges57 silver badges65 bronze badges
1 Comment
Hüseyin BABAL
@DanielTheRocketMan I have sent answer before this answer. You were able to do it with
.load(). However, you have select longer version of .load(). This seems strangecityOptions.html had newlines \n. replacing it helps.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var theCitiesList='<?php echo str_replace(array("\r\n", "\n", "\r"), "",file_get_contents("cityOptions.html")); ?>';
$("select#chooseCity").html(theCitiesList);
});
</script>
</head>
<body>
<form id="searchForm">
<h2>Selecione uma cidade: </h2>
<select id="chooseCity">
</select>
</form>
</body>
answered Feb 13, 2014 at 13:45
anurupr
2,3442 gold badges20 silver badges29 bronze badges
1 Comment
DanielTheRocketMan
thank you for your answer, but it is not solving the problem. Do you think the rest is ok?
default
.html()won't cause the PHP code to be executed. Perhaps using jQuery's .ajax() methods you can retrieve the cityOptions.html content, and insert it?