I have a form that sends user information through ajax to a php file, the form is on a bootstrap modal. I attempted to add an extra field to see if it would better suit the purpose but decided to get rid of it before that field the form worked perfectly. Now ajax is not sending information to my php file. I am receiving the notification of "Uncaught TypeError: $.ajax is not a function" in the developer tools. Is there an error in my code?
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:
<?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";
}
?>
答案 0 :(得分：0)
当我遇到这个问题时，我发现我把jQuery包括了两次。
检查您呈现的HTML并确保 jQuery仅包含一次，它将修复它。
答案 1 :(得分：0)
我不确定是否是因为Bootstrap 4引起的，但是在我的情况下，将ajax脚本更改为以下有效：
Private Sub Worksheet_Change(ByVal Target As Range)
ActiveSheet.Activate
If Not Application.Intersect(Range("C9"), Range(Target.Address)) Is Nothing Then
Select Case LCase(Target.Value)
Case Is = "yes":
Rows("10:10").EntireRow.Hidden = False
Case Is = "no":
Rows("10:10").EntireRow.Hidden = True
End Select
End If
End Sub