Question

我正在尝试使用多个按钮打开Jquery对话框，实际上我正在使用一个示例：http://jsfiddle.net/UQFxP/25/ Pawel Zubrycki友好地给了我，但奇怪的是当我将它添加到我的项目它只适用于IE，而在Mozilla和Chrome中，Dialog只出现一秒钟，然后立即消失，之后我被带到另一页（上一页）。

修改

这是html代码：

<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>

和jquery代码：

$(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);

});

正如您所看到的，它与上述网站上的示例相同或几乎相同。

代码有问题吗？任何与Mozilla和Chrome不兼容的东西？

事先感谢

Answer 1

您的按钮正在将外部表单作为“获取”提交，因此当重新加载页面时，对话框似乎正在消失。

如果您删除此表单标记：

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

该按钮应该只执行javascript来创建对话框

Jquery Dialog在Mozilla和Chrome中的奇怪行为

1 个答案: