get_post_meta() not working after javascript runs - php

Question

I am trying to retrieve data through my template in wordpress using get_post_meta() function. This works fine if I put the code above the div which is using a javascript, but it doesnt work if I put this function after the java script.
My php template file is as follows.
Here is the div using the javascript file ( lets call it div 1)`
<div style="width: 100%;margin: 0 auto; clear: both; ">
<div style="width: 800px">
<ul class='tabs'>
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
<?php
$i=1;
while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href='#tab<?php echo $i; ?>'><?php the_title(); ?></a></li>
<?php $i++; endwhile;?>
</ul>
</div>
<div class="clear"></div>
<div style="background:#d0d8e0; position:relative; width: 96%; margin: -1% 4% 4% 2%; padding: 40px 0 20px 0; ">
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
<?php
$i=1;
while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div id='tab<?php echo $i; ?>'>
<div class="tab" >
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
</div>
<?php $i++; endwhile;?>
</div>
<div class="clear"></div>
`</div></div>
And the code I am putting after this div to retrieve values from data base is( lets call it div 2)
<div class="group group-custom" >
<?php $url = get_post_meta($post->ID,'wpcf-youtube-url', true); ?>
<div style="float: left">
<iframe type="text/html" width="480" height="315" <?php echo wp_oembed_get( 'http://www.youtube.com/watch?v=' . $url ); ?></iframe>
</div>
<div class="video-area">
<h2><?php echo "" .get_post_meta($post->ID,'wpcf-video-line',TRUE)?></h2>
<br/>
<p><?php echo "" .get_post_meta($post->ID,'wpcf-video-text',TRUE)?></p>
<a class="button" href=""></a></div></div>
If I put the div 2 after div 1 in my php template, it doesn't work but if I switch the divs, it works normally. Here is my javascript file ( which I dont see a problem)
<script language="JavaScript">
$(function() {
$('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
The live version of this work is http://cmi.pixstreammedia.com.s177734.gridserver.com/

Answer 1

I found the problem. I have to use <?php wp_reset_query() ?> after the new wp_query function is over to restores the $wp_query and global post data to the original main query.
http://codex.wordpress.org/Function_Reference/wp_reset_query