0
Ich habe ein Formular, das Benutzerinformationen durch Ajax an eine PHP-Datei sendet, das Formular ist auf einem Bootstrap-modal. Ich habe versucht, ein zusätzliches Feld hinzuzufügen, um zu sehen, ob es besser zum Zweck passt, aber ich entschied, es loszuwerden, bevor dieses Feld die Form perfekt funktionierte. Jetzt sendet Ajax keine Informationen an meine PHP-Datei. Ich erhalte die Benachrichtigung von "Uncaught TypeError: $ .ajax ist keine Funktion" in den Entwicklertools. Gibt es einen Fehler in meinem 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";
}
?>
Sie laden jQuery-slim über die Oberseite von jQuery und entfernen damit '$ .ajax'. Tun Sie das nicht – Phil
ohne jQuery-slim meine Modal versteckt sofort nach dem Start gibt es eine Alternative zu diesem? – Ace
– Ace