jquery dialog refreshing page on open

Question

I am confused why when I click a button from on:press to open a help function, when dialog opens, refreshed the browser? I would be grateful if someone could check my code and show me my error. If I click vidresize div, it points to localhost index page and refreshed the browser and closes the dialog.I suspect it may be the ready function. But being a complete nOOb, what would I know :-). Thanks

<script type="text/javascript">
 function help(){
    $(function() {
        $("#help").dialog({
            autoOpen: false,
            resizable: true,
            modal: true,
            title: "Action Help panel",
            width: 470,
            beforeclose: function (event, ui) {                    
                    jAlert("Thank you for using the help area\nand we hope it was of use to you.",
                                                     'Help area');                        
            },
            close: function (event, ui) {                    
            }        
        });
    });
    $("#help").dialog('open');
 }
</script>

++++++UPDATE+++++++

<div id="help" style="display:none;">
  <div id="help2">
    <ul>
    <li>
    <h6>ADDING A USER</h6>
    <p>To add a user, simply click the 'ADD' button from the menu and enter all the details. Please complete all
        the fields. The user details will then be added to the Contacts, Company and User areas.</p>

    <p>Simply hold the left mouse button and drag
      until the column changes to your preffered size.</p>
    </li>

    <li>
    <h6>RESIZING COLUMNS</h6>
    <p>If you find that the columns are not the size you would like, you can resize them 
      by hovering the mouse over the column and a resize line will appear.</p>

    <p>Simply hold the left mouse button and drag until the column changes to your prefered size.
        We have prepared a sample video for you to follow.</p>

    <br />
     <p> 
    <ul>
      <li><a href"#">Resizing Columns Video</a></li><br />
    </ul>

    </li>
    </p>
     <div id="vidresize">Video will be shown here</div>
    <br />
    <li>
    <h6>SHOW/HIDE COLUMNS</h6>

    <p>If you find that your grid is cluttered and you may perhaps only need to view and work on a cretain field,
        you can simply hide that field. Hover your mouse over the header in the grid and a small down arrow will
        appear. Simply click the arrow and you will be presented with the fields in the grid and simply untick the
        field you wish to hide. To show a field, simply reverse the tick process. Please note, that in Internet Explorer
        it may be necessary to adjust the grid width first then the arrow will appear.</p>
    <br />
    <ul>
      <li><a href"#">Show/Hide Columns Video</a></li><br /><br />
      </ul>
    </li>

    <li>
    <h6>REORDERING COLUMNS</h6>
    <p>You have the facility if you wish to reorder the columns simply by selecting the column name
        and holding the left mouse button drag the column to where you wish and simply release the mouse button.</p>
    </li>

    <li>
    <h6>CHANGE COLUMN WIDTHS</h6>
    <p>If you find that some of the columns are too small and not showing all the data, you can resize them to amother size.
        If you hover your mouse in the line between the names, your cursor will change and then simply drag the column to the desired width.</p>
    </li>

    <li>
    <h6>SEARCHING ITEMS</h6>
    <p>By clicking the magnifying glass icon, a search box will appear and you can enter your search criteria, then
       press the enter key. All search results are displayed in the grid.</p>
    </li>

    <li>
    <h6>DELETING ITEMS</h6>

    <p>To delete an item, simply click the item you wish to delete, then confirm your selection.
        please be aware that this activity is permanent so use with caution.</p>
    </li>

    <li>
    <h6>EDITING ITEMS</h6>

    <p>If you wish to edit an entry, simply click on the row that you wish to edit and proceed to update any records that need updating.
        Then, press the update button and your update is finished. Please note, that you can only select 1 row to edit at a time.
    </p></li></ul>
  </div></div>

<script language="javascript" type="text/javascript">

            $(function() {
                $("#vidresize").hide();

            $('li a').click(function () {
                $("#vidresize").show();

            });});

</script>

Answer 1

Is it a button or a link? Because if you have something like:

<a href="something" onpress="help();">Help</a>

The default behavior is to follow the link. Try something link this:

$("#theIdOfTheButton").click(function(event) {
    event.preventDefault();
    // the rest of your code that opens the dialog
}

Answer 2

It seems like the button's default behavior may not be overridden. Try:

 function help(){
    return false;
    // rest of your code

Without seeing the button code, that's all I could suggest.