невозможно добавить изображение

Question

Я пытаюсь добавить все гифки во всплывающее окно на основе пользовательского ввода, но я не могу заставить его работать, изображение не добавляется в диалоговое окно, которое открывается, но пусто, как я могу это исправить?

с уважением

$( function() {
  $( "#dialog" ).dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
  $('#rio').on('click',function () {
    let user_input = prompt();
    const base_url = 'https://api.giphy.com/v1/gifs/search?'
    const  key = 'kibe1qE9jIYwWBU0V5YTuNJqYZPEOxOy';
    $( "#dialog" ).dialog( "open" );
        $.ajax({
          url:  base_url + 'api_key=' + key + '&q=' + user_input,
          dataType:' text/html',
          }).done(function(data) {
            console.log(data)
            for (let i = 0; i < data.data.length; i++) {
              // console.log(data.data[i].embed_url);
              let image = document.createElement('img')
              image.src = data.data[i].embed_url;
              document.getElementById('gifs_div').appendChild(image);
            }
          });
          console.log(user_input);
          console.log('looking up!');
        });
      } );

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div id="dialog" title="Basic dialog">
      <div class="gifs_div"></div>
    </div>
    <input id="rio" type="button" value="Gifs" title="Gifs"/>

Answer 1

$( function() {
  $( "#dialog" ).dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
  $('#rio').on('click',function () {
    let user_input = prompt();
    const base_url = 'https://api.giphy.com/v1/gifs/search?'
    const  key = 'kibe1qE9jIYwWBU0V5YTuNJqYZPEOxOy';
    $( "#dialog" ).dialog( "open" );
        $.ajax({
          method: 'get',
          url:  base_url + 'api_key=' + key + '&q=' + user_input,
          }).done(function(data) {
             // console.log(data)
            for (let i = 0; i < data.data.length; i++) {
              let frame = document.createElement('iframe');
              frame.src = data.data[i].embed_url;
              frame.title = "GIPHY GIF for " + user_input;
              document.body.appendChild(frame);
            }
          });
          console.log(user_input);
          console.log('looking up!');
        });
      } );

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div id="dialog" title="Basic dialog">
      <div class="gifs_div"></div>
    </div>
    <input id="rio" type="button" value="Gifs" title="Gifs"/>

попробуйте это здесь Я удалил dataType:' text/html', из вызова ajax и добавил method: 'get',, надеюсь, это может вам помочь.

Answer 2

У меня раньше была эта проблема. Ваш тег <script> находится над кодом? В том блоке, который вы нам дали, похоже, что он находится выше. В JavaScript код читается сверху вниз, поэтому попробуйте переместить его вниз. Если ваш тег <script> находился под кодом, отредактируйте свой вопрос, чтобы добавить фрагмент кода с точным кодом, который вы сделали.

Изменить:

В вашем коде вы использовали <img>, но GIPHY API выводит файл HTML. Следовательно, вы должны использовать <iframe>. Я редактировал для l oop в вашей функции done().

for (let i = 0; i < data.data.length; i++) {
    // console.log(data.data[i].embed_url);
    let iframe = document.createElement('iframe')
    iframe.src = data.data[i].embed_url;
    iframe.title = "GIPHY GIF for " + user_input;
    document.getElementsByClassName('gifs_div')[0].appendChild(iframe);
}