jquery function call with parameters

Question

I have a table with a bunch of buttons like so:

<tr class="hr-table-cell" >
    <td>REcord 1</td>
    <td>
        <INPUT type="button" value="Approve"  onclick="" />
        <INPUT type="button" value="Reject"  onclick="" />
        <INPUT type="button" value="Delete"  onclick="fnDeletePpAppl(222445,704);" />
    </td>
  </tr>

  <tr class="hr-table-cell" >
    <td>REcord 1</td>
    <td align="center" class="hr-table-bottom-blue-border" valign="middle">
        <INPUT type="button" value="Approve"  onclick="" />
        <INPUT type="button" value="Reject"  onclick="" />
        <INPUT type="button" value="Delete"  onclick="fnDeletePpAppl(237760,776);" />
    </td>
  </tr>

I have my jquery like so:

  <script type="text/javascript"> // JQUERY stuff
    $(document).ready(function(){

  function fnDeletePpAppl(empno, applno) {
    alert('Entering here');
    $("form").get(0).empno.value = empno;
    $("form").get(0).applNo.value = applno;
    $("form").get(0).listPageAction.value = "delete"; 
    $("form").get(0).action.value = "pprelreqlist.do";
    $("form").get(0).submit();

  }

});

This doesn't seem to work.I thought this means, the function is ready only after the dom is ready. After the dom is ready and i click the button, why is not recognizing the function declaration within the .ready() function? However if i use the function directly:

  <script type="text/javascript">

  function fnDeletePpAppl(empno, applno) {
    alert('Entering here');
    $("form").get(0).empno.value = empno;
    $("form").get(0).applNo.value = applno;
    $("form").get(0).listPageAction.value = "delete"; 
    $("form").get(0).action.value = "pprelreqlist.do";
    $("form").get(0).submit();

  }

This works. I want to get my fundamentals straight here... If i do the declaration without the .ready() , does that mean i'm using plain vanilla jscript?

If i were to do this with the document.ready - the usual jquery declaration way, what would i have to change to make it work?

I understand there are much better ways to do this like binding with buttons etc, but I want to know why this particular way doesn't seem to be working. Thanks.

Cheers. K

Answer 1

By declaring the function outside of ready , you are declaring it at a global scope, so it is accessible by the DOM declaration.

Otherwise, if you declare it inside ready , you are declaring a function that is "private" to the scope of ready - nothing outside of this function can see the declaration.

Answer 2

$(document).ready() is to execute javascript ONCE the DOM is ready. In your case, you are simply defining a function which is part of the dom, and should be done at page render.

An example would be if you wanted to call a function when the page first loads:

$(document).ready(function() {

   myCoolFunction();

});

you can also do the $(document).ready() like this:

$(function() {
   myCoolFunction();
});