2011-11-14 104 views
0

我試圖運行從以下鏈接 http://jqueryui.com/demos/dialog/#modal-formjQuery模態窗口的形式無法正常顯示彈出

爲什麼不對話的形式出現一個彈出的代碼?

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sample Modal Dialog</title> 

<style> 
    body { font-size: 62.5%; } 
    label, input { display:block; } 
    input.text { margin-bottom:12px; width:95%; padding: .4em; } 
    fieldset { padding:0; border:0; margin-top:25px; } 
    h1 { font-size: 1.2em; margin: .6em 0; } 
    div#users-contain { width: 350px; margin: 20px 0; } 
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } 
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } 
    .ui-dialog .ui-state-error { padding: .3em; } 
    .validateTips { border: 1px solid transparent; padding: 0.3em; } 
</style> 
</head> 
<body> 

<div class="demo"> 

<div id="dialog-form" title="Create new user"> 
<p class="validateTips">All form fields are required.</p> 

<form> 
<fieldset> 
    <label for="name">Name</label> 
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> 
    <label for="password">Password</label> 
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
</fieldset> 
</form> 
</div> 


<div id="users-contain" class="ui-widget"> 
<h1>Existing Users:</h1> 
<table id="users" class="ui-widget ui-widget-content"> 
    <thead> 
     <tr class="ui-widget-header "> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Password</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John Doe</td> 
      <td>[email protected]</td> 
      <td>johndoe1</td> 
     </tr> 
    </tbody> 
</table> 
</div> 
<button id="create-user">Create new user</button> 

</div><!-- End demo --> 



<div class="demo-description"> 
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> 
</div><!-- End demo-description --> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(function() { 
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
    $("#dialog:ui-dialog").dialog("destroy"); 

    var name = $("#name"), 
     email = $("#email"), 
     password = $("#password"), 
     allFields = $([]).add(name).add(email).add(password), 
     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; 
     } 
    } 

    function checkRegexp(o, regexp, n) { 
     if (!(regexp.test(o.val()))) { 
      o.addClass("ui-state-error"); 
      updateTips(n); 
      return false; 
     } else { 
      return true; 
     } 
    } 

    $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Create an account": function() { 
       var bValid = true; 
       allFields.removeClass("ui-state-error"); 

       bValid = bValid && checkLength(name, "username", 3, 16); 
       bValid = bValid && checkLength(email, "email", 6, 80); 
       bValid = bValid && checkLength(password, "password", 5, 16); 

       bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter."); 
       // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
       bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]"); 
       bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 

       if (bValid) { 
        $("#users tbody").append("<tr>" + 
         "<td>" + name.val() + "</td>" + 
         "<td>" + email.val() + "</td>" + 
         "<td>" + password.val() + "</td>" + 
        "</tr>"); 
        $(this).dialog("close"); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     } 
    }); 

    $("#create-user") 
     .button() 
     .click(function() { 
      $("#dialog-form").dialog("open"); 
     }); 
}); 
</script> 


</body> 
</html> 

窗體顯示,但驗證沒有任何工作,彈出窗口不顯示!

+0

創建請提供瀏覽器名稱和 – EKet

回答

4

我沒有在代碼中的任何地方看到jquery-ui js/css文件。 你必須包含它們才能讓jquery-ui小部件工作。

請仔細閱讀 ​​

+0

非常感謝!我知道我應該使用下載構建器來獲取代碼! – user930514

0

當我點擊創建新用戶時,我得到一個帶驗證工作的chrome彈出窗口。您可能遇到瀏覽器兼容性問題。您使用哪種瀏覽器?

+0

版本它可以在網站jquery.com,但是當我使用代碼它不工作! – user930514

+0

查看上一個答案。 –

1

你可以看到這個代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sample Modal Dialog</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all"> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"> 
<style> 
    body { font-size: 62.5%; } 
    label, input { display:block; } 
    input.text { margin-bottom:12px; width:95%; padding: .4em; } 
    fieldset { padding:0; border:0; margin-top:25px; } 
    h1 { font-size: 1.2em; margin: .6em 0; } 
    div#users-contain { width: 350px; margin: 20px 0; } 
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } 
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } 
    .ui-dialog .ui-state-error { padding: .3em; } 
    .validateTips { border: 1px solid transparent; padding: 0.3em; } 
</style> 
</head> 
<body> 

<div class="demo"> 
<div id="dialog" class="" style="width: auto; min-height: 115px; height: auto; display: none; " scrolltop="0" scrollleft="0" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
<div id="dialog-form" title="Create new user"> 
<p class="validateTips">All form fields are required.</p> 

<form> 
<fieldset> 
    <label for="name">Name</label> 
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> 
    <label for="password">Password</label> 
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
</fieldset> 
</form> 
</div> 


<div id="users-contain" class="ui-widget"> 
<h1>Existing Users:</h1> 
<table id="users" class="ui-widget ui-widget-content"> 
    <thead> 
     <tr class="ui-widget-header "> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Password</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John Doe</td> 
      <td>[email protected]</td> 
      <td>johndoe1</td> 
     </tr> 
    </tbody> 
</table> 
</div> 
<button id="create-user">Create new user</button> 

</div><!-- End demo --> 



<div class="demo-description"> 
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> 
</div><!-- End demo-description --> 

<script type="text/javascript"> 

$(function() { 
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
    $("#dialog:ui-dialog").dialog("destroy"); 

    var name = $("#name"), 
     email = $("#email"), 
     password = $("#password"), 
     allFields = $([]).add(name).add(email).add(password), 
     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; 
     } 
    } 

    function checkRegexp(o, regexp, n) { 
     if (!(regexp.test(o.val()))) { 
      o.addClass("ui-state-error"); 
      updateTips(n); 
      return false; 
     } else { 
      return true; 
     } 
    } 

    $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Create an account": function() { 
       var bValid = true; 
       allFields.removeClass("ui-state-error"); 

       bValid = bValid && checkLength(name, "username", 3, 16); 
       bValid = bValid && checkLength(email, "email", 6, 80); 
       bValid = bValid && checkLength(password, "password", 5, 16); 

       bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter."); 
       // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
       bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]"); 
       bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 

       if (bValid) { 
        $("#users tbody").append("<tr>" + 
         "<td>" + name.val() + "</td>" + 
         "<td>" + email.val() + "</td>" + 
         "<td>" + password.val() + "</td>" + 
        "</tr>"); 
        $(this).dialog("close"); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     } 
    }); 

    $("#create-user") 
     .button() 
     .click(function() { 
      $("#dialog-form").dialog("open"); 
     }); 
}); 
</script> 


</body> 
</html> 
+0

謝謝!它的工作原理 – user930514

0

始終是明智的,以確保$("#dialog-form").dialog({是內部$(function() {