WordPress和AJAX模式

Question

Challenge: Load Single post page from WordPress inside a DIV with ID of reveal

Successes: Using the following JS I am able to pull the main element and its children into the reveal div.

$(function() {                                     // DOM has loaded
  var $modal = $('#reveal');
  function loadContent(url){                    // Load new content into page
    $modal.load(url + ' #main *').foundation('open');
  }

  $('[data-reveal-ajax]').on('click', function(e) {     // Click handler 
    e.preventDefault();                         // Stop link loading new page
    var href = this.href;                       // Get href attribute of link
    var $this = $(this);                        // Store link in jQuery object
    loadContent(href);                          // Call function: loads content

    console.log('On Click works');
    console.log(href);
    console.log($this);
  });
});

However, the output is unexpected. Instead of placing main and all its children directly into the modal, it rewrites the HTML parent/child relationship, like so:

Injected HTML using jQuery AJAX from above (Broken/Unexpected):

<main id="main" class="page-body" role="main" style="display: flex;"><article id="post-1241" class="post-1241 post type-post status-publish format-standard hentry category-uncategorized tag-sticky-2 tag-template">
    
  <!-- .entry-header -->

  <!-- .entry-content -->

  
  <!-- .entry-footer -->
</article><header id="entryTitle" class="entry-header">
        <!-- .entry-meta -->
      </header><h1 class="entry-title">Template: Sticky</h1><div class="entry-meta">
          </div><span class="posted-on">Posted on </span><a href="http://wordpress/template-sticky/" rel="bookmark"></a><time class="entry-date published updated" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time><span class="byline"> by </span><span class="author vcard"></span><a class="url fn n" href="http://wordpress/author/glenn-philp/">Glenn Philp</a><div class="entry-content">
    


<!-- @end Related Post -->  </div><p>This is a sticky post.</p><p>There are a few things to verify:</p><ul>




</ul><li>The sticky post should be distinctly&nbsp;recognizable&nbsp;in some way in comparison to normal posts. You can style the  class if you are using the  function to generate your post classes, which is a best practice.</li><code>.sticky</code><a title="WordPress Codex post_class() Function" href="http://codex.wordpress.org/Function_Reference/post_class" target="_blank">post_class()</a><li>They should show at the very top of the blog index page, even though they could be several posts back chronologically.</li><li>They should still show up again in their chronologically correct postion in time, but without the sticky indicator.</li><li>If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.</li><section id="related-posts" class="related-posts"></section><a href="#" class="get-related-posts button">Get related posts</a><footer class="entry-footer">
      </footer><span class="cat-links">Posted in </span><a href="http://wordpress/category/uncategorized/" rel="category tag">Uncategorized</a><span class="tags-links">Tagged , </span><a href="http://wordpress/tag/sticky-2/" rel="tag">sticky</a><a href="http://wordpress/tag/template/" rel="tag">template</a><nav class="navigation post-navigation" role="navigation">
        
        
    </nav><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"></div><div class="nav-previous"></div><a href="http://wordpress/template-password-protected/" rel="prev"></a><span class="meta-nav" aria-hidden="true">Previous</span><span class="show-for-sr">Previous post:</span><span class="post-title">Template: Password Protected (the password is “enter”)</span><div class="nav-next"></div><a href="http://wordpress/template-paginated/" rel="next"></a><span class="meta-nav" aria-hidden="true">Next</span><span class="show-for-sr">Next post:</span><span class="post-title">Template: Paginated</span></main>

Single post HTML (Expected):

<main id="main" class="page-body" role="main">

    
<article id="post-1241" class="post-1241 post type-post status-publish format-standard hentry category-uncategorized tag-sticky-2 tag-template">
    
  <header id="entryTitle" class="entry-header">
    <h1 class="entry-title">Template: Sticky</h1>    <div class="entry-meta">
      <span class="posted-on">Posted on <a href="http://wordpress/template-sticky/" rel="bookmark"><time class="entry-date published updated" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://wordpress/author/glenn-philp/">Glenn Philp</a></span></span>    </div><!-- .entry-meta -->
      </header><!-- .entry-header -->

  <div class="entry-content">
    <p>This is a sticky post.</p>
<p>There are a few things to verify:</p>
<ul>
<li>The sticky post should be distinctly&nbsp;recognizable&nbsp;in some way in comparison to normal posts. You can style the <code>.sticky</code> class if you are using the <a title="WordPress Codex post_class() Function" href="http://codex.wordpress.org/Function_Reference/post_class" target="_blank">post_class()</a> function to generate your post classes, which is a best practice.</li>
<li>They should show at the very top of the blog index page, even though they could be several posts back chronologically.</li>
<li>They should still show up again in their chronologically correct postion in time, but without the sticky indicator.</li>
<li>If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.</li>
</ul>
<section id="related-posts" class="related-posts"><a href="#" class="get-related-posts button">Get related posts</a></section><!-- @end Related Post -->  </div><!-- .entry-content -->

  
  <footer class="entry-footer">
    <span class="cat-links">Posted in <a href="http://wordpress/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://wordpress/tag/sticky-2/" rel="tag">sticky</a>, <a href="http://wordpress/tag/template/" rel="tag">template</a></span>  </footer><!-- .entry-footer -->
</article><!-- #post-## -->

    <nav class="navigation post-navigation" role="navigation">
        <h2 class="screen-reader-text">Post navigation</h2>
        <div class="nav-links"><div class="nav-previous"><a href="http://wordpress/template-password-protected/" rel="prev"><span class="meta-nav" aria-hidden="true">Previous</span><span class="show-for-sr">Previous post:</span><span class="post-title">Template: Password Protected (the password is “enter”)</span></a></div><div class="nav-next"><a href="http://wordpress/template-paginated/" rel="next"><span class="meta-nav" aria-hidden="true">Next</span><span class="show-for-sr">Next post:</span><span class="post-title">Template: Paginated</span></a></div></div>
    </nav>
  </main>

Can anyone provide direction on how to solve this issue?

</div>

Answer 1

It is really hard to help you without a working version of your code, but here goes nothing. There is one thing you can (as I would) try to find out where this all goes wrong.

Step 1: First use the .load without sending an element (in your case it is 'main') and test if everything comes back correctly. Change this:

$modal.load(url + ' #main *').foundation('open');

to this:

$modal.load(url).foundation('open');

Step 2: Now, if the result is what you expected it to be (all the HTML from the loaded URL) we can proceed.

Step 3: Now try it like this:

$modal.load(url + ' #main').foundation('open');

I expect that this is going to do what you expect also, it will return everything inside the element with the 'main' ID.

This is how I would fix it because I think the problem is in the * selector.

---

Personally I would try something like this (not fully tested):

$.ajax({
  url: 'https://www.google.nl/',
  success: function(data) {
    $('#myDiv').html($(data).filter('#lipsum').html());
  }
});