jquery ajax spotify php bootstrap модал не отображается - PullRequest
Новая
       18

jquery ajax spotify php bootstrap модал не отображается

0 голосов
/ 30 января 2020

Что я пытаюсь выполнить sh: Нажмите на изображение, чтобы получить информацию об исполнителе из spotify api и отобразить ее как модальную. Я добиваюсь, чтобы получить и показать запрошенную информацию в console.log и window.alert. Но я не могу справиться с этим через модал. Я не толстый (f3) php framework, 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 для модальный (обратите внимание, я только что скопировал html из bootstrap, сначала мне нужно показать его) 

<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">&times;</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>

Я просмотрел много статей, касающихся этой топики c, я просто Не найти ошибку. Спасибо за любую помощь!

1 Ответ

0 голосов
/ 30 января 2020

Вам нужно, чтобы ваш модал был на той же странице, где вы делаете 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">&times;</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>
...