My page makes an AJAX call with and adds some data to a div. Then appends to a DIV with jquery append. It seems that the appended content doesn't follow the css properly. I checked the output with the help of alert and pasted the output manually to the page , it looks fine. What could be the problem?
Here is the code
var myDiv = '<div class="list-group-item" onclick="myhref(' + "docinfo.html" + ');">' +
'<div class="row" id="row">' +
'<div class="col-xs-3 col-sm-5"/>' +
'<img src="' + docDetails[25] + '" class="img-thumbnail" width="100" height="100">' +
'<p><b>₹ </b>' + docDetails[24] + '</p>' +
'<p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-eye-open"></span>' + docDetails[2] + '</a><br></p>' +
'<p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-thumbs-up"></span> ' + docDetails[13] + '</a> </p>' +
'</div>' +
'<div class="col-xs-8 col-sm-9">' +
'<ul class="list-group">' +
'<p><b>' + docDetails[22] + '</b></p>' +
'<p>' + docDetails[10] + ' <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-briefcase"></span>' + docDetails[17] + 'yrs</a> </p>' +
'<p><strong>Location:</strong>' + docDetails[14] + '</p>' +
'<p>' + day + '<br>' +
'<span>' + time + '</span><br>' +
'<a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span>' +
'</ul>' +
'</div>' +
'</div>';
$("#searchfield").append(myDiv);
Output of myDiv when checked through alert function:
<div class="list-group-item" onclick="myhref(docinfo.html);"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="500" class="img-thumbnail" width="100" height="100"><p><b>₹ </b>0</p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-eye-open"></span>null</a><br></p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-thumbs-up"></span> Shalimar Bagh</a> </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>null</b></p><p>4 <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-briefcase"></span>nullyrs</a> </p><p><strong>Location:</strong>Kamlesh clinic</p><p>undefined<br><span>null</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div>
and CSS is of bootstrap
and here is the snippet of searchfiled
<div class="container-fluid" id ="searchfield">
</div>
this the result , when appended with jquery: http://imgur.com/LYE9alR
and this is when I manually pasted the output of myDiv in #searchfield :http://imgur.com/jrWtuyN
答案 0 :(得分：1)
Why are you concatenating string with no variables and values. Just create the string like this
var myDiv='<div class="list-group-item" onclick="myhref('+"docinfo.html"+');"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="'+docDetails[25]+'" class="img-thumbnail" width="100" height="100"><p><b>₹ </b>'+docDetails[24]+'</p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-eye-open"></span>'+docDetails[2]+'</a><br></p><p><a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-thumbs-up"></span> '+docDetails[13]+'</a> </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>'+docDetails[22]+'</b></p><p>'+docDetails[10]+' <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-briefcase"></span>'+docDetails[17]+'yrs</a> </p><p><strong>Location:</strong>'+docDetails[14]+'</p><p>'+day+'<br><span>'+time+'</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div>';
$("#searchfield").append(myDiv);
答案 1 :(得分：0)