unable to append image

user_11745224 0
Viewed 109

I am trying to add all gifs in a pop-up window based on user input but I can't get it to work the image is not getting appended to the dialog box its opens but is empty how can I fix this?

regards

$( 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"/>

jquery javascript
2 Answers

I've had this problem before. Is your <script> tag above your code? In that block you gave us, it looks like it is above. In JavaScript, code is read from top to bottom, so try moving it to the bottom. If your <script> tag was below the code, please edit your question to add a code snippet with the exact code you made.

Edit:

In your code, you used an <img> tag, but the GIPHY API outputs an HTML file. Hence, you must use an <iframe>. I have edited the for loop in your done() function.

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);
}
user_104643750 

$( 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"/>

try this here i removed dataType:' text/html', from the ajax call, and added method: 'get',, hope this may help you.

user_129166910
Related