How to switch RenderAction via jquery ajax - javascript

I have navigation panel with two tabs tab1 and tab2
<div id="tabs">
<ul>
<li>Text 1</li>
<li>Text 2</li>
</ul>
<div id="tabs-1">
#{ Html.RenderAction("_ViewPartial", "Func1");}
</div>
<div id="tabs-2">
#{ Html.RenderAction("_ViewPartial", "Func2");}
</div>
</div>
The question is how to switch between two RenderActions clicking on tabs to render partial view dynamically. ("_ViewPartial", "Func1") loaded by default.

Related

Javascript code not working inside wordpress page

I am trying to create a number of lists on a word press page. Each in its own div. For Example:
<strong>List One</strong>
<div>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</div>
<strong>List Two</strong>
<div>
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
<li>Item Tre</li>
</ul>
</div>
I would like the list header text to be clickable
<strong>List One</strong>
and hide or show when clicked.
where, the default should be hidden
<div style="display: none";>
...
</div>
I can do this using javascript 9see below), however, it seems to conflict with wordpress /php/ template/plugins, etc.
Although my page has only text and the code (see below), it will not work 100%. it takes multiple clicks sometimes for it to work
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<strong>List One</strong>
<div id="list_one" style="display: none">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</div>
<strong>List Two</strong>
<div id="list_two" style="display: none">
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
<li>Item Tre</li>
</ul>
</div>
Question: Can this be done another way in order to get same affect. i.e. click a link andshow or hide DIV ?
Try adding your script via wp_footer hook. Just enter your javascript function inside the callback function.
function custom_js_functions(){
<script>
//your code goes here.
</script>
}
add_action('wp_footer', 'custom_js_functions');

Bootstrap tabs not working the first time

I am trying to implement two basic tabs and panels. The panel does not show the content(Page 1) on page load. However, clicking on the other tab works fine with the right content(Page 2) and then going back to the first tab works fine(Page 1).
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane">
Page 1
</div>
<div id="panel2" class="tab-pane">
Page 2
</div>
</div>
Is there something I am missing?
You don't have the active class for the content panel.
You need the following to show the panel1 content by default:
<div id="panel1" class="tab-pane show active">...
I think we need more details because your code is working fine
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane show active">
This is the content of page1............................
</div>
<div id="panel2" class="tab-pane">
This is the content of page2............................
</div>
</div>

Highlight Parent Navigation Item

I think I'm close on this but the main navigation item is only getting highlighted when on that actual page, not on any page below it.
The desired effect is if you are on the page for Sub A, Sub B, Sub C then Main Item 1 would get the .primary-link-active class applied to it indicating you are in that section of the site.
Here is a jsfiddle, though because the code is based off of the URL I don't think this can work in a fiddle.
http://jsfiddle.net/richcoy/knjteaoj/1/
I got most of the Javascript script off of another question here on Stackoverflow.
Thanks for any help you can offer.
HTML
<ul class="nav site-nav">
<li class="nav__item has-dropdown">
Main Item 1<i class="icon-down-arrow small-text float--right mr-"></i>
<div class="dropdown">
<ul class="grid">
<li class="grid__item desk--one-third dropdown--column">
<div class="mb- ms- p- color-darker-gray">
Sub A
</div>
<div class="mb- ms- p- color-darker-gray">
Sub B
</div>
<div class="mb- ms- p- color-darker-gray">
Sub C
</div>
</li>
</ul>
</div>
</li>
<li class="nav__item has-dropdown">
Main Item 2<i class="icon-down-arrow small-text float--right mr-"></i>
<div class="dropdown">
<ul class="grid">
<li class="grid__item desk--one-third dropdown--column">
<div class="mb- ms- p- color-darker-gray">
Sub D
</div>
<div class="mb- ms- p- color-darker-gray">
Sub E
</div>
<div class="mb- ms- p- color-darker-gray">
Sub F
</div>
</li>
</ul>
</div>
</li>
</ul>
Javascript
$(function() {
var url = location.pathname; // get current URL
$('nav a.primary-link[href^="' + url + '"]').addClass('primary-link-active');
});
var $activeUL = $('.primary-link-active').closest('.primary-link');
/*
Revise below condition that tests if .primary-link-active is a submenu
*/
if($activeUL.attr('class') != 'primary-link') { //check if it is submenu
$activeUL
.parent() //This should return the li
.children('a') //The childrens are <a> and <ul>
.addClass('primary-link-active'); //add class active to the a
}
i think you dont really need div.dropdown, you can handle that with structure below:
<ul>
<li><a></a></li>
<li><a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
anyway, try this:
html:
<ul class="nav site-nav">
<li class="nav__item has-dropdown"> Main Item 1<i class="icon-down-arrow small-text float--right mr-"></i>
<ul class="grid">
<li class="grid__item desk--one-third dropdown--column"> Sub A
<ul>
<li>link 1
<ul>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
<li>link 6</li>
</ul>
</li>
<li>link 2</li>
</ul>
</li>
<li class="grid__item desk--one-third dropdown--column"> Sub B
</li>
<li class="grid__item desk--one-third dropdown--column"> Sub C
</li>
</ul>
</li>
<li class="nav__item has-dropdown"> Main Item 2<i class="icon-down-arrow small-text float--right mr-"></i>
<ul class="grid">
<li class="grid__item desk--one-third dropdown--column"> Sub D
</li>
<li class="grid__item desk--one-third dropdown--column"> Sub E
</li>
<li class="grid__item desk--one-third dropdown--column"> Sub F
</li>
</ul>
</li>
script:
$(function () {
var url = 'tempfornow'; //location.pathname; // get current URL
$('.nav a[href*="' + url + '"]').addClass('primary-link-active'); /*(1)*/
$('>a',$('.primary-link-active').parents('li.nav__item')).addClass('primary-link-active'); /*(2)*/
});
what did we do:
we select anchor which it contains 'url',
we select anchor which in it parents of first selected anchor.
note: you used $('nav .blabla'), nav is a tag, but you have div with class nav, you can use with class selector like this $('.nav .blabla')
I hope it helps.
JsFiddle Demo
JsFiddle Demo-2

Menu tab button doesn't work

I have a CSS menu tab which base on idTabs.js , it has 3 buttons which switch between the content appeared on the menu <div> -
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
(here its demo)
Now I try to edit it a little bit such that the button would be under the menu div -
<div>
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
</div>
<div class="usualBottom">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
but the buttons stop working , mean they don't switch the menu content .
(here its demo)
How to fix that ?
I think your selector was wrong. Instead of $("#usual1 ul").idTabs(); it should have been $(".usualBottom ul").idTabs(); . See if it works.
Demo :http://jsfiddle.net/3Njy5/3/
You need to write the ul containing tabs before the div containing content. If you need your tabs after the content or at bottom of page, you need to do that by positioning.
I believe that is because you're not constructing the tabs the correct way in your second example. I think the plugin registers the individual tab contents as siblings of the tab navigation menu, and when you move them into different parents the plugin will not work.
You can, however, change the position of the menu by moving it after the tabs: http://jsfiddle.net/teddyrised/HwfF6/1/
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
You should replace elements inside of the div.
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
If you want the tabs be inside of wrapper, use before pseudo tag.
.usual ul:before {
content: ".";
}
Example:
JS FIDDLE
Try like this,
<script type="text/javascript">
$(".usualBottom").find("ul").idTabs();
</script>
Demo : http://jsfiddle.net/3Njy5/4/

How to open FancyBox in a Spry tabbed panel

I am using a Spry tabbed panel for an HTML base site.
I want to open fancybox, by clicking on a tab (four tabs in total). Once the user fills the fancybox form, only that particular tab panel content should be open.
Is this possible?
Below is my code.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
I want to a form to be filled on tab #2 in fancy box. Once user fill that form and submit successfully after that only tab panel content should be opened.
As you have not posted any code ..I can tell only logic .. U can get the selectedtab index by
var index= ($tabs.tabs('option', 'selected'));
and then you compare your index with the fetched index and if it matches then open your fancybox by
$(".fancy").fancybox().trigger('click');
and you can write your own function on sumbit/close of fancybox
$("<YOUR-SELECTOR>").fancybox({
onClosed: function() {
// your own functions
});
});

Categories