0
ユーザー情報をajax経由でphpファイルに送信するフォームがあり、フォームはブートストラップモーダルにあります。私は余分なフィールドを追加して目的に合っているかどうかを確認しようとしましたが、フィールドが完全に機能する前にそのフィールドを取り除くことに決めました。今、ajaxは私のPHPファイルに情報を送信していません。私は "Uncaught TypeError：$ .ajaxは関数ではありません"という通知を開発者ツールで受け取っています。私のコードにエラーはありますか？
FORM：
<?php
include_once("php_includes/check_login_status.php");
include_once("php_parsers/functions.php");
?>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title> <?php echo $u; ?></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<link href="toolkit.css" rel="stylesheet">
<link href="home.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script src="js/profile_edit.js"></script>
<script src="js/join.js"></script>
</head>
<body>
<div class="panel-body">
<h5 class="m-t-0">About <?php
if ($isOwner == "yes"){
echo '<small><a href="#" class="editlink" data-toggle="modal" data-target="#participantModal">Edit</a></small>';
} ?></h5>
<ul class="list-unstyled list-spaced">
<li id="city" class="datainfo">City: <a href="#">
<?php
if($city == ""){
echo "Needs to be updated";
} else {
echo "$city";}
?>
</a>
<li id="state" class="datainfo">State: <a href="#">
<?php
if($state == ""){
echo "Needs to be updated";
} else {
echo "$state";}
?>
</a>
<li id="FavoriteSport" class="datainfo">Favorite Sport: <a href="#">
<?php
if($favoriteSport == ""){
$favoriteSport = "Needs to be updated";
}
echo $favoriteSport;
?>
</a>
<li id="participation" class="datainfo">Has participated in sport above: <a href="#">
<?php
if($participation == ""){
$participation = "Needs to be updated";
}
echo $participation;
?>
</a>
</ul>
</div>
</div>
<?php include_once("template_pageBottom.php"); ?>
<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>
<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>
<!-- Modal -->
<div class="modal fade" id="participantModal" tabindex="-1" role="dialog" aria-labelledby="participantModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="participantModalLabel">Updating About</h4>
</div>
<div class="modal-body">
<form id="aboutForm">
<div class="form-group">
<label for="updatedCity">City:</label>
<input type="text" class="form-control" id="updatedCity" aria-describedby="updatedCity" placeholder="<?php if($city == ""){
$city = "What city are you in?";
} echo $city;?>">
</div>
<div class="form-group">
<label for="updatedState">State:</label>
<input type="text" class="form-control" id="updatedState" placeholder="<?php if($state == ""){
$state = "What state are you in?";
} echo $state;?>">
</div>
<div class="form-group">
<label for="sportSelect">Which sport do you like?</label>
<select class="form-control" id="sportSelect">
<option value="">Select sport</option>
<option value="Basketball">Basketball</option>
<option value="Baseball">Baseball</option>
</select>
</div>
<div class="form-group">
<label for="playedSelect">Have you played this sport before?</label>
<select class="form-control" id="playedSelect">
<option value="">Select participation status</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<input type="hidden" class="form-control" id="usernameSubmitting" value="<?php echo $u; ?>">
<div class="alert alert-success" id="successAlert" role="alert" style="display: none"></div>
<div class="alert alert-danger" id="updateFail" style="display:none" ></div>
<div class="alert alert-warning" id="warningAlert" role="alert" style="display: none"></div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onClick="about()">Save changes</button>
</div>
</div>
</div>
AJAX：
function about(){
var updatedCity = $("#updatedCity").val();
var updatedState = $("#updatedState").val();
var x = document.getElementById("playedSelect");
var playedSelect = x.options[x.selectedIndex].value;
var p = document.getElementById("sportSelect");
var sportSelect = p.options[p.selectedIndex].value;
var usernameSubmitting = $("#usernameSubmitting").val();
var aboutForm = document.getElementById("aboutForm");
$.ajax({
url: "../php_parsers/updateabout_parse.php",
type: "POST",
data: {
updatedCity: $("#updatedCity").val(),
updatedState: $("#updatedState").val(),
sportSelect: $("#sportSelect").val(),
playedSelect: $("#playedSelect").val(),
usernameSubmitting: $("#usernameSubmitting").val()
}
}).done(function(result) {
if (result == "success") {
$("#successAlert").html("Update successful").show();
} else {
$("#updateFail").html(result).show();
}
})
$('#participantModal').on('hide.bs.modal', function (e) {
if(updatedCity != ""){
$("#city").html('City: <a href="#"> ' + updatedCity + '</a>');
}
if(updatedState != ""){
$("#state").html('State: <a href="#"> ' + updatedState + '</a>');
}
if(playedSelect != ""){
$("#participation").html('Has participated in sport above: <a href="#"> ' + playedSelect + '</a>');
}
if(sportSelect != ""){
$("#FavoriteSport").html('Favorite Sport: <a href="#"> ' + sportSelect + '</a>');
}
$("#successAlert, #updateFail, #warningAlert").hide();
aboutForm.reset();
});
}
PHP：私は、私は二回のjQueryを含んでいたことが分かった。この問題を抱えていた
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include_once("../php_includes/db_conx.php");
$city = "";
$error = "";
$u = "";
$state = "";
$sportSelect = "";
$playedSelect = "";
$u = mysqli_real_escape_string($db_conx, $_POST['usernameSubmitting']);
if(!$_POST['updatedCity'] && !$_POST['updatedState'] && !$_POST['sportSelect'] && !$_POST['playedSelect']){
$error .= "No information was entered";
echo $error;
}else{
echo "success";
}
?>
jQueryの上にjQuery-slimを読み込んで、 '$ .ajax'を削除しています。しないでください – Phil
jQuery-slimなしで私のモーダルはすぐに起動すると隠すことができますか？ – Ace
– Ace