Instagram jQuery Search not showing anything

0 votes

I'm a newbie programmer, and I've been following an Instagram search tutorial I found online. Inspired by it, I've decided to try building it myself to learn jQuery. Problem is, I can't get the example to work. I can display the default 'cat' search, but when I try searching through the web form, I get no results—no errors, nothing. I'm really stuck and feel like I’m missing something simple. Any help would be greatly appreciated!

Here is js code:

var Instagram = {};

(function () {
    function toScreen(photos) {
        $.each(photos.data, function (index, photo) {
            photo = "<div class='photo'>" +
                "<a href='" + photo.link + "' target='_blank'>" +
                "<img class='main' src='" + photo.images.low_resolution.url + "' width='250'  height='250' />" +
                "</a>" +
                "<img class='avatar' width='40' height='40' src='" + photo.user.profile_picture + "' />" +
                "<span class='heart'><strong>" + photo.likes.count + "</strong></span>" +
                "</div>";
            $('div#photos-wrap').prepend(photo);
        });
    }

    function search(tag) {
        var url = "https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;client_id=XXXXXXXXXXXXXXXXXX"
        $.getJSON(url, toScreen);
    }

    $(function () {
        $('form#search button').click(function () {
            var tag = $('input.search-tag').val();
            Instagram.search(tag);
        });
        Instagram.search('cats');
    });
    Instagram.search = search;
})();

and the HTML

    <!DOCTYPE html>
    <html>
    <head>
<title></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'  type='text/javascript' charset='utf-8'></script><script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>
<link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
    </head>



    <body>
    <div id='photos-wrap'>
      <form id='search'>
       <button type='submit' id='search-button' tabindex='2'>
         <span class='button-content'>Search</span>
      </button>
     <div class='search-wrap'>
       <input class='search-tag' type='text' tabindex='1' />
      </div>
   </form>
  </div>
     </body>
     </html>

Jun 15, 2022 in JQuery by gaurav
• 23,260 points
536 views

1 answer to this question.

0 votes
The latest changes in Instagram has affected almost everyone using Instagram Feed on their website. There’s no CMS or website builder which can avoid the risk: WordPress, Shopify, Joomla, and other – if there’s any kind of Instagram integration into your website, it may have issues.

There’s good news for Instashow users, though! You can save the trouble and address support right away. We already have a solution for you, so don’t waste your time! And in case you have to deal with the problem on your own, we have come up with a list of main reasons why your Instagram feed is not working and provided simple and doable instructions for each case.
answered Jun 16, 2022 by rajatha
• 7,680 points

Related Questions In JQuery

0 votes
1 answer

Uncaught ReferenceError:Karma: jQuery is not defined

Hii @kartik, You first have to load jQuery ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
5,153 views
0 votes
1 answer

Error:jQuery scrollTop not working in Chrome but working in Firefox

Hello @kartik, If your CSS html element has the following overflow markup, scrollTop will ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,840 points
14,868 views
0 votes
1 answer

Error:jquery each loop return false not end the function

Hii @kartik, Returning from one function doesn't call as it's ...READ MORE

answered Jun 2, 2020 in JQuery by Niroj
• 82,840 points
7,912 views
0 votes
1 answer

jquery timepicker cdnjs.cloudflare does not working

jQuery Timepicker can parse the most used ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
1,515 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,352 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
15,885 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
23,400 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
3,344 views
0 votes
1 answer

Jquery validation plugin - TypeError: $(...).validate is not a function

The "$(...). validate is not a function" ...READ MORE

answered Jun 28, 2022 in JQuery by rajatha
• 7,680 points
16,908 views
0 votes
1 answer

jquery function val() is not equivalent to "$(this).value="?

val() method is primarily used to get the ...READ MORE

answered Jun 14, 2022 in JQuery by rajatha
• 7,680 points
2,943 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP