Each submit button calls the same function

Question

I'm calling function for selecting component ID after page refresh:

$(document).ready(
  function() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
  }
)

My submit button example:

<h:form id="form">
  <h:commandButton id="btnSubmit" action="#{myBDE.save}" type="submit" >
    <f:ajax execute="@form" render="@form"/>
  </h:commandButton>
  ...
</form>

How can I create the same function to be called each time I click any submit button (I'm using ajax, so I'm working without page reloading, document.ready is not enough for me). Is it possible?

update (partially functional solution):

var myFunc = function() {
  document.getElementById('form:#{myBDE.componentId}').focus();
  document.getElementById('form:#{myBDE.componentId}').select();
};

$(document).ready(function() {
  myFunc();
  $('input[type=submit]').click(myFunc);    
});

I can call the function adding onclick="return myFunc();" to h:commandButton, problem is, that <f:ajax> render the form after calling the function, so the select and focus is cleared :(

Can't you just add an `onclick()` event handler to the submit buttons and run the function from them? — Felix Guo, Nov 24 '12 at 08:19
Yes, i can, but I hoped, jQuery or Javascript has some common method for submiting form (something like $(document).ready after page refresh) — gaffcz, Nov 24 '12 at 08:22
@gaffcz, jQuery does have a built-in system for this. It's called "delegation". I explained in my answer. — Ben Lee, Nov 24 '12 at 10:25
@gaffcz Are you eventually going to end up calling `` after certain `h:commandButton` in the same form ? cause if you do , you better turn those buttons to use `` and call `myBDE.save` in the end of those bottons actions, No need for jQuery here... — Daniel, Nov 24 '12 at 13:46
@Daniel: hmm, i'm not sure if I understand you well, but how can I call `MyBDE.save` after `f:ajax`? — gaffcz, Nov 24 '12 at 15:58
I mean , why don't you make all your submit buttons have `` and call the save method in that button action ? (this is relevant in case you gonna click some submit button with jQuery anyway...) — Daniel, Nov 24 '12 at 16:15
Aha, they do that. Problem is, that the java method is called, jquery function is called, appropriate field is focused and after that, unfortutanely, form is rendered (and i loose the focused field) :( — gaffcz, Nov 24 '12 at 16:31

score 2 · Answer 1 · answered Nov 24 '12 at 08:20

2

Give the function a name (currently, its an anonymous function), and then call the function as and when you need.

$(document).ready(
  onPageLoad(); // call it when page loads    
  $('form').submit(onPageLoad); // also call whenever a form is submitted
)

function onPageLoad() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
    return true;
}

answered Nov 24 '12 at 08:20

Ayush

41,754
51
164
239

Thank you, but `$('form').submit(onPageLoad);` is never called. My form's ID is really "form".. – gaffcz Nov 24 '12 at 08:38
If you only want to target the form with id 'form', change the selector above to `$('#form')` – Ayush Nov 24 '12 at 08:45

score 1 · Accepted Answer · answered Nov 24 '12 at 08:34

1

This should work

$('input[type="submit"]').click(function(){ 
  document.getElementById('form:#{myBDE.componentId}').focus(); 
  document.getElementById('form:#{myBDE.componentId}').select();
 });

In fact you can bind a function to any events. In this case it is the click event for the input tag with the attribute type=submit

answered Nov 24 '12 at 08:34

Spinbad

158
6

or if you have an id or class for the submit button u can use that as a selector – Spinbad Nov 24 '12 at 08:37
like $('#submit_button_id').click(function(){ //Your function calls }); – Spinbad Nov 24 '12 at 08:38
thank you, but it doesn't work... function is never called :( – gaffcz Nov 24 '12 at 08:48
i've updated my question - add the example code of submit button – gaffcz Nov 24 '12 at 08:48
You mean even $('#btnSubmit').click(function(){}); doesnt work? – Spinbad Nov 24 '12 at 08:52
Sorry, `$('input[type="submit"]').click(function(){});` is working. Problem is that only if nested to `$(document).ready(function()..` and it seems not to be usable, whan I'm using ajax call – gaffcz Nov 24 '12 at 09:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/20030/discussion-between-spinbad-and-gaffcz) – Spinbad Nov 24 '12 at 09:54

Ben Lee · Answer 3 · 2012-11-24T10:28:17.437

You should delegate the handler to a higher-level dom element:

$(document).ready(function() {
  $('h:body').on('click', 'input[type=submit]', function() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
  });    
});

See jQuery.on().

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

And then later:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

So the event will be handled for all elements of that type, even if they are added later via ajax. Note that I used h:body here as the element to delegate to but you can use any element that exists at document.ready time and is guaranteed to be an ancestor of all submit inputs.

Thank you, it sounds good. Is it working for jsf pages? I'm using `` insted of `` tag. Your solution doesn't work form me yet.. — gaffcz, Nov 24 '12 at 10:27
@gaffcz, I changed the example to "h:body", but see the note I added at the end of the answer. You can use any ancestor element. — Ben Lee, Nov 24 '12 at 10:29
I dont't know why, but the nested function has never been called :( — gaffcz, Nov 24 '12 at 10:32

score 0 · Answer 4 · answered Nov 24 '12 at 08:19

0

If you have different ID or Name on them it's just to do somthing like

$(document).ready(function(){
    $('#btn1, #btn2, #btn3').on('click', function(evt){
        evt.preventDefault();
        //your code
        $(this).submit(); // or not submit, your choice
    });
});

answered Nov 24 '12 at 08:19

Andreas

2,336
2
28
45

Don't need to submit a form? `$(this).parents('form').submit()` – yoavmatchulsky Nov 24 '12 at 08:21
This doesn't work for me (using ajax call, it works without ajax), function(evt) is never called :( – gaffcz Nov 24 '12 at 09:46

score 0 · Answer 5 · answered Nov 24 '12 at 08:37

Try this thing

 $(document).ready( function (){

           $('input[type=submit]').click( function (){
                  // Whatever you want on submit button click option.
           }
 });

This will grab every submit button on the page and will bind click event to it, and this code will be called on any submit button click.

Each submit button calls the same function

5 Answers5

Linked