Jquery blockUI problem on onclick

I have this code in my js file

function blockUI() {
    $.blockUI({ css: {
        border: 'none',
        padding: '15px',
        backgroundColor: '#000',
        '-webkit-border-radius': '10px',
        '-moz-border-radius': '10px',
        opacity: .5,
        color: '#fff'
    }
    });
    setTimeout($.unblockUI, 2000);
}

when I am trying to block the UI on Submit button click I a开发者_StackOverflow中文版m doing soemthing like this

<input type="submit" value="Save" onclick="javascript:blockUI();" class="t-grid-action t-button t-state-default" />

but on my oncick its not working for me? can any one tell me what is the problem?

thanks

you need to add return false; at the end of your function to prevent your form from posting

Make sure that your js file is properly referenced from your html file. Can you call other js functions from here? You can also use Firebug to see if the js file has been loaded. If so, set a breakpoint in your function to make sure it's been executed.

As ob mentioned, you may want to return false, depending on what you want your submit button to do after blockUI() is called, but you should return false after your function call, not during the function body.

Lastly, why are you calling this inline? jQuery was designed for UJS. You should have script tags in your html file that contain some jQuery code:

$(document).ready(function() {
  $('.submit').click(function() {
    blockUI();
    return false;
  });
});