Insert Large html markups inside jquery variable error - php

Question

im builng a web game and im stuck tryning to append the html-markup for a jquery-ui dailog box.I am currently getting the Uncaught SyntaxError: Unexpected number error in chrome. I have tryed the appendTo method for large blocks of data before,but i was wondering is the a limit on the amount of html-elements you can place inside a jquery varable? because i find myself having to work around this every day ant tips?
note: please read the question carefully before you answer . Is there a way to store large blocks of (html code/ text) static or dynamic, inside a jquery variable?
jquery code :
<script>
var vari = "<?= $UserSpacesAvA ; ?>";
var btn = "<button id='d_pis_btn'>Place in shop</button>";
$(vari).appendTo(document).dialog({
closeOnEscape: false,
modal : true,
draggable : false,
height : 400,
width : 500,
resizable : false,
title : 'Give Your new <?=ucfirst($morph); ?> A Home!',
buttons : [
{
text: 'Done!',
click: function() {
$(this).dialog("destroy").remove();
}
},
],
open: function(event, ui) { $(".ui-dialog-titlebar-close").remove(); },
});
$('.popi select').chosen({});
$(btn).appendTo('.set').on("click",function(){
});
</script>
Php code :
function UserPlaces($userData,$dataExpected,$type){
$dat = "<div class='popi' id='pop'><fieldset class='set'><legend>Location:</legend>";
$x = explode(",",$type);
foreach($x as $s){
switch($s){
case 'rooms':
// bring out rooms
$dat .= "<label>Room:</label><select id='d_room_select'>";
if(count($userData["locations"]['r']) < 1){
$dat .= "Insufficient Space";
}else{
$int = 1;
foreach($userData["locations"]['r'] as $x){
$dat .= "<option value=\"$x\">Room Number $int</option>";
$int++;
}
}
$dat .= "</select><br><br>";
break;
case 'shops':
// bring out shops
$dat .= "<h4>Is this snake for sale ?</h4><br><label>Shop:</label><select id='d_shop_select'>";
if(count($userData["locations"]['r']) < 1){
$data .= "No Shops";
}else{
$int = 1;
foreach($userData["locations"]['s'] as $x){
$dat .= "<option value=\"$x\">Shop Number $int</option>";
$int++;
}
}
$dat .= "</select><br><br><label>Price:</label>
<input id='d_shop_price_snake' name='d_shop_price_snake'><br><br>
";
break;
case 'shows':
// bring out shows
break;
}
}
$dat .= "</fieldset></div>";
return $dat;
}

Answer 1

This doesn't answer your question on limits, but try using jQuery Templates:
http://api.jquery.com/category/plugins/templates/