How to insert iFrame/PHP with ajax? - php

Question

I am trying to include a Facebook like button iFrame that has PHP in it:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $row['id']; ?>&send=false&layout=button_count" style="border: medium none; overflow: hidden; width: 115px; height: 21px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
when the site loads this, it displays as in a list:
<ul class="recent-list">
<?php
require("inc/connect.php");
$result = mysql_query("SELECT * FROM entries ORDER BY id DESC LIMIT 0, 20", $link);
while($row = mysql_fetch_array($result)){ ?>
<li id="qoute-<?php echo $row['id']; ?>" class="quote-wrap group">
<span>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $row['id']; ?>&send=false&layout=button_count" style="border: medium none; overflow: hidden; width: 115px; height: 21px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
</span>
<div class="quote">
<p>
<?php echo htmlentities($row['quote']); ?>
</p>
</div><!-- /.quote -->
</li>
<?php } ?>
</ul>
But when someone click a button that fetches more list-items, the iFrame should be included...
function getQuotes(start, limit) {
//Clear the recent list element
//$(".recent-list").html("");
var recent = $(".recent-list");
$(".recent-list li").animate({opacity: 0.1} , 800).hide(500);
$.ajax({
url: "quotes.php?start=" + start + "&limit=" + limit,
success: function (data) {
data = jQuery.parseJSON(data)
console.log("success");
//Data should now be a javascript array of objects.
for (i = 0; i < data.length; i++) {
var newElem = jQuery("<li></li>").attr('id', data[i].id).addClass('quote-wrap-group');
newElem.append("<div class='quote'><p>" + data[i].quote + "</p></div>");
$(".recent-list").append(newElem);
}
}
});
}
var currentIndex = 0;
$("#more").click(function () {
getQuotes(currentIndex, 20);
currentIndex += 10;
});
When I try to include the iframe in the js above, nothing happens. No error, nothing is returned...
quotes.php:
$start = $_GET['start'];
$limit = $_GET['limit'];
$sql = "SELECT * FROM entries ORDER BY id DESC LIMIT ".$start.", ".$limit;
$result = mysql_query($sql, $link) or die("Error in query: ".mysql_error());
$data = array();
while($row = mysql_fetch_array($result)) {
array_push($data, $row);
}
echo(json_encode($data));
live version. Click "Get more". The quotes appear, but no like button.
http://kdevs.site40.net/#more

Answer 1

you didn't add the iframe tags while building the <li> it the success function
all you did was adding (for each row):
<li id="54" class="quote-wrap-group">
<div class="quote">
<p>fdggfdgdgdgfdg</p>
</div>
</li>
a better approach will be to make the whole list items on server side, and echo it, and then append the html that you received in the success to the existing list
for example:
your php will look like this:
$data = getData();//Get the data from the database here;
foreach($data as $row):
?>
<li id="qoute-<?php echo $row["id"];?>" class="quote-wrap group">
<span>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo row["id"];?>&send=false&layout=button_count" style="border: medium none; overflow: hidden; width: 115px; height: 21px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
</span>
<div class="quote"><p><?php echo $row["quote"];?></p></div>
</li>
<?php endforeach; ?>
your javascript function will be:
function getQuotes(start, limit){
$.ajax({
url:"quotes.php?start=" + start + "&limit=" + limit,
dataType: "html",
success: function(response){
$("ul.recent-list").append(response);
}
});
}
this of course trying to show the principle, and not necessarily be the exact code you need to write. You need to add the other functionality (like hiding the previous quotes etc...)