Wordpress und AJAX Modals

Question

Herausforderung: laden Einzel Post-Seite von Wordpress in einem DIV mit der ID des offenbaren

Erfolge: Unter Verwendung der folgenden JS Ich bin in der Lage das Hauptelement und seine Kinder in die ziehen offenbaren 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); 
 
    }); 
 
});

Allerdings ist der Ausgang unerwartet. Statt dessen Haupt des Vergebens und alle ihre Kinder direkt in die modal, umschreibt es die HTML-Eltern/Kind-Beziehung, etwa so:

injizierte HTML mit jQuery AJAX von oben (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"> 
 
\t \t 
 
\t \t 
 
\t </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>

Einzel Post HTML (Erwartete):

<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-## --> 
 

 
\t <nav class="navigation post-navigation" role="navigation"> 
 
\t \t <h2 class="screen-reader-text">Post navigation</h2> 
 
\t \t <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> 
 
\t </nav> 
 
    </main>

Kann jemand Anweisungen geben, wie man dieses Problem löst?

Answer 1

Es ist wirklich schwer, Ihnen ohne eine funktionierende Version Ihres Codes zu helfen, aber hier geht nichts. Es gibt eine Sache, die Sie (wie ich) versuchen könnte herauszufinden, wo das alles schief geht.

Schritt 1: Verwenden Sie zuerst die .load, ohne ein Element zu senden (in Ihrem Fall ist es "main") und testen Sie, ob alles korrekt zurückkommt. Ändern Sie dies:

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

dazu:

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

Schritt 2: Nun, wenn das Ergebnis ist, was Sie es nicht zu erwarten (alle HTML aus der geladenen URL) können wir fortfahren.

Schritt 3: Nun es so versuchen:

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

Ich gehe davon aus, dass dies tun wird, was man auch erwarten, es alles innerhalb des Elements mit dem ‚Haupt‘ ID zurück.

Das ist, wie ich es beheben würde, weil ich denke, dass das Problem im * Selektor ist.

---

Persönlich würde ich so etwas wie dies versuchen (nicht vollständig getestet):

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