CODEWITHSUNDEEP
javascriptjquery
Rio
Rio

Reputation: 75

unable to append image

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

Upvotes: 2

Views: 180

Answers (2)

Anvay
Anvay

Reputation: 363

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

Upvotes: 1

CodeBug
CodeBug

Reputation: 1667

$( 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.

Upvotes: 1

Related Questions