Member Avatar for Xtremefaith

So for the record I'm using wordpress but you don't need to know wordpress in order to help me with this. This is my first AJAX attempt and I read through W3schools and understand a good portion of how it works in theory but haven't found any close enough working examples to help me with my issue.

Ultimate goal
Trying scan every X seconds for new post added (through the wordpress). Then with each new post a new div would be added to the page, much like the way Facebook updates when there are new status updates. At the moment I have no results displaying to know how to really proceed with this.

The Code:
News Page.php (summarized)

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> // in header

<script>
function updateNews(){
    // Assuming we have #shoutbox
    $('#liveNews').load('liveNews.php');
    $('#liveNews').
}
window.setInterval(updateNews, 3000)
</script>

<div id="content-sidebar-wrap" class="video-featured">
        
	<h4>Recent Newscast</h4>
	<div class="wideArea" id="liveNews">
		
	<?php $currID = $post->ID;
	$temporary = $wp_query; // set the defined new query
	$args = array(
				'post__not_in' => array($currID),
				'showposts' => '1',
				'cat' => '214'
			);
	    query_posts($args);
	    if(have_posts()) : while(have_posts()) : the_post(); ?>
	        <div id="video-featured-full-details">
	        	<div id="post-details">
	        		<div id="post-header">
	                	<div id="thumb"><?php echo get_avatar(get_the_author_meta('ID'), 70); ?></div> <!-- #thumb -->
	                	<div id="details">

	                       // CODE HERE

	                	</div> <!-- #details -->
	            	</div> <!-- #post-header -->
	            </div> <!-- #post-details -->
	            <div id="clear">&nbsp;</div>
	            <?php the_excerpt(); ?>
	        </div> <!-- END #video-featured-full-details -->
	    <?php endwhile; endif;
	    $wp_query = $temporary; //reset it back to normal ?>
	    <div id="clear">&nbsp;</div>
	</div>
</div>

liveNews.php

<?php $currID = $post->ID;
		$temporary = $wp_query; // set the defined new query
	    $args = array(
				'post__not_in' => array($currID),
				'showposts' => '1',
				'cat' => '214'
			);
	    query_posts($args);
	    if(have_posts()) : while(have_posts()) : the_post(); ?>
	        <div id="video-featured-full-details">
	        	<div id="post-details">
	        		<div id="post-header">
	                	<div id="thumb"><?php echo get_avatar(get_the_author_meta('ID'), 70); ?></div> <!-- #thumb -->
	                	<div id="details">
	                       // CODE HERE
	                	</div> <!-- #details -->
	            	</div> <!-- #post-header -->
	            </div> <!-- #post-details -->
	            <div id="clear">&nbsp;</div>
	            <?php the_excerpt(); ?>
	        </div> <!-- END #video-featured-full-details -->
	    <?php endwhile; endif;
	    $wp_query = $temporary; //reset it back to normal ?>
	    <div id="clear">&nbsp;</div>
	    ?>

I don't believe there are any other places I need to be adding code, so now its just a matter of getting these two to communicate properly, and I believe this is more a javascript thing because the ajax portion is just the transfer from what I understand.

Thank you in advance for any help the community here can provide, thank you thank you!
Xtremefaith

  • 2 Contributors
  • 3 Replies
  • 266 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Xtremefaith
Member Avatar for Xtremefaith

With 20+ hours and no response I'm wondering for those that are reading is there other details you may need to be able to offer any help?

Member Avatar for BrutishBodega

Well what is currently happening with your code? I know you are not getting the results desired, but are you getting any response/errors?

Member Avatar for Xtremefaith

Sorry for the wait I needed to test some things. Ok so at the moment I have an update button (I'll make this auto-update once its working) that when clicked loads a function that successfully re-queries the post like I want, but none of the animations I want happen work and I'm not sure how to make them do it. I'll post my code below, but to recap I want it to animate like facebook essentially, fade new post in, slide old post down (not sure what happens to bottom post, I suppose it should fade out so to keep only 10 post on the page at a time).

The live news page:

<div>
	<form method="post" name="form" action="">
		<input type="submit" value="Update" name="submit" class="update_button"/>
	</form>
</div>


<div id="content-sidebar-wrap" class="video-featured">
        
	<h4>Recent Newscast</h4>
	<div class="wideArea" id="liveNews">
		
		<script type="text/javascript" >
			$(function() {
				$(".update_button").click(function() {
					
					$("#liveNews").show();
					//$("#liveNews").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
				
					$.ajax({
						type: "POST",
						url: "liveNews.php",
						data: dataString,
						cache: false,
						success: function(html){
							//$("ol#update").prepend(html);
							$("liveNews").slideDown("slow");
						}
					});

				});
			});
		</script>
		

		<?php $currID = $post->ID;
		$temporary = $wp_query; // set the defined new query
	    $args = array(
				'post__not_in' => array($currID),
				'showposts' => '10',
				'cat' => '214'
			);
	    query_posts($args);
	    if(have_posts()) : while(have_posts()) : the_post(); ?>
	        <div id="video-featured-full-details">
	        	<div id="post-details">
	        		<div id="post-header">
	                	<div id="thumb"><?php echo get_avatar(get_the_author_meta('ID'), 70); ?></div> <!-- #thumb -->
	                	<div id="details">
	                       //Code here
	                	</div> <!-- #details -->
	            	</div> <!-- #post-header -->
	            </div> <!-- #post-details -->
	            <div id="clear">&nbsp;</div>
	            <?php the_excerpt(); ?>
	        </div> <!-- END #video-featured-full-details -->
	    <?php endwhile; endif;
	    $wp_query = $temporary; //reset it back to normal ?>
	    <div id="clear">&nbsp;</div>
	</div>

The liveNews.php script that is called:

<?php $currID = $post->ID;
$temporary = $wp_query; // set the defined new query
$args = array(
		'post__not_in' => array($currID),
		'showposts' => '1',
		'cat' => '214'
	);
query_posts($args);
if(have_posts()) : while(have_posts()) : the_post(); ?>
    <div id="video-featured-full-details">
    	<div id="post-details">
    		<div id="post-header">
            	<div id="thumb"><?php echo get_avatar(get_the_author_meta('ID'), 70); ?></div> <!-- #thumb -->
            	<div id="details">
                //Code here
            	</div> <!-- #details -->
        	</div> <!-- #post-header -->
        </div> <!-- #post-details -->
        <div id="clear">&nbsp;</div>
        <?php the_excerpt(); ?>
    </div> <!-- END #video-featured-full-details -->
<?php endwhile; endif;
$wp_query = $temporary; //reset it back to normal ?>
<div id="clear">&nbsp;</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.