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
534 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,151 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,866 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,909 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,513 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,350 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,882 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,390 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,341 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,894 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,939 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