Grow your CSS skills. Land your dream job.

[Solved] Jquery switch view modes without refresh

  • # January 25, 2011 at 4:32 am

    Hi there!

    I’m building my own wordpress template and basically what I want is the abbility to switch (back and forth) between two view modes on a category page without a refresh.

    My own mockup:



    show grid
    show list

    $(document).ready(function(){

    var viewType = grid or list; (this has to be declared by the links above)

    if (viewType == 'grid') {
    include the grid loop;
    }
    elseif (viewType == 'list') {
    include the list loop;
    }
    else {
    include the list loop;
    }

    });

    I hope it makes sense and someone can/ is willing to help me out..

    Thierry

    # January 25, 2011 at 4:41 am

    Hey Thierry,

    PHP code is executed once a page is loaded, you’re not going to be able to include php loops within javascript.

    What you could do is execute both loops within the page. So the one list will be ontop of the other list. You could then wrap both lists in a div, for example:
    HTML:

    Click here to switch between list and grid

    // grid wordpress loop here


    // list wordpress loop here

    CSS:
    #list{display: none;}
    jQuery:

    $(document).ready(function(){
    $('#switch').click(function(){
    $('#grid, #list').toggle();
    });
    });

    By clicking on the anchor link, you will be hiding the grid and showing the list. When you click again, you will show the grid and hide the list – Which seems to be what you were looking for.

    # January 25, 2011 at 7:02 am

    ok.. I will definitely try this! what if i want two buttons…. the grid and list links separated?

    i found a website that contains the same function I’m looking for at http://www.aisleone.net

    Looking at the source they have used a different technique

    gno
    # January 25, 2011 at 8:09 am

    jama_za is spot on. That is the smartest way to do it.

    Alternatively you could store it in two separate files, and load the content into your div on click on your anchor link. However, that would be less desireable.

    The site you linked to refreshes the whole page when you change between the two views. At least here :-)

    # January 25, 2011 at 8:43 am

    I’ve tried jamy_za’s code and is working like a charm.. Still have to implement into a wordpress theme ..

    One last question, can I also use two links to toggle between the two? a “grid” link and a “list” link?

    # January 25, 2011 at 10:23 am

    Yeah you can, that would be something like this:

    Toggle Grid
    Toggle List

    // grid wordpress loop here


    // list wordpress loop here

    jQuery:

    $(document).ready(function(){
    $('a.toggle').click(function(){
    $('#' + $(this).attr('id').substring(7)).toggle();
    });
    });

    jQuery explanation:
    If you click an anchor link with the class of toggle, take it’s ID, remove the first 7 characters (the first 7 are ‘toggle-‘). Toggle an ID of this new found value.

    It could be more simple if you’d prefer:

    $(document).ready(function(){
    $('#toggle-grid').click(function(){
    $('#grid').toggle();
    });
    $('#toggle-list').click(function(){
    $('#list').toggle();
    });
    });
    # January 25, 2011 at 1:37 pm

    ok that’s not entirely what I ment… sure now I can toggle using two links but now I can also see them both, none or one of the two. So if I toggle the list div, I want the grid div to automatically hide (or vice versa).

    If I do something like this, both links have the same functionality, that just doesn’t make sense ;-)



    $(document).ready(function(){
    $('#toggle-grid').click(function(){
    $('#grid').toggle();
    $('#list').toggle();
    });
    $('#toggle-list').click(function(){
    $('#list').toggle();
    $('#grid').toggle();
    });
    });

    # January 25, 2011 at 4:35 pm
    $(document).ready(function(){
    $('#toggle-grid').click(function(){
    $('#grid').show();
    $('#list').hide();
    });
    $('#toggle-list').click(function(){
    $('#list').show();
    $('#grid').hide();
    });
    });
    # January 25, 2011 at 4:42 pm

    You’re a lifesaver!!! Thanks!!!

    # January 26, 2011 at 3:31 am

    Not sure why one would build the two loops upfront, its unnecessary bandwidth, the visitor might never switch between the two. The code below will only build the alt loop if required.

    grid.php:

    < ?php
    echo "grid loop";
    ?>

    list.php:


    < ?php
    echo "list loop";
    ?>

    switcher.js:


    $(document).ready(function(){
    $('#toggle-grid').click(function(){
    // hide both loops
    $(".view").hide();
    // check if loop aleady has been generated
    if ($("#grid").html() != "") {
    $("#grid").show();
    } else { // otherwise fetch loop
    $.get("grid.php", function(data) {
    $("#grid").html(data).show();
    });
    }
    });
    $('#toggle-list').click(function(){
    // hide both loops
    $(".view").hide();
    // check if loop aleady has been generated
    if ($("#list").html() != "") {
    $("#list").show();
    } else { // otherwise fetch loop
    $.get("list.php", function(data) {
    $("#list").html(data).show();
    });
    }
    });
    });
    # January 26, 2011 at 5:24 am

    Would that work if the php contains a wordpress loop though? Wouldn’t it have problems as JS is client-side and PHP is server-side?

    # January 27, 2011 at 12:34 am

    Yip it would work, the php code would execute on the server side before returning a result back to the js method. The js method will wait until something gets returned.

    Been using this for quite sometime now with aspx generic handlers that return full html.

    # February 1, 2011 at 12:36 pm

    Very helpful post.
    Would you possible know some relative module or plugin I could install to my site in order to enjoy this functionality? Thank you for your effort.

    # July 6, 2011 at 8:44 am

    *deleted*

    # July 6, 2011 at 8:45 am

    hi

    im trying to implement the above and I managed to do everything as described (allthough im not at all technical)

    im also trying to implement a product list and grid display switch on my site :
    http://beta.prijsjagers.be/babyfoon~1044.htm#

    the problem i have is that the code is not executing..

    here is my current code



      < ?=Weergave?>

    Click here to switch between list and grid


    < ?= getProductThumbnail($pId, $pLink, $row, $cId, '90', '90', 'ListingThumbnailBox') ?>








    < ?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
    < ?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>




    < ? getUserProductLink($pId, $storeCount, $pLink) ?>


    " onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="< ?="Deel dit product met je vrienden op facebook"?>" title="< ?="Deel dit product met je vrienden op facebook"?>">







    < ?= getProductThumbnail($pId, $pLink, $row, $cId, '90', '90', 'ListingThumbnailBox') ?>








    < ?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
    < ?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>




    < ? getUserProductLink($pId, $storeCount, $pLink) ?>


    " onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="< ?="Deel dit product met je vrienden op facebook"?>" title="< ?="Deel dit product met je vrienden op facebook"?>">
Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".