Instagram jQuery Search not showing anything

0 votes

I'm a newbie programmer and i've been reading the Instagram search tutorial over at EduVoyage (http://eduvoyage.com/instagram-search-app.html). Impressed by this, i've decided to try my hand at it to learn jquery and such. Problem is, I cant get his example to work. I've dumbed my app down and can get it to display the default "cat" search, but when i search on the web form, i get nothing. No errors, no results, nothing. I'm banging my head here trying to find out what I'm doing incorrectly. i know its probably something simple im missing, but any help is 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
207 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,640 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,880 points
4,523 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,880 points
13,889 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,880 points
7,169 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,670 points
1,068 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,510 points
934 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,880 points
13,927 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,880 points
22,259 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,880 points
2,877 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,640 points
13,835 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,640 points
2,068 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