Share via

How to work with history.back() function in bootstrap tabs using jQuery in asp.net c#

Ashok Kumar 221 Reputation points
2023-01-04T11:26:41.82+00:00

I'm working with bootstrap tabs in my web page and I have used this below online CDN links

CSS link (used at header) :- https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

JS script (used at end of the body logic) :- https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js

And aspx and jQuery code is :- 

   <head runat="server">  
       <title></title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
     
        <link href=" https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />  
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>  
     
        
      <%-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  
       <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>  
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>  
     
     
       <script type="text/javascript">  
     
           $(document).ready(function () {  
                 
     
           });  
     
           function tradercommonbackclick() {  
     
               //alert('click');  
     
               window.history.back();  
     
               //$(".scannersbackbtn").on("click", function (event) {  
               //  //alert('hit');  
               //  event.preventDefault();  
               //   //history.back(1);  
               //   history.back();  
               //});  
     
           }  
     
   	</script>  
     
     
   </head>  
   <body>  
       <form id="form1" runat="server">  
           <div>  
     
               <div class="col-md-12">  
     
                   <ul class="eqportmenus tradermenus nav">  
                       <li class="active" data-bs-toggle="tab" data-bs-target="#nav-breakOut"><a href="#breakout">Break Out</a></li>  
                       <li data-bs-toggle="tab" data-bs-target="#nav-momentum"><a href="#momentum">Momentum</a></li>  
                       <li data-bs-toggle="tab" data-bs-target="#nav-reversion"><a href="#meanreversion">Mean Reversion</a></li>  
                       <li data-bs-toggle="tab" data-bs-target="#nav-trendReversal"><a href="#trendreversal">Trend Reversal</a></li>  
                       <li data-bs-toggle="tab" data-bs-target="#nav-gainersLosers"><a href="#gainerslosers">Gainers/Losers</a></li>  
                       <li data-bs-toggle="tab" data-bs-target="#nav-custom"><a href="#custom">Custom</a></li>  
                   </ul>  
               </div>  
     
               <div>  
                   <div>  
                       <a class="static_backbtn scannersbackbtn" onclick="tradercommonbackclick();"><i class="fa fa-angle-left" aria-hidden="true"></i>Back</a>  
                   </div>  
     
                   <div class="tab-pane fade" id="nav-breakOut" role="tabpanel" aria-labelledby="nav-break-tab">  
                       <p>Break Out</p>  
                   </div>  
     
                   <div class="tab-pane fade" id="nav-momentum" role="tabpanel" aria-labelledby="nav-momentum-tab">  
                       <p>Momentum</p>  
                   </div>  
                   <div class="tab-pane fade" id="nav-reversion" role="tabpanel" aria-labelledby="nav-mean-tab">  
                       <p>Mean Reversion</p>  
                   </div>  
     
                   <div class="tab-pane fade" id="nav-trendReversal" role="tabpanel" aria-labelledby="nav-trend-tab">  
                       <p>Trend Reversal</p>  
                   </div>  
     
                   <div class="tab-pane fade" id="nav-gainersLosers" role="tabpanel" aria-labelledby="nav-gl-tab">  
                       <p>Gainers/Losers</p>  
                   </div>  
     
                   <div class="tab-pane fade" id="nav-custom" role="tabpanel" aria-labelledby="nav-contact-tab">  
                       <p>Contact</p>  
                   </div>  
               </div>  
     
               <%--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>--%>  
     
           </div>  
       </form>  
   </body>

So here I'm using the Back a tag for going back of previously clicked tabs using history.back() jQuery logic

And I'm calling this tradercommonbackclick() method at a tag onclick event but my logic is not working properly

Suggest me how to achieve this bootstrap tab load using history.back().

Or is there any best way to achieve this ?

Note :- My query is if I click on the Break Out and Trend Reversal tabs and next if I click on the Back, the previous clicked tabs Break Out should load (like wise client clicked tabs should load)

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,566 questions

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. QiYou-MSFT 4,326 Reputation points Microsoft Vendor
    2023-01-05T06:42:17.517+00:00

    Hi @Ashok Kumar ,
    Try these three methods: 

     $("#button").click(function(event) {  
        event.preventDefault();  
        history.back(1);  
    });  

<a href="javascript: history.go(1)" id="button">back</a>  

<a href="javascript: history.back(1)" id="button">back</a>

    Best Regards
    Qi You

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

  2. AgaveJoe 29,281 Reputation points
    2023-01-05T14:17:05.897+00:00

    If you provide any better example links that would be best to me to learn the concept

    My example works as expected and triggers JavaScript history. I'm not sure why your code does not function as expected.

    Keep in mind, the community has not idea what you know or what you need to learn. With that being said it seems you need to learn Web Forms fundamentals, JavaScript events basics, and perhaps HTML fundamentals. Essentially general web development.

    The following example show both methods I recommended in my first post. The example starts by opening WebForm1. The link makes an HTTP GET request WebForm2. This creates browser history and a sends the Referer header in the HTTP request. Webform2 has two links. One link uses standard Web Forms server controls to populate a HyperLink using the [Referer] URL. The second link uses JavaScript to invoke the browser's back() feature.

    WebForm1.aspx 

    <!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Javascript/WebForm2.aspx">Goto WebPage 2</asp:HyperLink>  
    </form>  
</body>  
</html>

    WebForm2.aspx 

        <form id="form1" runat="server">  
        <div>  
            <asp:HyperLink ID="HyperLink1" runat="server">Go back using the referrer</asp:HyperLink><br />  
            <a href="#" onclick="tradercommonbackclick(); return false;">Go back using history</a>  
        </div>  
    </form>  
    <script>  
        function tradercommonbackclick() {  
            window.history.back();  
        }  
    </script>

    WebForm2.aspx.cs 

            protected void Page_Load(object sender, EventArgs e)  
        {  
            this.HyperLink1.NavigateUrl = Request.UrlReferrer.AbsoluteUri;  
        }

    If you are still having trouble with your code, post all the relevant code so the community is not forced to guess how the code is designed.

    I strongly recommend that you use standard Web Forms controls and tools when selecting Web Forms as the development platform. If you want to use jQuery/JavaScript libraries then learn MVC.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.