Question

I’m new to Struts2, but I’m consistently running into issues with jQuery selectors not being able to access any of the Struts2 tags we have defined in our jsps.

I’m assuming that they don’t integrate without a lot of custom code or a plugin, but I haven’t been able to find anything definitive in writing about it. When I went to the strut2-jQuery plugin page they mention it’s better to use a plugin in their faq, but not something that is required.

Am I missing something here? If I have a struts2 tag for an element and try to select it using jQuery, it doesn’t seeem to work. I’m talking basic elements like

$('form').find(':input').change(function() { ...  //or

$('#testbutton').attr('disabled', true);  //or

 $('#formName').change(function() { 
          alert("Found form!"); 
     });

So when I look at view source, I see regular html code that gets generated from the tags, I just can’t reach those specific elements using selectors if it was from a struts2 tag versus a regular html tag with the same jQuery selector code.

One other item, I’m using something like this to reference jQuery on the jsp page:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

Answer 1

How the HTML is generated is not relevant to the client (the browser), and the client is ignorant of anything beyond the generated DOM.

If there’s an ID, or it’s an input, jQuery will find it–I’ve used plain jQuery (and Prototype) with S2 apps for years without issue.

Something else is wrong.

---

Edited to show JSP, rendered HTML, and console output.

JSP:

<s:form action="simpleForm">
  <s:textfield name="fname"/>
  <s:submit value="Go!"/>
</s:form>

Rendered HTML (assuming default "xhtml" theme):

<form id="simpleForm" name="simpleForm" action="/simpleForm.action" method="post">
  <table class="wwFormTable">
    <tr>
      <td class="tdLabel"></td>
      <td><input type="text" name="fname" value="" id="simpleForm_fname"/></td>
    </tr>

    <tr>
      <td colspan="2"><div align="right"><input type="submit" id="simpleForm_0" value="Go!"/>
      </div></td>
    </tr>
  </table></form>

Some console output:

> $("form")
[<form id=​"simpleForm" name=​"simpleForm" action=​"/​simpleForm.action" method=​"post">​…​</form>​]
> $("form").find(":input")
[<input type=​"text" name=​"fname" value=​"d" id=​"simpleForm_fname">​, 
 <input type=​"submit" id=​"simpleForm_0" value=​"Go!">​]
> $("form").find("input") // Don't need the ":"
[<input type=​"text" name=​"fname" value=​"d" id=​"simpleForm_fname">​,
 <input type=​"submit" id=​"simpleForm_0" value=​"Go!">​]