[Solved] Jquery switch view modes without refresh

[thierryeamon]

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

[jamygolden]

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.

[thierryeamon]

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]

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 :-)

[thierryeamon]

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?

[jamygolden]

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();

});

});

[thierryeamon]

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();

});

});

[jamygolden]

$(document).ready(function(){

$('#toggle-grid').click(function(){

$('#grid').show();

$('#list').hide();

});

$('#toggle-list').click(function(){

$('#list').show();

$('#grid').hide();

});

});

[thierryeamon]

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

[stefanbar]

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:

echo "grid loop";

?>

list.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();

});

}

});

});

[jamygolden]

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?

[stefanbar]

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.

[papajohn77]

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.

[alphakurt]

*deleted*

[alphakurt]

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

  


Click here to switch between list and grid

















" class="linkLarge" title="">






























" onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="" title="">



























" class="linkLarge" title="">




$pLink_Product = $pLink;

?>






























" onclick="return fbs_click()" target="_blank"class="fb_share_link" alt="" title="">

[Author]

Posts