load content from other page with ajax

Question

I have a WordPress site, which is based on posts, but I want to filter my post with ajax.

The tricky part is that, if I want to filter from lets say "cases" to "photography" I have two different templates for this.

I can manage this with a little php and change the_template_part, but that makes the page reload which I don't want to do.

I've been trying to do a ajax request to complete the filter function.

My .js

   $('a[rel="filter"]').click(function() {

        var filter = $(this).attr('id');

        $('.checked').removeClass('checked');
        $(this).parent().addClass('checked');

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            data: window.location = '#?filter=' + filter,
            success: function() {
                $('#content').children().fadeOut(549);
                $('#content').html(data).fadeIn(549);
            }
        });

        console.log('Filter ' + $(this).attr('id') + ' clicked');
    });

And this is the php to change the template_part in my Index.php

    $type = ($_GET['filter'] == '') ? 'projects' : $_GET['filter'];
    <?php 
       get_template_part($type); 
    ?>  

Can I achieve this or do I need to think this over?

This just return the actual address in plain text

    $('a[rel="filter"]').click(function() {

        var filter = $(this).attr('href');

        $('.checked').removeClass('checked');
        $(this).parent().addClass('checked');

        $.ajax({
            url: 'wp-admin/admin-ajax.php',
            //url: 'url' + filter,
            data: {
                filter: filter
            },
            success: function(html) {
                $('#content').children().fadeOut(549);
                $('#content').html(filter).fadeIn(549);
                console.log(filter);
                console.log("Success");
            },
            error: function() {
                console.log('No can do')
            }
        });

        console.log('Filter ' + filter + ' clicked');
        return false;
    });

If I have 3 pages with different queries and templates which represent (Case, photography and motion), which on the frontpage I want to make filterable. I'm working on a one page site.

Answer 1

Add return false at the end of click function.