This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes JSF and the fly likes Adding onSubmit JS function in composite component not getting called Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "Adding onSubmit JS function in composite component not getting called" Watch "Adding onSubmit JS function in composite component not getting called" New topic
Author

Adding onSubmit JS function in composite component not getting called

john lazeraski
Ranch Hand

Joined: Nov 14, 2011
Posts: 76
Hey all,

Been trying to find a solution to this. I am using JSF 2, Primefaces 3 which loads jquery. I've found examples of how to add my own function handler to a form onSubmit. I've verified that my JS is being called, with the following:



In the above, the Working alert shows up when the page loads (after it's loaded). I also did verify that the $("#cc.clientId}:creditcard-form exists (set it on var, checked for null.. it wasn't null). So that seems to work fine. The form is tied to a command button:




The form DOES submit to my server, however the JS function above never activates. I am using a creditcard library called Braintree, which allows encryption of form fields before it's sent to my server, but I also need to save the billing address info. So I am trying to call the braintree routine in my own handler, instead of using it's specific form submit handler.

That's about alll I have right now. Is there any way to verify my function is attached to the form.. or perhaps some way to determine if it's being removed?

I realize this is a javascript related bit of code, but I am asking here in JSF because I am unclear if the JSF generator removes or somehow affects onSubmit or other calls on JSF elements such as the commandButton.

Thanks.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15950
    
  19

Just in case you were trying this: don't use the "$" jQuery notation on JSF View Definitions. It conflicts with EL's use of the "$" character. Use the "jQuery()" form instead.

I don't recommend doing brute-force for onsubmit when using a jQuery-based tag library such as Primefaces. Use the "onsubmit" attribute of the commandButton itself. ALso, don't forget that "onsubmit" actions must return a boolean value that indicates whether the submit should actually be done or not.


Customer surveys are for companies who didn't pay proper attention to begin with.
john lazeraski
Ranch Hand

Joined: Nov 14, 2011
Posts: 76
Interesting Tim.. because it seems to work. I figured out that I had to use the \\: instead of : within a $() for jquery. With that in place, my form is now working. So far I am not using any EL on my pages, just JSF and the #{} syntax.

The thing is, the Braintree.js creditcard processor api requires you to encrypt specific form elements, and their JS provides routines to encrypt and submit the form to your server side, encrypted. I am trying to allow a user to enter credit card billing info, but ALSO save the billing info as their home address since both are typically the same thing. So I need to submit two forms. The first is the encrypted form which the Braintree.js provides a jquery handler that you set up with the button (in my case h:commandButton) id. But, you can provide your own handler as well, for client side validation and such that their handler calls before it submits the encrypted data. Within that, in order to save the billing info but still send the credit card info encrypted, my own routine has to pluck each element out, submit the billing info as one form, then submit the encrypted data as another form. It sounds more complicated than it is, they provide a pretty nice and easy to use API that keeps my site from having to be PCI compliant with the exception of an SSL cert. But I am also trying to make my signup process super easy.. so that our users don't have to repeat/type the same thing twice (in this case, billing info IF they decide it's the same as their home address).

I am not quite sure the jQuery() notation you speak of, I'll have to look it up. I assume it's calling the actuall jquery object rather than using $. So when you say don't do brute force and use the onsubmit attribute... because the Braintree.js has it's own built in form + encrypt function, I am not quite sure how I should do that. I'll see if I can call all there stuff from my own routine directly, rather than use their onFormSubmit function with my button id.

Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15950
    
  19

I would be very leery of any javascript package that claims to "encrypt" sensitive data. If you really want secure data transmission, you're better off using an SSL channel where you are assured of state-of-the-art encryption algorithms. Besides, javascript code is client-side and therefore hackable.

The last time I worked with something similar, the credit-card validation service allowed be to hand off processing in such a way that I didn't lose local context. In fact, I believe that standard practice is to gather billing and shipping information via local app functions, then forward to the merchant service, which supplies the UI for the credit card and - when done - returns control to the local app with a go/no-go status.
john lazeraski
Ranch Hand

Joined: Nov 14, 2011
Posts: 76
I totally agree Tim. I've asked a bunch of questions. The way it works is you get a public key that you pass to their JS function, which uses it to encrypt the local fields. It then sends that data to your server, where you apply your private key to the encrypted values to further encrypt it before sending it to their server for the transaction. Check them out, https://www.braintreepayments.com/ Their support is top notch and used by a lot of clients. They were recommended by some java sites as well, so figured I'd try them out. They seem good and I posed the same question.. about security in a JS function that could be hackable. For now anyway they look good.. as long as I run in my own SSL cert when providing the form to users, it should remain 128-bit encrypted to my server, as well as they encrypt the form fields again. But I am not a security expert.

The solution you speak of is a way to avoid having to be PCI compliant on your own site because of users sending credit card info to your server. They have that option as well, but this option seemed to provide the right security along with a bit easier way of working with it.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15950
    
  19

I'm no security expert myself, but I believe that these days, 128-bit security is considered to be about on par with a Cap'n Crunch Secret Decoder Ring. And that was before all the ruckus about US Government snooping.

EL is the Expression Language for JEE and both the "$" and "#" markers are meaningful to it. The difference being that "$" provides access to an object (read-only) and "#" provides a reference to an object (read-write). Since much of the EL in JSF is used for things like referencing input control value properties, the "#" notation is almost universally used, but "$" notation still works, and as I said, can sometimes get confused by jQuery "$" form expressions.

External to EL environments (which include not only JSF but basic JSPs), jQuery accepts stuff like "$('#ssn').clear()" and "jQuery('#ssn').clear()" as identical. The "$" notation is obviously more compact, but you'll generally be using less raw jQuery on a JSF View Definition anyway.
john lazeraski
Ranch Hand

Joined: Nov 14, 2011
Posts: 76
I see.. I've always seen jquery with $().. although I do understand a little OO JS, so figured there was an object behind it somewhere, just haven't seen examples with using the JQuery() format. Thanks for the heads up.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Adding onSubmit JS function in composite component not getting called
 
Similar Threads
Basic Javascript debugging question - please
why is this JS validation function failing?
AJAX: Call back handler didn't work
Struts client side validation
h:commandLink and onsubmit