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

Executing animation after the completion of a transition

Is there a way to synchronize the bounce animation with the scaling of an object, so that it appears smooth and fluid? I've tried using the animation delay property along with the transition delay property, but they don't seem to align correctly. ...

The outcome yielded from a jQuery AJAX request

I'm encountering an issue with my AJAX call using jQuery. I am sending information to the server and receiving back HTML data as intended. When I log the data in Firebug, it appears as an object with all of the tags. However, when I attempt to manipul ...

Unable to retrieve the desired information from the jQuery AJAX request

Here is an example of a C# web method: [WebMethod] public string Greetings() { return "Greetings from the server"; } This is the jQuery AJAX code used to call the web method: $.ajax({ url: "http://10.0.2.2/SampleService/ ...

Tips for acquiring the initial fully visible item within a scrollable element with horizontal alignment through jQuery

I'm trying to use jQuery to find the first visible element inside a scrollable DIV, but I can't quite get it to work correctly. Can someone please help me identify what's causing the issue? $('div').on('scroll', functio ...

Retrieve pairs of items from a given variable

Containing values in my 'getDuplicates' variable look like this: getDuplicates = 100,120,450,490,600,650, ... These represent pairs and ranges: Abegin,Aend,Bbegin,Bend My task is to loop through them in order to apply these ranges. var ge ...

In JavaScript, the task involves filtering through multiple arrays of objects to calculate the average value based on the contract number

Every object in the Array contains a contractNumber, but with repeated values. I am attempting to determine the average value of each unique contractNumber. var vendorArr=[{ "contractNumber":5258, "monthId":0, "value":2}, { ...

Monitoring changes to a SCSS file

I'm feeling completely baffled. I've put in my best effort to resolve this issue. The problem lies with my SCSS file and its watcher that doesn't appear to be functioning properly. A regular CSS file is not being generated at all. Here&apos ...

Visibility of the br tag is not detected

I need to keep one specific div visible on the page while hiding all other content. However, I am facing an issue where the <br> tag inside that div is not showing up. <div id='min320'>min 320px<br>screen width required</div ...

Get rid of the blue dots that appear on anchor tags

I am facing a strange issue with the anchors on my webpage. There are a few anchor tags in my body: <a href="link1.html"></a> <a href="link2.html"></a> <a href="link3.html"><img src="img1.png" /></a> Interestingl ...

Utilizing Laravel to send an ajax request to a controller

I am encountering a strange issue with the response from my ajax request. The controller's method below is supposed to return an ID: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; //use App\Http&bsol ...

Choose all the options from the Materialize Multiple Selection

I am currently utilizing Materialize's multiple Select feature. The values available in the select are dynamically populated via AJAX returned data using jQuery. My objective is to automatically select all the values within the multiple select by cal ...

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

WebSocket connection established on port 8888, while the web server is running on port 80 - incompatible to merge the two services

Here is some node.js server-side code that involves watching a file and sending modifications to the browser: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs = require('fs') a ...

Using Jquery for AJAX validation

I am currently working on setting up error messages for my form using jQuery. However, when I try to view the form, it only requires the email field to be filled out, even though I have specified that the name field is required as well. Below is the code I ...

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

The functionality of Croppie is currently not functioning within a jQuery Fancybox popup modal

For my project's image cropping and scaling requirements, I had initially used Jquery Croppie in a popup modal. To display the image in the popup, I utilized fancybox. However, I now face the challenge of integrating the crop and scale functionality w ...

Seamlessly adaptive HTML5 video playback

Has anyone figured out how to make an HTML5 video in an absolutely positioned <video> element resize to fit the window width and height without ever getting cropped? Many solutions I've come across rely on using the <iframe> tag, which is ...

Tree Grid in jqGrid with Offline Data

Accessing the jqGrid documentation for tree grid, I discovered the following information: "At present, jqGrid can only interact with data that is returned from a server. However, there are some tips and resources available that explain how to work w ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

jQuery Div Animation with Excluded Text

Currently, as I work on developing a website with Joomla, I have incorporated a jQuery module that adjusts the opacity of the enclosing div upon hovering over it. Unfortunately, this also affects the text within the div and gives it a less desirable appear ...