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
168k95 gold badges711 silver badges793 bronze badges
asked Feb 13, 2014 at 13:42
DanielTheRocketMan DanielTheRocketManDanielTheRocketMan
3,2496 gold badges40 silver badges70 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
.load() is shortcut of $.get():
$(document).ready(function() {
$.get('cityOptions.html', function(data) {
$('#chooseCity').html(data);
});
});
answered Feb 13, 2014 at 14:02
-
1@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 strangeHüseyin BABAL– Hüseyin BABAL2014年02月13日 14:57:02 +00:00Commented Feb 13, 2014 at 14:57
cityOptions.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
-
thank you for your answer, but it is not solving the problem. Do you think the rest is ok?DanielTheRocketMan– DanielTheRocketMan2014年02月13日 13:48:37 +00:00Commented Feb 13, 2014 at 13:48
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?