CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Dan
Dan

Reputation: 1000

jquery .click() does not complete the same process as actually clicking on a link; need to click on actual link to have the process work

I am trying to mimic the process of clicking on a link on my HTML page. I am using the jQuery .click() function on a selector. The link is part of a Bootstrap nav-pills tab-based form. When I click on the nav-pills link, it works great - the tab on the form displays and displays all fields on that tab. When I run the code below - the .click() function - it displays the tab, but none of the fields are displayed on the tab until I manually click that nav-pills link.

Here is the code:

$("#tabDocumentsTab").click();

Here is the function/selector code I want to run:

$("#tabDocumentsTab").click(function (e) {
    console.log("tabDocumentsTab START");
    // Display Provider files...
    displayProviderFileUploads();
    // Display Adult PTP files...
    displayAdultPTPFileUploads();
    // Display Other files...
    displayOtherFileUploads();
    // Set the Page color To Non-State...
    changePageColorToNonState();
    // Set the current tab number...
    setCurrentPage(1);
    var linkText = $(this).text();
    var index = $(this).index();
    // If State Use Only tab - add text...
    if (index > 6 && index < 10) {
        linkText = linkText + " (State Use Only)";
    }
    // Now set the h3 value...
    $("#mainTitleH3").text(linkText);
    e.preventDefault();
    // Show current link section, hide all the rest...
    for (x = 0; x < totalSections; x++) {
        if (x == index) {
            // Show the current section...
            $("#displaySection" + x).show();
        } else {
            // Hide the rest...
            $("#displaySection" + x).hide();
        }
    }
    console.log("tabDocumentsTab END");
});

Here is the Bootstrap nav-pills HTML:

<!-- This is the NAVGIVATION section -->
                <div class="col-sm-2">
                    <ul class="nav nav-pills nav-stacked" id="mainNavList">
...
                        <li>
                            <a id="tabDocumentsTab" data-toggle="pill" href="#displaySection1">Documents</a>
                        </li>
...
                    </ul>
                </div>
                <!-- End of NAVGIVATION section -->

I found a few posts that did not give me the result I needed:

How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?

jquery click() on a link

Having trouble using jquery to click on a link

click event on a link doesn't work in jquery

Upvotes: 0

Views: 62

Answers (1)

Unmitigated
Unmitigated

Reputation: 89224

To show a tab in Bootstrap, you need to use $(selector).tab('show'). See the documentation.

$("#tabDocumentsTab").tab('show');


$('#menu1').tab('show');//show second tab (Menu 1)
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Toggleable Tabs</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1" id="menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions