how to use trigger in Jquery to pass parameter data as well as control (this)

Question

I am trying to use same validation funtion for all my controls. But I dont know much in jquery and not been able to pass event handler to the trigger. I want to pass textbox id to my custom function. How can i do this

<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function(){
    $("#txtFirstName").bind('focusout', function()
   {
   $(this).trigger("customblurfocus",[$(this).val(), $(this).val() + " Required !", "Ok !"]);
   }
  );

  $(this).bind('customblurfocus',function(defaultInputValue,ErrorMessage,ValidMessage)
     {alert($(this).val()); 
     if($(this).val()=="" || $(this).val()==defaultInputValue)
      {
      $(this).val(defaultInputValue);
      $(this).siblings("span[id*='error']").toggleClass("error_set").text(ErrorMessage).fadeOut(3000);  
      }
     else
      {
      $(this).siblings("span[id*='error']").toggleClass("error_ok").text(ValidMessage).show(1000);
      }
     }
   );
    });
</script>

Answer 1

You can just make the call to your custom function within the body of the bound event handler:

$("#foo").bind("click", function(){
  callMyFunction( arg0, arg1, arg2 );
});

E.g.

function customHandler(defaultInputValue,ErrorMessage,ValidMessage) {
  // define the body of your custom function here
}

$(this).bind('customblurfocus', function(){
  customHandler(defaultInputValue, ErrorMessage, ValidMessage);
});

Answer 2

Update: I think I figured out what you want to achieve and this should work (there is no need in custom events):

function validate(element, defaultInputValue, ErrorMessage, ValidMessage) {
    alert($(this).val()); 
    if($(this).val()=="" || $(this).val()==defaultInputValue)
    {
        $(this).val(defaultInputValue);
        $(this).siblings("span[id*='error']").toggleClass("error_set").text(ErrorMessage).fadeOut(3000);  
    }
    else
    {
       $(this).siblings("span[id*='error']").toggleClass("error_ok").text(ValidMessage).show(1000);
    }
}

$(document).ready(function(){
   $("#txtFirstName").bind('focusout', function() {
      validate(this, "defaultValue here", "Error message here", "Valid message here");
   });
});

If you have questions, just ask :)

---

The first parameter to your bound event handler is the event object itself. See the example from the .trigger() documentation:

$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

and:

The event object is always passed as the first parameter to an event handler, but if additional parameters are specified during a .trigger() call as they are here, these parameters will be passed along to the handler as well.

So yours should look like this:

function(event, defaultInputValue, ErrorMessage, ValidMessage)

But it would be better if you described what error you do actually get.

---

Second issue: If I see correctly the second bind is somehow without context:

$(document).ready(function(){
     $("#txtFirstName").bind('focusout', function(){});

     $(this).bind('customblurfocus',function(defaultInputValue,ErrorMessage,ValidMessage)
     { //...
     });
});

To which element do you want to bind your custom event? What should $(this) be? In this state, even with adding event as first parameter to the function, this will not work.
Please tell us more about your HTML structure and/or what you want to achieve.