On page A I have these navigation link:
<li>
<a href="PageB.aspx" target="_blank" class="active">
<span>Option 1</span> //<--I want to go to page B and load Ajax1
</a>
</li>
<li>
<a href="PageB.aspx" target="_blank">
<span>Option 2</span> //<--I want to go to page B and load Ajax2
</a>
</li>
On page B I have these navigation link to load ajax on this page:
<li >
<a href="AjaxHandler/Ajax1.ashx?Type=Page&Security=0">
<span>Ajax 1</span>
</a>
</li>
<li >
<a href="AjaxHandler/Ajax2.ashx?Type=Page&Security=0">
<span>Ajax 2</span>
</a>
</li>
I want when I click Option 1 on page A, it will go to page B and load Ajax 1 on page B and same goes to Option2, I want it to go to page B and load Ajax 2 on page B.
Right now the nav link on page A will only go to page B, and I need to click nav link on page B separately to load ajax on that page.
Can I achieve this via href on page A? Appreciate if anyone can help.
Big thanks to vicpermir I figured it out.
Page A: Put parameter to pass to Page B
<li>
<a href="PageB.aspx?ajaxRequest=1" target="_blank">
<span>Option 1</span> //<--I want to go to page B and load Ajax1
</a>
</li>
<li>
<a href="PageB.aspx?ajaxRequest=2" target="_blank">
<span>Option 2</span> //<--I want to go to page B and load Ajax2
</a>
</li>
Page B: Add class to ajax handler
<li >
<a href="AjaxHandler/Ajax1.ashx?Type=Page&Security=0" class="ajax1">
<span>Ajax 1</span>
</a>
</li>
<li >
<a href="AjaxHandler/Ajax2.ashx?Type=Page&Security=0" class="ajax2">
<span>Ajax 2</span>
</a>
</li>
$(document).ready(function (){ of javascript at Page B:
function LoadAjaxOnPage() {
let params = (new URL(document.location)).searchParams;
let paramVal = params.get("ajaxReq");
if (parseInt(paramVal) == 1) {
document.getElementsByClassName("ajax1")[0].click();
}
if (parseInt(paramVal) == 2) {
document.getElementsByClassName("ajax2")[0].click();
}
}
Basically what happen is, when page B load, it take the parameter passed from page A and auto click the href on Page B based on that parameter.
Related
i have a side bar, where in it remains active if im on the screens first tab, if i switch to second tab, the url changes and the sidebar label wont be active.
How can this be solved. Please help.
HTML:
Side bar Code:
<a routerLink="/my-health/my-health-history" [ngClass] = "{'active' : true}" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
TAbs code redirected to pages on click of side bar link:
<div class="myhealth mt7">
<ul class="nav nav-tabs menu">
<li>
<a class="active-link" routerLink="/my-health/my-health-history" routerLinkActive="active-link"
[routerLinkActiveOptions]="{exact: true}">myHealthHistory
</a>
</li>
<li>
<a routerLink="/my-health/my-lifestyle" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myLifeStyle
</a>
</li>
<li>
<a routerLink="/my-health/my-family-health-history" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myFamilyHistory
</a>
</li>
</ul>
</div>
If i am in myHealth History tab, then side bar will be active, if i shift to other 2 tabs then side bar wont be active
Using [ngClass] = "{'active' : true}" in tag.
The condition are:
Differ your current URL based on tab change.
ex1: http://test.com/tab1 and http://test.com/tab2
ex2:http://test.com/#tab1 and http://test.com/#tab2
Read url and find string like "tab1 or tab2"
add "Active" class based on this condition
You can check for the current active link in the sidebar component.
Sidebar html
<a routerLinkActive="active-link" [ngClass]="{'active-link': isActive()}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
Sidebar ts
constructor(private router:Router) {
}
isActive(){
return ["/my-health/my-health-history","/my-health/my-lifestyle","/my-health/my-family-health-history"].includes(this.router.url);
}
Note : the code is written directly to Stackoverflow editor so there could be typo or syntatical error. Please correct yourself.
I am trying to show on pagination buttons title="text", I got to show on the button when I hover the link to page from some pages
But, how can I implement title text to the current Page?
Here is my code:
<li class="files-overview__pagination-item{{#is data.root.currentPage hash.pageNr}} is-active{{/is}}">
<a class="files-overview__pagination-link"
data-js-item="files-overview__pagination-item"
data-pagination-page="{{hash.pageNr}}"
title="
{{data.root.currentPage hash.pageNr}} current page}}
jump to page {{hash.pageName}} of {{data.root.totalPages}}"
>
{{hash.pageName}}
</a>
some correction to the Code:
<li class="files-overview__pagination-item{{#is data.root.currentPage hash.pageNr}} is-active{{/is}}">
<a class="files-overview__pagination-link"
data-js-item="files-overview__pagination-item"
data-pagination-page="{{hash.pageNr}}"
title="
{{#if data.root.currentPage hash.pageName}} current page{{else}}
jump to page {{hash.pageName}} of {{data.root.totalPages}}
{{/if}}
"
>
{{hash.pageName}}
</a>
How do you add a span tag inside of an a tag using Html.ActionLink? Is something like this at all possible?
I am using ASP.NET MVC 4 together with Twitter Bootstrap version 3.
I have a drop down menu and the HTML looks like this:
<ul class="nav navbar-nav">
<li class="#(Model.Equals("Home") ? "active" : "")">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
</ul>
I was wanting to do the link like this:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
But there is a span tag in the mix of things which makes it a bit more complex.
I can probably also use the following:
<a href="#Url.Action("Index", "Home")">
<span class="glyphicon glyphicon-home"></span> Home
</a>
Curious to know if the above is possible?
Your variant with Url.Action("Index", "Home") is correct and possible. Url.Action returns the url, so it can be used in a href.
hi i have master page and menu like this
<ul id="ulhotel" runat="server">
<li class="userprof active"><a href="AddAdminDetail.aspx">
<p class="activenav">
<span class="entypo activenav">+</span>User Profile</p>
</a></li>
<li class="hoteldetails"><a href="AddHotelDetails.aspx">
<p>
<span class="entypo">j</span>Hotel Details</p>
</a></li>
<li class="hoteldirectory"><a href="AddHotelDirectory.aspx">
<p>
<span class="entypo">l</span>Hotel Directory</p>
</a></li>
<li class="appconfig"><a href="Appconfiguration.aspx">
<p>
<span class="entypo">#</span>App Configurate</p>
</a></li>
<li class="featoffers"><a href="OfferDashboard.aspx">
<p>
<span class="entypo">C</span>Offer Dashboard</p>
</a></li>
</ul>
now right now User Profile Is seleted now when i Click HotelDetail link I want to change it same as User Profile
i am trying this but its not working
$('#ulhotel li').click(function()
Thanks in advance.
You have
AddAdminDetail.aspx
AddHotelDetails.aspx
AddHotelDirectory.aspx
Appconfiguration.aspx
OfferDashboard.aspx
five different pages so you can also add active class to appropriate li tag on related page.
Comment Response
$('#ulhotel li').on('click',function(e)
and then set cookies for clicked li now when page redirected use that previously set cookies and add active class to appropriate li.
It is due to when you click link each time master page is loading.
you have to use script to change class in AddHotelDetails.aspx page to active related li.
In AddHotelDetails.aspx page you can use
$(document).ready(function(){
$('#ulhotel li').removeClass("active");
$('#ulhotel li.hoteldetails').addClass("active");
});
Hope this help you.
Suppose I have 2 pages Contact, About.
wp_nav_menu( array( 'show_home'=>true ) )
will display three links as 'Home', 'Contact', 'About'.
Here I would like to add one more custom link as 'Example' and navigate to www.example.com
Excepted result
<div class="menu">
<ul>
<li>
<a title="Home" href="http://www.test.com/">Home</a>
</li>
<li class="page_item page-item-2 current_page_item">
<a title="About" href="http://www.test.com/?page_id=2">About</a>
</li>
<li>
<a title="Home" href="http://www.test.com/?page_id=3">Home</a>
</li>
<li>
<a title="Home" href="http://www.example.com/?page_id=3">Example</a>
</li>
</ul>
</div>
This is using the new built in Menus available under Appearance -> Menus. Above the box of Pages there is a place to add custom links. You would put in "Example" and "www.example.com" and click "Add to Menu".