Jquery Dialog MozillaとChromeの奇妙な動作

Question

複数のボタンを使ってJqueryダイアログを開こうとしていますが、実際には例を使用しています：http://jsfiddle.net/UQFxP/25/Pawel Zubrycki親切に私にを与えました。これはInternet Explorerでしか動作しませんが、MozillaとChromeではダイアログが1秒間表示されてすぐに消えてしまい、その後は別のページ（前のページ）に移動します。あなたはそれが同じか、上の例とほぼ同じだ見ることができるように

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

}); 

：

<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コード：

EDIT

はここでhtmlコードです言及されたウェブサイト。

コードに何か問題がありますか？ MozillaとChromeに対応していないものはありますか？

おかげで事前に

Answer 1

あなたのボタンは、「取得」として、外側フォームを送信されるので、ページを再読み込みしているときに、本当にダイアログが消えているように見えます。

このフォームタグ削除する場合：

に

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

をボタンだけ（言及したウェブサイト上で）与えられた例はFFで動作