Jquery Dialog strange behaviour in Mozilla and Chrome

I'm trying to open a Jquery Dialog using multiple buttons, well actually I'm using an example: http://jsfiddle.net/UQFxP/25/ that Pawel Zubrycki kindly gave me, but strangely when I add it to my project it only works in IE, whereas in Mozilla and Chrome the Dialog it only appears for a second and then immediately disappears ,after that I am taken to another page (the previous page).

EDIT

Here's the html code:

<center>
    <form id="form1" name="form1" method="get" action="">
        <c:choose>
            <c:when test="${not empty lista}">
                <div class="scroll">
                    <fieldset >
                        <table id="tabla_estilo" border="0" align="center" cellpadding="2" cellspacing="1">
                            <thead>
                                <tr class="tableheader">                                  
                                   <!--Some other columns-->
                                    <td align="center">Reason</td>

                                </tr>
                            </thead>
                            <c:forEach items="${lista}" var="item">
                                <tbody>
                                    <tr>                                        
                                        <td>
                                            <button id="Add_<c:out value="${item.codigo}"/>" >Agregar</button>
                                            <input type="text" name="reason_<c:out value="${item.codigo}"/>" value="" />                                     

                                        </td>
                                    </tr>
                                </tbody>
                            </c:forEach>
                        </table>
                        <br/>
                    </fieldset>
                </div>               
            </c:when> 
        </c:choose>       
    </form>
    <div class="demo">
        <div id="formReason" title="Add Reason">
            <p class="validateTips">All the fields are required.</p>
            <form>
                <fieldset id="fieldsetForm">
                    <label for="reason" id="lblreason">Reason</label>
                    <textarea name="reason" id="reason"  rows="4" cols="20" class="text ui-widget-content ui-corner-all"></textarea>
                </fieldset>
            </form>
        </div>
    </div>
</center>

and the jquery code:

$(document).ready(function() {

    $("#dialog:ui-dialog").dialog("destroy");

    var reason = $("#reason"),
        allFields = $([]).add(reason),
        tips = $(".validateTips");

    function updateTips(t) {
        tips.text(t).addClass("ui-state-highlight");
        setTimeout(function() {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }
    $("#formReason").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Add Reason": function() {
                var bValid = true;
                allFields.removeClass("ui-state-error");

                bValid = bValid && checkLength(reason, "reason", 1, 120);

                if (bValid) {
                    //Add Functions
                    reason_name = $(".active_button").attr("id").replace("Add", "reason");
                    $('input[name^="' + reason_name + '"]').val(reason.val());
                    $(this).dialog("close");

                }
            },
            Cancelar: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $(".active_button").removeClass("active_button");
            allFields.val("").removeClass("ui-state-error");
        }
    });

    function submit_form(ev) {
        $(this).addClass("active_button");
   开发者_开发技巧     $("#formReason").dialog("open");
    }

    $('button[id^="Add"]').click(submit_form);

});

As you can see it's the same or almost the same as the example on the website mentioned.

Is there something wrong with the code? Anything that is not compatible with Mozilla and Chrome?

thanks beforehand

Your button is submitting the outer form as a "get", so it looks like the dialog is disappearing when really the page is being reloaded.

If you remove this form tag:

<form id="form1" name="form1" method="get" action=""></form>

The button should just execute the javascript to create the dialog