ajax刷新div中的整个页面，而不是重新加载div内容

Question

Ajax refresh the div. Ajax刷新div。 but the thing is it refresh the whole page inside the div. 但问题是它刷新了div中的整个页面。 it's like page inside page. 就像页面内页一样。 i know that i did something wrong. 我知道我做错了。

I'm working on a wordpress website(locally). 我正在一个wordpress网站（本地）上工作。 where i want to change the images of the presenter as soon as there shows begin. 在这里，我想在演示开始后立即更改演示者的图像。 Ajax script looks fine, but doesn't work the way i want. Ajax脚本看起来不错，但不能按我想要的方式工作。 So, i need your help guys......... 所以，我需要你的帮助……

I placed my code below. 我将代码放在下面。 the div that i want to refresh is in layout page and the ajax script is in the footer page 我要刷新的div在布局页面中，而ajax脚本在页脚页面中

Wordpress Template: WordPress的模板：

<!DOCTYPE html>

<!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9]> <html class="ie ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->

<head>

<?php
/**
 * Match wp_head() indent level
 */
?>

<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); // stay compatible with SEO plugins ?></title>

<?php if (!Bunyad::options()->no_responsive): // don't add if responsiveness disabled ?>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if (Bunyad::options()->favicon): ?>
<link rel="shortcut icon" href="<?php echo esc_attr(Bunyad::options()->favicon); ?>" />
<?php endif; ?>

<?php if (Bunyad::options()->apple_icon): ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo esc_attr(Bunyad::options()->apple_icon); ?>" />
<?php endif; ?>

<?php wp_head(); ?>

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

</head>

<body <?php body_class(); ?>>

  <div class="main-wrap">

    <?php

    /**
     * Get the partial template for top bar
     */
    get_template_part('partials/header/top-bar');

    ?>

    <div id="main-head" class="main-head">

        <div class="wrap">


            <?php

                /**
                 * Get the header based on settings
                 */
                $header = Bunyad::options()->header_style ? Bunyad::options()->header_style : 'default';

                get_template_part('partials/header/' . $header);


                /**
                 * Setup data variables to enable or disable sticky nav functionality
                 */
                $attribs = array('class' => array('navigation cf', Bunyad::options()->nav_align));

                if (Bunyad::options()->sticky_nav) {

                    $attribs['data-sticky-nav'] = 1;

                    // sticky navigation logo?
                    if (Bunyad::options()->sticky_nav_logo) {
                        $attribs['data-sticky-logo'] = 1;
                    }
                }

            ?>

            <nav <?php Bunyad::markup()->attribs('navigation', $attribs); ?>>

                <div class="mobile" data-type="<?php echo Bunyad::options()->mobile_menu_type; ?>" data-search="<?php echo Bunyad::options()->mobile_nav_search; ?>">
                    <a href="#" class="selected">
                        <span class="text"><?php _e('Navigate', 'bunyad'); ?></span><span class="current"></span> <i class="hamburger fa fa-bars"></i>
                    </a>
                </div>

                <?php wp_nav_menu(array('theme_location' => 'main', 'fallback_cb' => '', 'walker' =>  'Bunyad_Menu_Walker')); ?>
            </nav>

        </div>

    </div>

  <?php if (!Bunyad::options()->disable_breadcrumbs): ?>
    <div class="wrap">
        <?php Bunyad::core()->breadcrumbs(); ?>
    </div>
  <?php endif; ?>

  <?php do_action('bunyad_pre_main_content'); ?>

**Layout page:**

<?php
/*
    Template Name: Radio Player
*/

get_header('radio');


if (Bunyad::posts()->meta('featured_slider')):
    get_template_part('partial-sliders');
endif;

?>


  <div class="main wrap cf">

  <div class="row">
    <div class="col-8 main-content">

        <?php if (have_posts()): the_post(); endif; // load the page ?>

        <div id="post-<?php the_ID(); ?>" <?php post_class('page-content'); ?>>

        <?php if (Bunyad::posts()->meta('page_title') != 'no'): ?>

            <header class="post-header">

            <?php if (has_post_thumbnail()): ?>
                <div class="featured">
                    <a href="<?php $url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo $url[0]; ?>" title="<?php the_title_attribute(); ?>">

                    <?php if ((!in_the_loop() && Bunyad::posts()->meta('layout_style') == 'full') OR Bunyad::core()->get_sidebar() == 'none'): // largest images - no sidebar? ?>

                        <?php the_post_thumbnail('main-full', array('title' => strip_tags(get_the_title()))); ?>

                    <?php else: ?>

                        <?php the_post_thumbnail('main-slider', array('title' => strip_tags(get_the_title()))); ?>

                    <?php endif; ?>

                    </a>
                </div>
            <?php endif; ?>

            </header><!-- .post-header -->

        <?php endif; ?>

            <div class="refreshMe">
        <?php Bunyad::posts()->the_content(); ?>


        </div>

    </div>

  </div> <!-- .row -->
  </div> <!-- .main -->
</div>


<?php get_footer('radio'); ?>


**i put my refresh div on the layout page with class name "refreshMe

Footer.php**


    <?php do_action('bunyad_post_main_content'); ?>

    <footer class="main-footer">

     <p>
         Copyright &copy; Babylon Radio 2015
    </p>

    </footer>

</div> <!-- .main-wrap -->

<?php wp_enqueue_script("jquery"); ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.timers-1.0.0.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){
    var j = jQuery.noConflict();
    j(document).ready(function()
    {
        j(".refreshMe").everyTime(10000,function(i){
            j.ajax({
                cache: false,
                success: function(html){
                j(".refreshMe").html(html);
                }
            })
        })
    });
    j('.refreshMe').css({color:"red"});
});
</script>

<?php wp_footer(); ?>

</body>
</html>

**and my ajax script is in the footer page.**

Help me out with this

Answer 1

I am not familiar with the wordpress, but ajax-wise, you have to have a url, where the request would go to get new content for your div. 我对wordpress不熟悉，但是在ajax方面，您必须有一个URL，该请求将在该URL处获取div的新内容。 For instance, your page is on example1.com, so you have to create a menu handler for example1.com/get-my-div, so that page only returns your div content. 例如，您的页面位于example1.com上，因此您必须为example1.com/get-my-div创建一个菜单处理程序，因此该页面仅返回div内容。 The url in your ajax call is omitted, and it is defaulted to the current page. 您的ajax调用中的URL被省略，并且默认为当前页面。 that's why you have a page inside the page, because the content of the entire page is displayed in your div 这就是为什么在页面内有页面的原因，因为整个页面的内容都显示在div中

ajax刷新div中的整个页面，而不是重新加载div内容

问题描述

1 个解决方案

解决方案1
0 2015-05-13 00:54:19

ajax刷新div中的整个页面，而不是重新加载div内容

问题描述

1 个解决方案

解决方案1 0 2015-05-13 00:54:19

解决方案1
0 2015-05-13 00:54:19