locked
Javascrip or CSS Not Working Under Form Tag RRS feed

  • Question

  • User25455022 posted

    Hello,

    I added a tab to my page that has 3 buttons. When clicking each button the associated div is shown. This works perfectly if I don't use the form tag. But if I included it, the page will not work properly (flashing).

    Here is the code:

    (MasterPage)

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="OK2.Site1" %>
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head runat="server">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Key Results</title>
            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <style>
            body {
              padding-top: 50px;
            }
            .starter-template {
              padding: 40px 15px;
              text-align: center;
            }
            .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
                background-color:orange;    
            }
            .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
            color: #fff;
            background-color: transparent;
            }
            .navbar-inverse {
             background-color: gray;
             border-color: #080808;
             
            }
            .navbar-inverse .navbar-nav li a{
              color: white !important;
              }
            
            </style>
            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
            media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via
            file:// -->
            <!--[if lt IE 9]>
              <script
        src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    
        <script
      src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
        
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="images/SEC-Logo.png" width="30" height="30" alt="">
                </a>
              </div>
              <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="Default.aspx"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                  <li><a href="view.aspx"><span class="glyphicon glyphicon-file"></span> My OKRs</a></li>
                  
                  
                            </ul>
                          </div><!--/.nav-collapse -->
                        </div>
                      </nav>
        
           
                      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
                      <script
                  src="js/jquery-3.3.1.min.js">
                      </script>
                      <!-- Include all compiled plugins (below), or include individual
                      files as needed -->
    
                      <script src="js/bootstrap.min.js"></script>
           <form id="form1" runat="server">
        
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </body>
    </html>

    (ASPX Page) -- I have added text boxes, a label and a button for testing purposes

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="OKREdit.aspx.cs" Inherits="OK2.OKREdit" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        
        <link href="css/tabs.css" rel="stylesheet">
        
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <br />
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-user"></span> <b>Basic Information</b>
                        </div>
                       
                        <table class="table table-condensed">
                            <tr>
                                <th style="width:5%"><span class="label label-info fontSize1">Function</span></th>
                                <td style="width:20%">
                                    <asp:Label Font-Bold="true" ID="lblFunction" runat="server"></asp:Label></td>
                                <th style="width:5%"><span class="label label-info font fontSize1">Owner</span></th>
                                <td style="width:20%">
                                    <asp:Label Font-Bold="true" ID="lblOwner" runat="server"></asp:Label></td>
                                <th style="width:5%"><span class="label label-info fontSize1">Department</span></th>
                                <td style="width:20%"><asp:Label Font-Bold="true" ID="lblDepartment" runat="server"></asp:Label></td>
                                <th style="width:5%"><span class="label label-info fontSize1">Overall Score</span></th>
                                <td style="width:20%"><asp:Label Font-Bold="true" ID="lblOverallScore" runat="server"></asp:Label></td>
                            </tr>
                                                    
                        </table>
                    </div>
                </div>
                </div>
            </div>
        
        <!-- starting tabs section -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
        <div class="tab" style="border-radius: 25px; background-color: #337ab7; color:white; ">
      <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    
    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Button" /><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    
    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>
    
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
                    </div>
                </div>
            </div>
        <script src="js/tabs.js" type="text/javascript"></script>
    </asp:Content>

    (C# Code)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace OK2
    {
        public partial class OKREdit : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                
                Label1.Text = (int.Parse(TextBox1.Text.Trim()) + int.Parse(TextBox2.Text.Trim())).ToString();
            }
        }
    }

    (tab.css file)

    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        
    }
    
        /* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }
    
            /* Change background color of buttons on hover */
            .tab button:hover {
                background-color: gray;
            }
    
            /* Create an active/current tablink class */
            .tab button.active {
                background-color: orange;
            }
    
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
    }
    
    /* Fade in tabs */
    @-webkit-keyframes fadeEffect {
        from {
            opacity: 0;
        }
    
        to {
            opacity: 1;
        }
    }
    
    @keyframes fadeEffect {
        from {
            opacity: 0;
        }
    
        to {
            opacity: 1;
        }
    }

    (tabs.js file)

    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    document.getElementById("defaultOpen").click();

    Appreciate your help.

    Regards,

    Omar

    Sunday, September 15, 2019 6:30 AM

All replies

  • User-158764254 posted

    The default behavior of a button is to submit the form.
    The flashing you see is your form posting back

    update all your tab buttons to include the keyword "return" like this:

     <button class="tablinks" onclick="return openCity(event, 'Tokyo')">Tokyo</button>

    then in the very last line of your openCity script, add:

    return false;

    when a button's onClick script returns false, if prevents the form from being submitted.
     

    Sunday, September 15, 2019 12:43 PM
  • User665608656 posted

    Hi OmarOumi,

    After testing your code, as mbanavige said, when you click the button , after it finishes executing onclick's  js events, it will perform its default behavior, that is, submitting pages, which results in page refresh.

    To avoid this , you can also add return false after finishing js method to prevent refreshing page.

      <button class="tablinks" onclick="openCity(event, 'London');return false;" id="defaultOpen">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris');return false;">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo');return false;">Tokyo</button>

    Here is the result :

    Best Regards,

    YongQing.

    Monday, September 16, 2019 9:47 AM