0

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
8
Views
6 Years
Discussion Span
Last Post by Xtremefaith
0

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?

0

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

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.