1rosehip / jplist

jPList jQuery Data Grid Controls is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure (DIVs, UL/LI, tables, etc).
http://jplist.com
Other
438 stars 176 forks source link

jplist and blocks loading my links through ajax #168

Closed janstieler closed 8 years ago

janstieler commented 8 years ago

Hello, I have an portfoliogrid with links, images and some text. The filtering works great but I have problems width the links. The links should loaded though ajax inside an container if they are clicked but the jplist plugin destroy the ajax loading and I have no idea where the problem is. Here are my code:

<form class="text-filter-box forms">
        <label class="sr-only">Label</label>
        <div class="btn-append">
            <input type="search" border-bottom name="search" placeholder="Filter" data-path=".filter" value="" data-control-type="textbox" data-control-name="title-filter" data-control-action="filter" data-mode="advanced">
            <span>
                <button class="btn" type="transparent" border-bottom><i class="mdi mdi-magnify"></i></button>
            </span>
        </div>
    </form>
<section class="list">
<a href="projects/project-c" class="ajaxClick item" data-name="Project C" style="opacity: 1;">
        <div class="col-xs-6">
            <div class="filter" data-category="fotografie">
                <div class="title">Project C</div>
                <div class="category">fotografie</div>
                <span class="" style="display: none;">Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen. Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence.
Er hat diesen Copyblock weder gestaucht, gezerrt, noch in Versalien oder gar in 6 Punkt Eurostile Outline gesetzt. Er hat ihn ganz einfach lesbar gemacht. Offenbar sogar ziemlich gut, sonst hätten Sie wohl schon einige Zeilen zuvor die Leselust verloren.
Beachten Sie nur die Zeilenbreite, die er gewählt hat. Sie ist weder zu lang noch zu kurz gewählt. Der dazugehörige Zeilenabstand ist ideal. Ihre Augen haben keinerlei Probleme, vom Ende einer Zeile in die nächste zu gelangen.
Um einen solchen Art Director kann man Sie beneiden. Er nutzt den ihm gewährten gestalterischen Freiraum nicht, um sich selbst darzustellen, sondern Sie. Er weiß, daß es Wichtiges über Ihr Unternehmen oder Produkt zu sagen gibt.
Und dem räumt er großzügig Platz ein.</span>
                                <img src="content/2-projects/3-project-c/hightide.jpg" alt="Project C">
                            </div>
        </div>
    </a><a href="projects/project-b" class="ajaxClick item" data-name="Project B" style="opacity: 1;">
        <div class="col-xs-6">
            <div class="filter" data-category="typografie">
                <div class="title">Project B</div>
                <div class="category">typografie</div>
                <span class="" style="display: none;">Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill, um bei der Bank of Helvetica die Kapitälchen in Kapital umzuwandeln. Oxmox liess nicht locker. Ich fleh euch an, rettet meine Copy, gebt meinem Body nochn Durchschuss! Kein Problem, erbarmte sich Old Face Baskerville, streichelte seinen Hund, zog seine einspaltige Poppl, legte an und traf! (Zeidank nichts Ernstes ­ nurn bisschen Fraktur.) Oxmox: Danke, ist jetzt mit Abstand besser. Derweil jumpte der Fox leise over the Buhl, die sich mal wieder immerdar wie jedes Jahr gesellte. Diesmal war Guaredisch ihr Erwählter, weil seine Laufweite einem vollgetankten Bodoni entsprach und seine ungezügelte Unterlänge ihre Serifen so serafisch streifte, dass sie trotz Techtelmechtelei die magere Futura, jene zuverlässige und gern eingesetzte Langstreckenläuferin, rechtsbündig überholen konnten. Leute, giftelte Tiffany, macht endlich maln Punkt. Und das Komma soll sich gefällixt an die richtige Stelle setzen. Und keine Trennungen. Und nicht zu viele Anschläge heut nacht! Die Goudy war vorbei. Aus einem üblen Geviert tauchte eine Horde Gemeiner auf, angeführt von einem Versalen. Als sie des Grauwerts anblickig wurden, machten sie auf dem Absatz kehrt - ohne Einzug. Die in der letzten Reihe warfen noch schnell eine Handvoll Buchstaben in die Luft, blind darauf vertrauend, dass ...</span>
                                <img src="content/2-projects/2-project-b/mountains.jpg" alt="Project B">
                            </div>
        </div>
    </a><a href="projects/project-a" class="ajaxClick item" data-name="Project A" style="opacity: 1;">
        <div class="col-xs-6">
            <div class="filter" data-category="ausstellungsdesign">
                <div class="title">Project A</div>
                <div class="category">ausstellungsdesign</div>
                <span class="" style="display: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</span>
                                <img src="content/2-projects/1-project-a/forrest.jpg" alt="Project A">
                            </div>
        </div>
    </a></section>
$(function(){
    var ajaxClick = $('.ajaxClick');

//check all jPList javascript options
$('.jplist-panel input').attr('autocomplete','off');
    $('nav').append('<div class="jplist-no-results alert alert-error">No results found</div>');
    $('.jplist-no-result .close').on('click touchstart', function(){
        $('.text-filter-box [type="search"]').val('').focus();
    });

$('body').jplist({              
        itemsBox: '.list',
        itemPath: '.item',
        panelPath: '.jplist-panel',
        noResults: '.jplist-no-results',
        effect: 'fade'
});

ajaxClick.on('click', function(ajaxClick){
        console.log('click');

        ajaxClick.preventDefault();

        var ajaxContent     = $('.ajaxContent'),
            contentToLoad   = $(this).attr('href'),
            ajaxPlaceholder = '<i class="mdi mdi-autorenew rotate"></i>',
            data            = ajaxClick.target.getAttribute('data-name');   

        console.log(contentToLoad);

        if (ajaxContent.is(':empty')){
            ajaxContent.html(ajaxPlaceholder).attr('data-open', 'open');
            ajaxContent.load(contentToLoad, function() {
                ajaxContent.hide().fadeIn('slow');
            });
        }
        else {
            ajaxContent.fadeOut('slow');
            ajaxContent.html(ajaxPlaceholder).attr('data-open', 'open');
            ajaxContent.load(contentToLoad, function() {
                ajaxContent.hide().fadeIn('slow');
            });
        }

        history.pushState(data, null, contentToLoad);
    });
});

Hope someone can help me?

Kind regards

1rosehip commented 8 years ago

It's possible to define ajaxClick.on('click', function(ajaxClick){...}); inside redrawCallback like desribed here: http://jplist.com/documentation/js-settings#redraw-callback-function

or you can use another onclick notation: $(document).on('click', '.ajaxClick', function(){...})