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.