Permalink not working as expected in wordpress category dropdown ajax

Question

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.

Answer 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?