Form "refresh"/page reload needed to update data shown, but can't get INITIAL information to load through same function

Form "refresh"/page reload needed to update data shown, but can't get INITIAL information to load through same function

I have the form "refreshing" like I want through an ajax call -- refreshCategories(), but it's AFTER I submit the first time (the first time I just have regular php code spilling out stuff from mySQL into my page - so I can test it). After I submit it the first time, I can get a second set of  "refreshed" fields above the static code (the mySQL statements) by setting the .val() value of the DIV that is there. The inputs all work as expected from these "new" fields - cool. When I try to call the function in the ready() function for the INITIAL loading of content - and remove the static code (which eventually I need to do), I get "object expected' feedback from IE and no loading of the form. I get no feedback from Chrome or Firefox, but my page won't operate as expected.

I even tried to call the function from the click on the link that calls the form to be shown in the first place (if formname = "somename"{ refreshCategories() ;  ) - but I still get "object expected".

Do you know what I'm missing? I need my dynamic content (an updated query that has any new values just sent into the database by my submit) ready for me at all times with a page reload. Ugh - this is hard to communicate - example: if I just added an item, I want to see that item in the list that's on the same page. I can do that, but getting the populated list to start with I cannot seem to figure out and I'm stuck with whatever the database spills out when I originally landed on the page. Attached is a pic in case I didn't communicate it well...

function refreshCategories(){
                  $.ajax({
                           type: "post",
                           async: false,
                           url: "includes/loadMenuCategories.php",
                           //data: selectStr,
                           //dataType: 'html',
                           success: function(data){
                                    alert(data);
                                    $("#categoryOutput").html(data); //returns new database data

                           }
                  });
         }

It works when I call it here - but I don't click this button until AFTER I already select my actions:
$("#procCategories").click(function(){
                  checkCategories();
                           $.ajax({
                                    type: "post",
                                    async: true,
                                    url: procPage,
                                    data: urlString,
                                    //type: "html",
                                    success: function(data){
                                             $('#processBox').html(data.responseText);
                                             showProgress(form, textarea, data);
                                             refreshCategories();
                                             /// clear category form, reload with new entries.


                                    }
                           });
                  // };                   
              return false;//Stay on-page
         });

It doesn't work here, "object expected" or "refreshCategories() is not defined":
function showMe(num, form, max)   {
                  //function for showing/hiding forms depending on user's choice.
                  //start at 1st form
                var num2 = 1;
                 
                  if (num=="3"){
                           refreshCategories();
                  }
                 
                //hide any open forms (with ids from 1 thru max num of forms), open the one you want
                while(num2 <= max){
                        var form3 = form + num2;
                        //"hide"
                           $('#' + form3).slideUp("slow");
                           //get rid of message box if showing
                           $('#processBox').slideUp("slow");
                       
                        //add one to loop
                        num2=num2+1;
                }
               
                  //add number onto end of form to get form id
                  var form2 = form + num;
                  //"show"
                  $('#' + form2).slideDown("slow");
                   
        }

and it doesn't work here, "object expected":
$(document).ready(function(){
         //set the 'processBox' notification to hidden
         $('#processBox').css("display", "none");
         $("#processBox").hide();
         $("label.error").hide();
        refreshCategories();

});


Here's the HTML/static PHP I use to get the form initially. It's essentially the echo statements I get back in my ajax call (that works if I have that 2nd stupid "form" above in the DIV)... everything in this table needs to go away - the DIV works fine after the first submit

<div class="fourthtier" colspan="2"><a href="#" onclick="showMe('3','input',5);return false;" >:: Add/Edit/Delete Categories ::</a></div>
<div class="descTD">Add, edit, or delete categories for your menus: Appetizers, Salads, etc.</div>
<form name="input3" id="input3" method="post" style="display: none;">
    TOP FILE DYNAMICALLY REFRESHED, CANNOT FIGURE OUT HOW TO CALL INITIALLY
<div id="categoryOutput"></div>   
<table class="formTable" >
    <div id="initialCategoryOutput">
        <tr>
            <td colspan="2">Edit the name of an existing category:</td>
        </tr>
        <tr>
            <td class="formTD">CURRENT NAME</td><td class="formTD">CHANGE TO:</td><td class="formTD">DELETE?</td>
             
           
            <?php
             
            //EDIT or DELETE category names
                $ctr = 0;
                $query = "SELECT cat_name, cat_id FROM category ORDER BY cat_name";
                $list_result =  mysql_query($query) or die("Query failed : " .mysql_error());
                while ($line = mysql_fetch_array($list_result, MYSQL_ASSOC)) {
                    $ctr = $ctr + 1;
                    $cname = $line['cat_name'];
                    $categoryname = stripslashes($cname);
                   
                    //Show available categorynames
                    echo '<tr>';
                    echo "<td class='addformTD'>".$categoryname."</td>"."\n"."<td class='formTD'><input name='editCategoryName".$ctr."' id='editCategoryName".$ctr."'/></td>"."\n";
                    echo "<td class='formTD'><input type='checkbox' id='delete".$ctr."' name='delete".$ctr."' value='YES' onclick=".'"hideMe('."'editCategoryName".$ctr."');".'">'."\n";
                    //Show delete option
                    echo '<input type="hidden" name="origCategory'.$ctr.'" id="origCategory'.$ctr.'" value="'.$categoryname.'">'."\n";
                    echo '</td><tr/>'."\n";
                };
                echo '<input type="hidden" name="numCategories" id="numCategories" value="'. $ctr.'">';
               
            ?>   
    </div>   
        <tr>
            <td colspan="2" style="padding-top:5px;">or enter a new category name:</td>
        </tr>
        <tr>
            <td class="addformTD">NEW CATEGORY NAME</td><td><input type="text" name="newcategoryname" id="newcategoryname"/></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:right;"><input type="submit" value="Submit" name="procCategories" id="procCategories"/></td>
        </tr>
    </table>
</form>.