jQuery and JSF - NEWBIE question

[Melinda Savoy]

I am going thru my jQuery in Action book and the jQuery site in trying to pretty quickly ramp up on jQuery. Don't know that that can be done but giving it a try.

In attempting to see how jQuery works I took a sample from jQuery on my own JSF form and I cannot get what the jQuery site has been able to make work and that was when I type a value in my toAccountNumber field it should also be typed in the toPatientName field.

My jQuery code is as follows:

<script language="JavaScript">
	$("ARTransferForm\\:toAccountNumber").change(function() {
   		var toAccountNumber = $(this).val().substring(0,2);
        $("ARTransferForm\\:toPatientName").text(toAccountNumber);
   		}).change();
</script>

My JSF code is as follows:

<h:inputText id="toAccountNumber" maxlength="20" size="10" value="#{transactionBean.transaction.toAccountNumber}"/>

Any suggestions/direction would be greatly appreciated.

Just a note: ultimately I am trying to get the value from my toAccountNumber and via ajax thru jQuery be able to make a call where by I can take the results of that call and equate it to the select option in a dropdown box.

Thank you.

[Gregg Bolinger]

You need the # sign to reference an element's ID. (I hate what JSF does to IDs)

$('#ARTransferForm\\:toAccountNumber')

In this forum, we really want to see the generated HTML from the tags you are using, rather than the JSF tag itself.

Regarding getting the value, you'll need to be more clear about when you want to get this value. Are you wanting to send an ajax request every time you type a letter (bad idea) or what?

[Melinda Savoy]

Thanks for the reply Gregg. I am trying what you sent. I am new to JSF as well but have a project that my boss requires it be done in JSF though I'd rather be using Stripes, but I digress.

At any rate, regarding "getting the value...", I would like to get the value when the user types in the toAccountNumber and then moves away from the field and then ultimately, as I stated originally, I would like to make my ajax request via the java bean.

Hope that makes sense. Thanks again.

[Gregg Bolinger]

If you want to get the value when you leave the text field, you'll want the blur event, not change.

$('#ARTransferForm\\:toAccountNumber').blur(function() {
    var accountNumber = $(this).val();

    $.get(....);
});

The $.get function will issue a GET to the server via ajax using whatever URL you specify. See here for details regarding jQuery's get() function.

[Melinda Savoy]

Thanks again, Gregg. I appreciate the help.

Regards.

[Gregg Bolinger]

No problem. Please continue to ask if / when you get stumped.

[Melinda Savoy]

Thanks Gregg. I should not have posted a RESOLVED on this, my apologies. I put the # in from of my field name as suggested but I did not get the value in my toPatientName field. So what I did was put in an alert to ensure I was getting the toAccountNumber value but I'm not ever getting to the alert.

Here is what I changed the JavaScript code to:

<script language="JavaScript">
	$("#ARTransferForm\\:toAccountNumber").blur(function() {
   		var toAccountNumber = $(this).val().substring(0,2);
   		alert("This is my toAccountNumber value: " + toAccountNumber);
        //$("#ARTransferForm\\:toPatientName").text(toAccountNumber);
   		});
</script>

Any help would be appreciated. I know I've done something stupid I just can't find it. Thanks.

[Gregg Bolinger]

Can you show what the rendered HTML looks like for that textfield?

[Melinda Savoy]

Sorry. In my view source the HTML is as follows:

<td align="left" style="border: none" nowrap><font face="Arial" size="2">To Account No.</font> </td>
				<td align="left" style="border: none" valign="bottom" nowrap><input id="ARTransferForm:toAccountNumber" type="text" name="ARTransferForm:toAccountNumber" maxlength="20" size="10" /> </td>

Thanks.

[Gregg Bolinger]

Thanks. So I just realized your problem right after I asked for that code snippit. You don't have your jquery code in a document load function of any kind.

$(function() {

   $("#ARTransferForm\\:toAccountNumber").blur(function() {  
      .....
   });

});

That's probably the cause of the issue.

[Melinda Savoy]

Trying again but websphere is so slow to publish. So much stuff going on under the covers there. I will reply as soon as I get the page reloaded again. Thanks so much.

[Melinda Savoy]

Gregg -- again, many thanks. That is what it was. I went back into my jQuery book and also found what you said what the problem was. My apologies.

Thanks again. Regards.

[Gregg Bolinger]

Awesomez!

[David Newton]

Gregg Bolinger wrote:You don't have your jquery code in a document load function of any kind.

$(function() {
   $("#ARTransferForm\\:toAccountNumber").blur(function() {  
      .....
   });
});

Isn't $(function() {...}) shorthand for $(document).ready(function() {...})?

[Melinda Savoy]

In my initial post there was NO $(function(){...}) document load function and yes it is shorthand for $(document).ready...

Thanks.

[David Newton]

Oh, I thought he was quoting your code. Never mind.