Why using the display:none property does not successfully conceal Struts 2 tags such as <s:textfield>

I am curious as to why the div tag is unable to hide the Struts2 tags. I have set up a div that should be hidden on load, and using onChange, I am triggering jQuery to toggle the visibility of the div tag...

<%@ taglib prefix="s" uri="/struts-tags" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$( document ).ready(function() {
    $("#t").click(function(){
        alert("I Know Its Not Working");
        $('#tt').toggle();
    });
    });
    </script>
</head>
<body>
<s:form >
<div style="display: none;" id="tt">
<s:textfield></s:textfield>
</div>
</s:form>
<input type="button" id="t">
</body>
</html>

Answer №1

When using Struts2, the default theme for generating HTML content of form fields like the textfield tag is the xhtml theme. This theme utilizes a <table> layout with <tr><td> for input elements, which may not align with your design if these elements are placed outside the <div> tag. To resolve this issue, you can opt for the css_xhtml theme if you prefer to use <div> instead of <tr><td> for your input fields. Alternatively, you can choose the simple theme if you want to omit generating <tr><td> or <div>.

<s:form theme="simple">
 <div style="display: none;" id="tt">
   <s:textfield name="myfield" />
 </div>
</s:form>

References:

  • Themes and templates

Answer №2

Tested and working perfectly for me :)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Page Title Here</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        //jquery functions here...


  $("#btnhidediv").change(function(){

        $("#togglediv").toggle();

    });



});
</script>



</head>
<body>
<form>
<div  id="togglediv" style="display: none;">
<s:textfield  type="text" name="abc" key="abc" size="11" label="abc"></s:textfield><br />

<p>Helloooooooooo</p>

</div>
<input type="text" id="btnhidediv">
</form>
<body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manipulating the display style of an element without using jQuery

Could anyone assist me with this issue? I am currently facing a challenge in making the following script functional. It is intended to hide the button after it has been clicked. The script is being called through Ajax and PHP, so I am unable to utilize jQ ...

The stacking order of a child element within a parent element, which has a transform

Hey there, I've encountered a problem and was wondering if you could assist me with it. In the code snippet provided below, you'll see that there are elements with: transform: translate(0,0); Within these elements, there is a "dropdown" elemen ...

Svelte components loaded with no design aspects applied

I encountered an issue while trying to integrate the "Materialify" and "Carbon Components for Svelte" libraries into my Sapper project. The components seem to be loading, but without any associated styles. I followed the installation commands provided on t ...

Slideshow box with images aligned perfectly

I have designed a container with images, but my goal is to: either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery. I attempted absolute positioning on both .box and .box img, as well as u ...

Ensure all <li> tags within a HTML document exhibit consistent jquery mousedown and hover effects, abstaining from the assignment of unique IDs to each

I understand that this approach might not be correct, but I wanted to create a simulation of what I am trying to achieve. Is there a way for each <li> element within a specific <ul class="myul"> to have separate mousedown, mouseout, hover effe ...

Issue with submitting form using Jquery on select action

There seems to be an issue with this jquery code that is supposed to trigger a form submit when a drop down select is changed. It works fine on our test site, but once we move it to the live website, it breaks. Can someone help us troubleshoot and identify ...

Binding Kendo UI grid two times

Recently tasked with troubleshooting a Kendo app that I've inherited and facing a major roadblock. The search page on the app is binding to the datasource twice, and I'm struggling to identify the root cause of this issue. Below is the grid code ...

Can we streamline the JSON value reading functions for this instance?

I received a JSON format like this { "items": { "item": { "Beverages": [ { "id": "0001", "name": "Coke", "image": { "url": "json_i ...

Click on the button to send the input field

Below you'll find an input field and a button: <input id="pac-input" class="controls" type="text" placeholder="Search! e.g. Pizza, Pharmacy, Post office"> <button id="new" class="btn btn-success">Submit</button> Currently, when te ...

Dynamic Search Feature Using AJAX on Key Press

Currently, I have developed an AJAX search function that retrieves keyword values upon key up and triggers the script. The objective is to update the content area with results in alphabetical order as the user types each key. However, the issue I am facin ...

Transform a JQuery function using the each method into vanilla JavaScript

Seeking assistance. I have developed a multilingual static site using JQuery and JSON, but now I want to switch to simple JS. Most of the code is ready, except for the portion commented out in the JS (which works fine with JQuery). var language, transla ...

Tips for sending an XML string in an ajax request to an MVC controller?

I have a challenge with posting an XML string to an MVC controller using an Ajax call. The MVC controller only accepts a string parameter, and I'm struggling to successfully process the request. How can I effectively send the XML string to the Control ...

Steps for inserting a video into a new div upon selecting a hyperlink

Looking for a way to link menu elements to corresponding videos in adjacent divs? I have two divs set up - one with the menu list and another right next to it where the videos should be loaded. Forms seem like a potential solution, but I lack expertise i ...

Unable to choose fields and options within the popup box

Interacting with jQuery: $("#type_name").click(function(){ $("body").append('<div class="modalOverlay">'); $("#add_form").fadeIn(1000); $("#first_name").val(""); $("#email").val(""); ...

Slick slider issue: Unexpected TypeError - the slick method is undefined for o[i]

I'm facing an issue where, upon clicking the search button, I want the previous search results to clear and new ones to be displayed. However, this action triggers a slick slider error, causing all items to align vertically instead of in the intended ...

Displaying content on a webpage using PHP, AJAX, and HTML

Looking to update my current form setup. I have a basic Form below: <form action="" method="POST"> <input type="button" value="Generate Numbers" onclick="on_callPhp1()"/> </form> Accompanied by this javascript code: <script type="te ...

Display a modal before leaving the page?

I need to display a modal message when a user navigates away from the page, triggered by a successful AJAX call. The issue is that if the message loads too quickly, the user may not have enough time to read it before being directed to another page. This is ...

What is the best method to retrieve the nested value in this JavaScript/HTML code?

Can anyone help me extract the value "Yes, I am a Speaker" from this code using Javascript DOM element with getElementById? The challenge is that the value is nested inside a list element without any specific attributes. Each block of code has a unique l ...

Discover the best way to integrate your checkbox with your Jquery capabilities!

I am having trouble getting my 3 checkboxes to interact with the JQuery button I created. The goal is for the user to be able to select an option, and when the button is clicked, the selected options should download as a CSV file from my feeds. Below is th ...

Center elements at % on the webpage using CSS styling

When creating two bars at 70% and 100%, I also want a small triangular shape to point specifically at the 70% mark. Here is how I am currently drawing the triangle: .arrowUp { width: 0; height: 0; border-left: 10px solid transparent; border-right ...