JS error after AJAX get/load

问题

i have a wordpress blog where i have post with a flexslider (plugin's name is meta slider).

Now i have a page on that blog that loads a div's content dynamically with AJAX from posts. code is the following:

$(".post-link").click(function(){
    var post_link = $(this).attr("href");

    $("#refpage-single-post-container").html("content loading");

      $.get(post_link, function(result){
        $result = $(result);

        $result.find('div.entry-content').appendTo('#refpage-single-post-container');
        $result.find('script').appendTo('#refpage-single-post-container');

      }, 'html');           

    //e.preventDefault();
    return false;
});

This basically works fine, but the slider JS afterwards is failing with the following error:

(VM error from Chrome)

Uncaught TypeError: undefined is not a function VM4036:3
metaslider_531 VM4036:3
timer_metaslider_531 VM4036:18
(anonymous function) VM4036:20
(anonymous function)

The following is the slider script (begins with an empty line):

        var metaslider_531 = function($) {
-->     $('#metaslider_531').flexslider({ 
                slideshowSpeed:3000,
                animation:"fade",
                controlNav:true,
                directionNav:false,
                pauseOnHover:true,
                direction:"horizontal",
                reverse:false,
                animationSpeed:600,
                prevText:"&lt;",
                nextText:"&gt;",
                slideshow:true
            });
        };
        var timer_metaslider_531 = function() {
            var slider = !window.jQuery ? window.setTimeout(timer_metaslider_531, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_531, 1) : metaslider_531(window.jQuery);
        };
        timer_metaslider_531();

So the question to me is: How i can fix this? Can i re-init that JS somehow?

To me it looks like the .flexslider function call fails because the prototype is not set on that (new) html div with the id $('#metaslider_531'), thus being "Undefined"(?). Wild guess, perhaps.

What i checked out is which versions of jQuery might be loaded, but it looks only v1.11.0 is loaded once, so i should be "conflict free".

I am quite new to JS and AJAX, so any help lifting the fog in my brain would be appreciated. :)

回答1:

You are probably not loading the flexslider plugin, are loading it before jQuery or override $ because you're loading several libraries.

In the development tools do you see any files that are not loaded?

In the development tools what sources are loaded? What is the order in which you load the scripts?

     $("");

Returns a jQuery object. You can extend jQuery with more functionality as flex slider is supposed to do but if you don't load it then it won't be available

回答2:

I was able to "fix" my problem by doing the following:

First, i changed my ajax call to load the whole page inside the div by this code:

$("#refpage-single-post-container").load(post_link, function() {
} );

I knew this was gonna make the JS work since i saw it work yesterday - but it loaded heavy chunks of unneeded crap of course.

Secondly, i figured out which parts from the page's header and footer seemed to be necessary for the JS to work and it turned out i completely forgot about the footer yesterday night.

I then edited single.php to output only the bare post content, including the following scripts and css from both header and footer. Those were required to load with new post to make the JS work:

<?php $siteurl = get_site_url(); ?>

<script type="text/javascript" src="<?php echo $siteurl; ?>/wp-includes/js/jquery/jquery.js?ver=1.11.0"></script>

    <?php $post = get_post($_POST['id']);?>
    <div id="single-post post-<?php the_ID();?>">
    <?php while (have_posts()) : the_post();
                the_content();
    endwhile;?>  
    </div>

<link rel="stylesheet" id="metaslider-flex-slider-css" href="<?php echo $siteurl ?>/wp-content/plugins/ml-slider/assets/sliders/flexslider/flexslider.css?ver=2.9.1" type="text/css" media="all">
<script type="text/javascript" src="<?php echo $siteurl ?>/wp-content/plugins/ml-slider/assets/sliders/flexslider/jquery.flexslider-min.js?ver=2.9.1"></script>

So finally, i am able to load the post into that div and have it working. But also i now have to live with the fact that my single.php outputs no full page at all anymore, and is thus quite unusable. (Setting the css display:none somehow wouldnt work on the header, footer, etc since of duplicate id's in the markup perhaps) I think i may not need to display a single post ever on a URL, but it doesnt make me feel good since this breaks a good part of functionality on my theme and this is a production website :/ Any ideas on this?

来源：https://stackoverflow.com/questions/25194457/js-error-after-ajax-get-load

标签

javascript

jquery

ajax

flexslider

typeerror