JQUERY Ajax form, page refreshs & isn't supposed to in Safari, doesn't refresh in FF (works fine)

Question

I'm working on a AJAX form which lives in a JQUERY UI Dialog. It works great in FireFox, but for some reason, in safari it refreshes the page to: /?

Please let me know if somethings wrong here? Thanks

<div class="modal-container">
    <form onsubmit="" action="" id="list-dialog-form" name="list-dialog-form">
        <div id="modal-wrapper">
            <br><br>
            <div class="modal-inputbar">
                <span style="width: 100px;" class="inputbar-label">
                    <label>Edit List Name:</label>
                </span>
                <span style="width: 200px;" class="inputbar-input">

                        <input type="text" style="padding-right: 25px;" autocomplete="off" maxlength="140" id="listname" value="Untitled">

                </span> 
            </div>
        </div>
        <div id="modal-submit" class="modal-submit">
            <span class="left delete-wrap">

                    <span onclick="deleteThisList(15);" class="delete"> </span>

            </span>
            <span style="line-height: 2em;" class="right">

                <input type="hidden" value="15" id="tasklistID">

                <input type="submit" value="update" id="dialogcloser">
                <input type="button" onclick="$('#listeditdialog').dialog('close');" value="close" id="dialogcloser">
            </span> 
        </div>
    </form>
</div>

// Handles Updating the List Title
$("#list-dialog-form").submit(function(){

    // Ajax Spinner
    $("#listname").css("background", "url('/images/ajax-loader.gif') no-repeat scroll 98% center #FFF");

    $.ajax({
        url: '/ajax/listname-update/index.cfm',
        data: ({listname: $("#listname").val().trim(), tasklistID: $("#tasklistID").val()}),
        dataType: 'json',
        type: 'post',
        success: function( result ) {

            // Update the name in the top, project list
            $("#list-" + $("#tasklistID").val()).find('a').html($("#listname").val().trim());
            $("#list-" + $("#tasklistID").val()).effect('highlight', {color: '#BDC1C7'}, 500);

            //Remove the Ajax Spinner
            $("#listname").css("background", "#FFF");
            $("#listname").effect('highlight', {color: '#BDC1C7'}, 500);

            //close the dialog
            $('#listeditdialog').dialog('close');

        }
    });

    return false;

});

Answer 1

The reason this works in FireFox is that there's a trim function defined on String but it is not standard.

Change:

$("#listname").val().trim()

to

$.trim($("#listname").val())

Reference: $.trim