I have 2 views.
I would like to display them on a page based on a radio box selection.
So it should look like this:
My Radio Box: Option 1/Option 2
Initially... Option 1 is selected, so show View 1
Then....
If Option 1 is selected by the user
show View 1
If Option 2 is selected by the user
show View 2
Seems pretty simple. But not able to achieve this? Can you please show me how to?
Thanks,
Satin
Hi, there is nothing built in to Toolset that will help you create this type of display outside of a Form. Inside a Form, you can use conditional field groups to show and hide specific content: https://toolset.com/documentation/user-guides/conditional-display-for-form-inputs/
Otherwise, you must do this with custom JavaScript. Wrap each View in a div with a specific ID, then use jQuery to listen to the radio field click event. Toggle the corresponding divs on or off.
Add this to your Content Template:
<label>Show View 1 <input type="radio" name="which-view" value="#view1" checked="checked" /></label><br />
<label>Show View 2 <input type="radio" name="which-view" value="#view2" /></label><br />
<div id="view1" class="ts-toggle">
[wpv-view name="Your View 1"]
</div>
<div id="view2" class="ts-toggle" style="display:none;">
[wpv-view name="Your View 2"]
</div>
Replace the wpv-view shortcodes with the actual View shortcodes for your site. Then add this code to the JavaScript editor of your Content Template:
jQuery(document).ready(function(){
jQuery('input[name="which-view"]').click(function(e){
jQuery('.ts-toggle').toggle(false);
jQuery(jQuery(e.target).val()).toggle(true);
});
});
http://api.jquery.com/toggle/
Hi Christian,
What's the style "ts-toggle"?
I tried something similar and getting similar results when I tried your code.
When I select the "Show View 2" radio box, the second view is not showing. It hides the first view, but does not show the second view.
You can try it at hidden link
What's the style "ts-toggle"?
There is no style associated with this class. It is used as a JavaScript selector only.
When I select the "Show View 2" radio box, the second view is not showing. It hides the first view, but does not show the second view.
I see View 2 show up as expected. View 1 is empty, as seen in this screenshot: hidden link
I apologize. These views are going to be seen only by a logged in user. Once u log in.. you will see the same behavior as I see.
Can I send the username & password to verify this issue?
Did a little more research. It feels like the following does not seem to be firing.
jQuery(jQuery(e.target).val()).toggle(true);
Ok.. I tried additional things, including switch the views. The "Show View 2" seems to hide the view 1 (as it should) but is not showing view 2 even though its supposed to toggle.
Don't know why
Ok... I dove into the generated code.. It appears that "view2" is embedded inside "view1".
This happens only when there are 2 views (one in each div element).
Is this a BUG?
Attached are the images that will show what I mean.
I dove into the generated code.. It appears that "view2" is embedded inside "view1".
This usually means there is an unclosed div in the code of the first View loop.
I'll be glad to take a closer look if you send login credentials in the private reply fields here.
Found the issue. Checked everyone of my div elements. Issue is due to loop wizard generated code.
This is a BUG. The div element created by the loop wizard (wpv-loop) inside the loop also creates a </div> tag at the end just before the closing of the wpv-loop tag. However it seems that the engine will exit out of the loop under some conditions skipping that closing div tag. Hence we have a problem.
So the problem seems to be in the loop wizard generated code and the exiting of the loop conditions.
I have fixed the issue and it's working now. Please check above. Sorry for all the messages. But they were meant to help support investigate.
There is a known issue with 1 column Bootstrap Grid Views:
https://toolset.com/errata/view-loop-output-bootstrap-grid-missing-div-and-class/
If this is not the issue you are experiencing, I will be glad to investigate. Please copy + paste the contents of the Loop editor here for me to review.
I think it may be because of this known issue. Sorry hard to tell but seems like it.
I see the patch files but do not know how to install them.
The attached code from the Loop editor shows what change I made to fix this. Hope this helps.
Yes, the issue you are experiencing is the same as the erratum post. If you want to install the patch, you must download the file linked in that erratum post. Unzip the downloaded file on your desktop and you will find two files. You must upload those two files to your server to overwrite two existing files in your wp-views plugin folder. You can find your wp-views plugin folder by logging into the server with FTP and going to the root directory of your site, then go to wp-content/plugins. The erratum post contains detailed information about the directories where you should upload each file.
Ok.. Will apply the patch. But have 2 questions related to that:
1. After I apply the patch, do I revert back to what the loop wizard originally created OR should I leave my changes as is?
2. Will this patch be included in the next version? Don't want the issue to crop up again.
Thank you for all your help in this matter.
1. After I apply the patch, do I revert back to what the loop wizard originally created OR should I leave my changes as is?
You can leave your changes as-is, or you can recreate the loop by running the loop wizard again.
2. Will this patch be included in the next version? Don't want the issue to crop up again.
Yes, the permanent fix will be included in the next release.
