Member_2_5230414
asked on
Displaying more results with a button not showing more results
Hey guys... im trying to show more results on the page...atm im in the test phase - http://www.runningprofiles.com/members/shout/data/Facebook_Wall_Script.php
as you can see it shows the more box but when clicked nothing is shown. for test purpuses i have just got <?php echo 'hello';?> on ajax_more.php
The main parts of the script below that do this are
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
</div>
and
<script type="text/javascript">
$(function()
{
$('.more').live("click",fu nction()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").append(htm l);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
});
</script>
as you can see it shows the more box but when clicked nothing is shown. for test purpuses i have just got <?php echo 'hello';?> on ajax_more.php
The main parts of the script below that do this are
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
</div>
and
<script type="text/javascript">
$(function()
{
$('.more').live("click",fu
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").append(htm
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>9lessons Applicatio Demo</title>
<link href="frame.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
<script type="text/javascript">
$(function()
{
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
});
$(function()
{
$(".view_comments").click(function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "../viewajax.php",
data: "msg_id="+ ID,
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
$(function() {
$(".comment_button").click(function() {
var element = $(this);
var boxval = $("#content").val();
var dataString = 'content='+ boxval;
if(boxval=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "update_ajax.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value='';
$('#content').value='';
$('#content').focus();
$("#flash").hide();
$("#expand_url").oembed(boxval);
}
});
}
return false;
});
//comment slide
$('.comment').live("click",function()
{
var ID = $(this).attr("id");
$(".fullbox"+ID).show();
$("#c"+ID).slideToggle(300);
return false;
});
//commment Submint
$('.comment_submit').live("click",function()
{
var ID = $(this).attr("id");
var comment_content = $("#textarea"+ID).val();
var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID;
if(comment_content=='')
{
alert("Please Enter Comment Text");
}
else
{
$.ajax({
type: "POST",
url: "comment_ajax.php",
data: dataString,
cache: false,
success: function(html){
$("#commentload"+ID).append(html);
document.getElementById("textarea"+ID).value='';
$("#textarea"+ID).focus();
}
});
}
return false;
});
// Delete Wall Update
$('.delete_update').live("click",function()
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
var parent=$("#bar"+ID);
jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog',
function(r) {
if(r==true)
{
$.ajax({
type: "POST",
url: "delete_comment.php",
data: dataString,
cache: false,
success: function(html){
$("#comment"+ID).slideUp();
}
});
}
return false;
});
return false;
});
});
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.update_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
{
text-decoration:none;
color:#d02b55;
}
a:hover
{
text-decoration:underline;
color:#d02b55;
}
*{margin:0;padding:0;}
ol.timeline
{list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;}
.delete_button
{
float:right; margin-right:10px; width:20px; height:20px
}
.cdelete_button
{
float:right; margin-right:10px; width:20px; height:20px
}
.feed_link
{
font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px
}
.comment
{
color:#0000CC; text-decoration:underline
}
.delete_update
{
font-weight:bold;
}
.cdelete_update
{
font-weight:bold;
}
.post_box
{
height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em;
}
#fullbox
{
margin-top:6px;margin-bottom:6px; display:none;
}
.comment_box
{
display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px;
}
.comment_load
{
margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF;
}
.text_area
{
width:290px;
font-size:12px;
height:30px;
}
#expand_box
{
margin-left:90px;
margin-top:5px;
margin-bottom:5px;
}
embed
{
width:200px;
height:150px;
}
*{ margin:0px; padding:0px }
ol.timeline
{
list-style:none
}
ol.timeline li
{
position:relative;
border-bottom:1px #dedede dashed;
padding:8px;
}
.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }
</style>
</head>
<body>
<?php include '../../../settings.php'; ?>
<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>
<div align="left">
<form method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">
<tr><td align="left"><div align="left">
<h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br />
<input type="submit" value="Update" id="v" name="submit" class="comment_button"/>
</td>
</tr>
</table>
</form>
</div>
<div style="height:7px"></div>
<div id="flash" align="left" ></div>
<ol id="update" class="timeline">
</ol>
<div id='old_updates'>
<?php
$small=mysql_query("select * from messages2 order by msg_id desc LIMIT 2");
while($r=mysql_fetch_array($small))
{
$id=$r['msg_id'];
$msg=$r['message'];
?>
<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span>
</div>
<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$array = mysql_fetch_assoc($csql);
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>
<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<table width="50%">
<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>
<div class="comment_actual_text">
<tr>
<td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
<tr>
<td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
<td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
<strong>Jarratt</strong> <?php echo $comments; ?>
<br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td>
</tr>
</table><br />
</td>
</tr>
</div>
<?php } ?>
</table>
</div>
</ol>
<?php } ?>
<div id="more<?php echo $id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $id; ?>">more</a>
<?php echo $id; ?>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
funny enough i was deleting the post as i had solved it... but i like the idea of using the button as well so i shall give u the point for that liitle tip :P