0

Here's my php code:

define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
$post_type = $_GET['posts_type'];
$name = $_GET['name'];
$pageNum = $_GET['num_page'];
switch($post_type){
    case "category":
        getCategoryPosts($pageNum, $name);
        break;
}

function getCategoryPosts($p, $n){
    query_posts('posts_per_page=5&paged='.$p.'&cat='.$n);
    if(have_posts()){
        echo "<ul class='category-dropdown-posts'>";
            while(have_posts()){
                the_post();
                $permalink = get_the_permalink();
                echo "<li><a href=".$permalink.">";
                echo get_the_post_thumbnail($post->ID, array(172, 132), array('class'=>'dropdown-pic'));
                echo "<p class='dropdown-title'>".get_the_title();
                echo "</p></a></li>";
            }
        echo "</ul>";
    }
    wp_reset_query();
}

Now everything is working fine, except the permalink. As you can see that the a tag should be wrapped around both img and p tags, but what I get is something like this:

<li>
<a href="..."></a>
<img ..../>
<p>...</p>
</li>

Any idea what could be wrong?

Edit: The console.log of ajax response seems to be correct, but the display is messed. I am using Firefox in Ubuntu in Virtual Machine. Edit 2: Here's the ajax response:

<ul class='category-dropdown-posts'><li><a style='display:block' href=http://localhost/wordpress/post-to-post/><img width="172" height="114" src="http://localhost/wordpress/wp-content/uploads/2014/12/post-to-post-300x199.jpg" class="dropdown-pic wp-post-image" alt="Post To Post" /><span class='dropdown-title'>Post to Post</span></a></li></ul>

I have figured out the problem. As you can see the href in a is not quoted, which is causing the behaviour. Thanks for the help guys.

Palash
  • 498
  • 4
  • 12
  • I can't reproduce your error. What I would expect to get is a clickable image, a line break, and then a clickable `p` tag. That is exactly what I get. – chiliNUT Jan 10 '15 at 04:54
  • Post to Post

    Post to Post

    This is what I am getting. As you can see, its not clickable. I am using Firefox in Ubuntu in VM     – Palash Jan 10 '15 at 05:04
  • is that from "view source" or from the DOM inspector in FF? – chiliNUT Jan 10 '15 at 05:06
  • DOM inspector. View Source shows nothing, since I am loading it by ajax – Palash Jan 10 '15 at 05:19
  • oh duh, right. console.log the ajax response. what I'm trying to get at, is make sure the raw html looks correct. The DOM inspector will "fix" any malformed HTML (and in the process remove/omit stuff) which might give an unexpected result, so check that the raw HTML response of the ajax call is as you expect it to be. – chiliNUT Jan 10 '15 at 05:21
  • Okay, the raw HTML looks as expected, i.e. correct response. How can I make the browser show it correctly too? – Palash Jan 10 '15 at 05:23
  • can you copy that into your question – chiliNUT Jan 10 '15 at 05:24
  • no i mean copy the actual raw HTML – chiliNUT Jan 10 '15 at 05:28
  • 1
    I solved it. It was because the href was not in quotes, so browser automatically worked on it. – Palash Jan 10 '15 at 05:34

1 Answers1

1

Anchor elements should not contain paragraph elements. Technically this is allowed in HTML5, but some browsers may not handle it correctly. My guess is you're viewing the source in your browser's dev tools and it is auto-closing the anchor when it encounters the paragraph. If this is the case, viewing the actual source should show the HTML formatted as expected, even though it renders as if the anchor is closing early. Try placing the anchor inside the paragraph or setting the display attribute of the anchor to block. More info:

Can a <p> tag in <a> tag?

Community
  • 1
  • 1
Mathew Tinsley
  • 6,805
  • 2
  • 27
  • 37
  • I tried changing my p tag to a div tag and it is still not working. Also, the same code was working properly when I was using it in index.php or category.php, etc. – Palash Jan 10 '15 at 05:06