2017-03-25 18 views
0

私は、Bootstrap 4を基にしてページを構築しようとしています。私はBootstrapには新しいので、少し試行錯誤しています。 jQuery/javascriptを使用して、別のPHPファイルをDIVにロードするためにいくつかのボタンを使用したいと思います。ロードするファイルが配置され、javascriptが実行されますが、.load()関数を使用する場所で停止します。エラーが発生しました。 "TypeError:$(...)。loadは関数ではありません" SOに関するレポートがいくつかありますが、適切な解決策を見つけることができないようです。

ヘッダー:

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Time Tracker<?php echo (isset($_SESSION['userrealname'])) ? " ::: ".$_SESSION['userrealname'] : ""; ?></title> 

    <!-- Bootstrap Core CSS --> 
    <!-- link href="css/bootstrap.min.css" rel="stylesheet" --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 

    <!-- Custom CSS --> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

マイボタン:

<div class="container"> 

<button type="button" class="btn btn-primary" id="overview">Overview</button> 
<button type="button" class="btn btn-primary" id="newcard">New Timecard</button> 

交換するDIV:

<div id="contents"> 

    <?php 

    //include('inc/overview.php'); 

    ?> 
</div> 

そして、私のHTMLの下部:

<!-- jQuery --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

    <script src="js/jquery.validate.min.js"></script> 
    <script src="js/crypto.js"></script> 
    <script src="js/user.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 

      $("#overview").click(function(){ 
       alert("OK"); 
       $("#contents").load("inc/overview.php"); 
      }); 

      $("#newcard").click(function(){ 
       $("#contents").html("<strong>test</strong"); 
      }); 

     }); 
    </script> 
</body> 

警告( "OK")はうまく動作しますが、次の行$( "#contents").load( "inc/overview.php");エラーが発生します。

誰でも正しい方向に解決を指摘できますか?前もって感謝します!

答えて

1

jQueryスリムにはload()機能がありません。フルバージョンを使用する必要があります。

+0

ありがとう、私は気付いていませんでした。フルバージョンに置き換えられ、それは動作します!今私はあなたの応答を受け入れられた答えとしてマークするまで7分待つ必要があります... – Ad123

+0

私はそれも知らなかったが、スリムなバージョンを使用していたことに気付き、それを検索しました:) – Alex

0

Alexが言ったように、完全なJQueryを使用してください。 さらに問題を避けることをお勧めします。

var {insert name here} = JQuery.noConflict() 
関連する問題