jquery ajax spotify php bootstrap 模式未显示
jquery ajax spotify php bootstrap modal not showing up
我想要完成的事情:
单击图像从 spotify api 检索艺术家信息并将其显示为模态。
我实现了在 console.log 和 window.alert 中检索和显示请求的信息。
但我只是不明白如何通过模态来处理它。
我是 fatfree (f3) php 框架,bootstrap,jquery。
这是 jquery 部分:
(function(){
var artistId = "";
$(document).ready(function() {
let token =
"token";
// todo: get token from php variable
$("img").click(function() {
var artistId = $(this).attr("data-id");
$.ajax({
url: "https://api.spotify.com/v1/artists/" + artistId,
headers: { Authorization: "Bearer " + token },
success: function(result) {
$.ajax({
type: "POST",
data: {myData:result},
url: "/views/content/artistdetails.php",
success:
function(){
console.log('yes');
$('.modal').modal('show')
console.log(result);
},
error: function(e) {
console.log(e.message);
}
}
)
}
});
});
});
artistdetails.php 用于模式(注意,我只是从 bootstrap 复制了 html,首先我需要显示它)
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="getCode">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我浏览了很多关于这个主题的文章,只是没有找到错误。
感谢您的帮助!
您需要在执行 ajax 的同一页面中显示模态框。所以,如果你想显示模态,你只需 运行 $('.modal').modal('show')
,但如果你想在模态中显示 Spotify API 的响应,你可以这样做:
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Spotify API Response</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="getCode">
<p id="getCodeText"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
(function() {
var artistId = "";
$(document).ready(function() {
let token =
"token";
// todo: get token from php variable
$("img").click(function() {
var artistId = $(this).attr("data-id");
$.ajax({
url: "https://api.spotify.com/v1/artists/" + artistId,
headers: {
Authorization: "Bearer " + token
},
success: function(result) {
console.log(result);
// Here you change the text of the <p></p> element in your modal's body.
$('#getCodeText').html(result);
// Here you show the modal.
$('.modal').modal('show');
}
});
});
});
});
</script>
我想要完成的事情: 单击图像从 spotify api 检索艺术家信息并将其显示为模态。 我实现了在 console.log 和 window.alert 中检索和显示请求的信息。 但我只是不明白如何通过模态来处理它。 我是 fatfree (f3) php 框架,bootstrap,jquery。
这是 jquery 部分:
(function(){
var artistId = "";
$(document).ready(function() {
let token =
"token";
// todo: get token from php variable
$("img").click(function() {
var artistId = $(this).attr("data-id");
$.ajax({
url: "https://api.spotify.com/v1/artists/" + artistId,
headers: { Authorization: "Bearer " + token },
success: function(result) {
$.ajax({
type: "POST",
data: {myData:result},
url: "/views/content/artistdetails.php",
success:
function(){
console.log('yes');
$('.modal').modal('show')
console.log(result);
},
error: function(e) {
console.log(e.message);
}
}
)
}
});
});
});
artistdetails.php 用于模式(注意,我只是从 bootstrap 复制了 html,首先我需要显示它)
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="getCode">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我浏览了很多关于这个主题的文章,只是没有找到错误。 感谢您的帮助!
您需要在执行 ajax 的同一页面中显示模态框。所以,如果你想显示模态,你只需 运行 $('.modal').modal('show')
,但如果你想在模态中显示 Spotify API 的响应,你可以这样做:
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Spotify API Response</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="getCode">
<p id="getCodeText"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
(function() {
var artistId = "";
$(document).ready(function() {
let token =
"token";
// todo: get token from php variable
$("img").click(function() {
var artistId = $(this).attr("data-id");
$.ajax({
url: "https://api.spotify.com/v1/artists/" + artistId,
headers: {
Authorization: "Bearer " + token
},
success: function(result) {
console.log(result);
// Here you change the text of the <p></p> element in your modal's body.
$('#getCodeText').html(result);
// Here you show the modal.
$('.modal').modal('show');
}
});
});
});
});
</script>