未解決のJQueryダイアログ：エラー：初期化の前にダイアログでメソッドを呼び出すことができません。メソッド 'close'を呼び出そうとしました

私は第2ダイアログ（user.html）をロードするためのダイアログ（users.html）を持っています。私が2番目のダイアログを閉じるとエラーが出ます。 qualcusoは私を助けることができますか？ありがとうございます！未解決のJQueryダイアログ：エラー：初期化の前にダイアログでメソッドを呼び出すことができません。メソッド 'close'を呼び出そうとしました

ファイルusers.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

    <title>Users...</title> 

</head> 
<body> 
    <div> 
     <div id="div_users" title="Users..."> 
      <button id="btn_user">User</button> 
     </div> 
     <div id="div_users_user" > 
     </div> 
    </div> 


</body> 
<script type="text/javascript"> 
    $('#div_users').dialog({ 
     width: 500, 
     height: 400, 
     modal: true, 
     resizable: true, 
     autoOpen: true, 
     close: function(event, ui){ 
      console.log('close Users'); 
      $('#div_users').dialog('destroy').remove(); 
     }, 

     buttons: { 
      "Close": function(event, ui) { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(document).ready(function() { 
     $("#btn_user").click(function() { 
      console.log("New"); 
      $('#div_users_user').load('user.html'); 
     }); 
    }); 

</script> 
</html>

ファイルのユーザーのhtml：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

    <title>User...</title> 

</head> 
<body> 
    <div id="div_add_edit_user" title="New User..."> 
     <div id="div_user_main"> 
     </div> 
    </div> 


</body> 
<script type="text/javascript"> 
    $('#div_add_edit_user').dialog({ 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     resizable: true, 
     autoOpen: true, 
     close: function(event, ui){ 
      $('#div_add_edit_user').dialog('destroy').remove(); 
     }, 
     buttons: { 
      "Save": function() { 
       //TO DO.. 
       $('#div_add_edit_user').dialog('close'); 

      }, 
      "Cancel": function(event, ui) { 
       $('#div_add_edit_user').dialog('close'); 
      } 
     } 
    }); 


</script> 
</html>

出典

2016-10-20 pigobyte

あなたの第二のファイル（「ユーザーを

は、私は以下の私が簡略化され、2つのファイルのコードを示します.html "）実際にフルページではなく、スニペットの詳細です。したがって、jqueryとjqueryuiを再度宣言する必要はありません。あなたはそれらを2回宣言し、紛争があることが判明しました。私がやった

出典

2016-10-20 10:54:48 starmucks

はありません。これが理由ではありません。試してみると、あなたはそれを見るでしょう。 – pigobyte

上記のコードで正確に言うと、間違いがたくさんあります。タグ「メタ」と「リンク」は閉じなければなりません。ボタンの初期化ダイアログは、http：// api.jqueryui.com/dialog/#option-buttonsで指定する必要があります。等々。これらのエラーを修正し、user.htmlファイルのjqueryおよびjqueryuiへの参照を削除しました。 – starmucks

ok ..私はあなたの提案に従ってコードを修正しました。これは現在動作しています。最後のいくつかの変更を修正してください。 – pigobyte

users.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

    <title>Users...</title> 

</head> 
<body> 
    <div> 
     <div id="div_users" title="Users..."> 
      <button id="btn_user">User</button> 
     </div> 
     <div id="div_users_user" > 
     </div> 
    </div> 


</body> 
<script type="text/javascript"> 
    $('#div_users').dialog({ 
     width: 500, 
     height: 400, 
     modal: true, 
     resizable: true, 
     autoOpen: true, 
     close: function(event, ui){ 
      console.log('close Users'); 
      $('#div_users').dialog('destroy').remove(); 
     }, 

     buttons: { 
      "Close": function(event, ui) { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(document).ready(function() { 
     $("#btn_user").click(function() { 
      console.log("New"); 
      $('#div_users_user').load('user.html'); 
     }); 
    }); 

</script> 
</html>

user.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 


    <title>User...</title> 

</head> 
<body> 
    <div id="div_add_edit_user" title="New User..."> 
     <div id="div_user_main"> 
     </div> 
    </div> 


</body> 
<script type="text/javascript"> 
    $('#div_add_edit_user').dialog({ 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     resizable: true, 
     autoOpen: true, 
     close: function(event, ui){ 
      console.log('close'); 
      //$('#div_add_edit_user').parent.dialog('destroy').remove(); 
      $(this).dialog('destroy').remove(); 
     }, 
     buttons: { 
      "Save": function() { 
       //TO DO.. 
       $('#div_add_edit_user').dialog('close'); 

      }, 
      "Cancel": function(event, ui) { 
       console.log('cancel'); 
       //$('this').dialog('close'); 
       $('#div_add_edit_user').dialog('close'); 
      } 
     } 
    }); 


</script> 
</html>

出典

2016-10-21 10:31:26 pigobyte

郵便番号。 Mozilla Firefox 49でテストされています。このように動作します。最初のダイアログが開いたらページが完全に読み込まれます。「ユーザー」をクリックすると別のダイアログが開きます。この第2のダイアログは、「保存」ボタンまたは「キャンセル」のいずれかをクリックすると正しく閉じられます。デベロップツールにエラーはありません。私が正しく理解すれば、これは正確に必要なものです。

users.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <title>Users...</title> 
</head> 
<body> 
    <div> 
     <div id="div_users" title="Users..."> 
      <button id="btn_user">User</button> 
     </div> 
     <div id="div_users_user"> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#div_users').dialog({ 
       width: 500, 
       height: 400, 
       modal: true, 
       resizable: true, 
       autoOpen: true, 
       buttons: [{ 
        text: "Close", 
        click: function() { 
         $('#div_users').dialog("close"); 
        } 
       }] 
      }); 
      $("#btn_user").click(function() { 
       console.log("New"); 
       $('#div_users_user').load('user.html'); 
      }); 
     }); 
    </script> 
</body> 
</html>

user.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>User...</title> 
</head> 
<body> 
    <div id="div_add_edit_user" title="New User..."> 
     <div id="div_user_main"> 
     </div> 
    </div> 
    <script type="text/javascript"> 
      $('#div_add_edit_user').dialog({ 
       width: 'auto', 
       height: 'auto', 
       modal: true, 
       buttons: [ 
        { 
         text: "Save", 
         click: function() { 
          $(this).dialog("close"); 
         } 
        }, 
        { 
         text: "Cancel", 
         click: function() { 
          $("#div_add_edit_user").dialog("close"); 
         } 
        } 
       ] 
      }); 
    </script> 
</body> 
</html>

出典

2016-10-22 03:02:58 starmucks

未解決のJQueryダイアログ：エラー：初期化の前にダイアログでメソッドを呼び出すことができません。メソッド 'close'を呼び出そうとしました

答えて

関連する問題