Странное поведение Jquery Dialog в Mozilla и Chrome - PullRequest
Новая
       2

Странное поведение Jquery Dialog в Mozilla и Chrome

2 голосов
/ 28 декабря 2010

Я пытаюсь открыть Jquery Dialog, используя несколько кнопок, ну на самом деле я использую пример: http://jsfiddle.net/UQFxP/25/, что Павел Зубрицкий любезно дал мне, но странно, когда Я добавляю его в свой проект , он работает только в IE, тогда как в Mozilla и Chrome диалог появляется только на секунду, а затем сразу исчезает, после чего меня переводят на другую страницу (предыдущую страницу).

EDIT

Вот 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?

заранее спасибо

1 Ответ

0 голосов
/ 21 января 2011

Ваша кнопка отправляет внешнюю форму как "get", поэтому похоже, что диалоговое окно исчезает, когда действительно происходит перезагружение страницы.

Если вы удалите этот тег формы: 

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

Кнопка должна просто выполнить JavaScript, чтобы создать диалог

...