jquery get json with timeout

Question

.This is the code of my java script.I want to add error and timeout to my function when calling json with ajax...how can i do that..i am new to this..plz help..i am stuck..

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link href="js/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/index.css"/> 
        <title>Hello World</title>

        <script type="text/javascript" src="phonegap.js"></script>

        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
        <script>
        $('#reposHome').bind('pageinit', function(event) {
            loadRepos();
        });

        function loadRepos() {
            $.ajax("https://api.github.com/legacy/repos/search/javascript").done(function(data) {
                var i, repo;
                $.each(data.repositories, function (i, repo) {
                    $("#allRepos").append("<li><a href='https://github.com/" + repo.username + "/" + repo.name + "'>"
                    + "<h4>" + repo.name + "</h4>"
                    + "<p>" + repo.username + "</p></a></li>");
                });
                $('#allRepos').listview('refresh');
                setTimeout(function(){
                    loadRepos();
                 }, 5000);
          })
          .fail(function (xhr, ajaxOptions, thrownError) {
                 alert(xhr.statusText);
                 alert(xhr.responseText);
                 alert(xhr.status);
                 alert(thrownError);
            });

        }
        </script>
    </head>
    <body>
    <div data-role="page" id="pagetwo">

    <div data-role="header">

    <h1>My First page</h1>
    </div>
    <div data-role="main" class="ui-content">
    <p>Welcome to My page</p><br>

  <ul id="allRepos" data-role="listview"  data-filter="true">
        </ul>
    </div>
    <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

    </body>
</html>

Here i have also added the html part of my code..

try http://stackoverflow.com/questions/3543683/determine-if-ajax-error-is-a-timeout — Aamir Afridi, May 14 '14 at 09:24
i have seen that already..but i am stuck yet..so please tell me how to add this in my code — Aakash, May 14 '14 at 09:28
@user3541465 Check my answer for working version of your code :) — mohamedrias, May 14 '14 at 10:26

Vinoth · Accepted Answer · 2014-05-14T09:39:53.640

0

You can add the fail mathod for executing you error block codes.

 function loadRepos() {
        $.ajax({
            url: "https://api.github.com/legacy/repos/search/javascript",
            timeout: 1000, //change it to any value you want in milliseconds
        })
        .done(function(data) {
            var i, repo;
            $.each(data.repositories, function (i, repo) {
                $("#allRepos").append("<li><a href='https://github.com/" + repo.username + "/" + repo.name + "'>"
                + "<h4>" + repo.name + "</h4>"
                + "<p>" + repo.username + "</p></a></li>");
            });
            $('#allRepos').listview('refresh');
            setTimeout(function(){
                  loadRepos();
               }, 300000);
        })
        .fail(function (xhr, textStatus, thrownError) {
               alert(xhr.statusText);
               alert(xhr.responseText);
               alert(xhr.status);
               alert(thrownError);
        });
}

edited May 14 '14 at 09:39

answered May 14 '14 at 09:32

Vinoth

657
6
12

Thanx for this.it worked fine but no alert is shown and also listview is not appended,,please tell me what is the problem.. – Aakash May 14 '14 at 09:43
Check the network and see you are getting any response or error. – Vinoth May 14 '14 at 09:52
network is fine..but still not working..also there is no error.. – Aakash May 14 '14 at 09:59
yes there is an error...white list..unlimited access to network resources..how to resolve that – Aakash May 14 '14 at 10:02
This is returning the response correctly for me. Could you please create a jsfiddle and share the link? – Vinoth May 14 '14 at 10:06
and the list is appended in the list in your case??? – Aakash May 14 '14 at 10:08
I didn't try with the append, i just executed the ajax and checked the response because i don't know the exact html markup which you are using. So if you provide the jsfiddle, i can check easily. – Vinoth May 14 '14 at 10:10
i have not used jsfiddle..i am going to edit my question.. – Aakash May 14 '14 at 10:13
I created a fiddle but i didn't use the pageinit event to call the loadRepos method. I am directly calling the method. http://jsfiddle.net/D9Fh8/ – Vinoth May 14 '14 at 10:19
Thank you so much ..it worked fine and returned the response..worked..:) – Aakash May 14 '14 at 10:26
Can you do the up vote please? – Vinoth May 14 '14 at 10:29
it requires 15 reputation which i don't have – Aakash May 14 '14 at 11:45

score 0 · Answer 2 · answered May 14 '14 at 10:26

WORKING DEMO

Add dataType: 'jsonp' to your ajax object

Then, the payload returns you something like

"meta": {
    "X-RateLimit-Limit": "60",
    "X-RateLimit-Remaining": "58",
    "X-RateLimit-Reset": "1400066468",
    "Cache-Control": "public, max-age=60, s-maxage=60",
    "Vary": "Accept",
    "ETag": "\"4d8b8354d543d2739fd9dceb66f3b65e\"",
    "X-GitHub-Media-Type": "github.v3",
    "status": 200
  },
  "data": {
    "repositories": [
      {
        "type": "repo",
        "username": "airbnb",
        "name": "javascript",
        "owner": "airbnb",
        "homepage": null,
        "description": "JavaScript Style Guide",
        "language": "",
        "watchers": 9039,
        "followers": 9039,
        "forks": 1595,
        "size": 1694,
        "open_issues": 19,
        "score": 238.48807,
        "has_downloads": true,
        "has_issues": true,
        "has_wiki": true,
        "fork": false,
        "private": false,
        "url": "https://github.com/airbnb/javascript",
        "created": "2012-11-01T23:13:50Z",
        "created_at": "2012-11-01T23:13:50Z",
        "pushed_at": "2014-05-14T02:42:27Z",
        "pushed": "2014-05-14T02:42:27Z"
      },

So you can't just use data.repositories it should be payload.data.repositories

function loadRepos() {
        $.ajax({
            url: "https://api.github.com/legacy/repos/search/javascript",
            timeout: 5000,
          dataType: 'jsonp'

        })
        .done(function(payload) {
            var i, repo;
           $.each(payload.data.repositories, function (i, repo) {
                $("#allRepos").append("<li><a href='https://github.com/" + repo.username + "/" + repo.name + "'>" + "<h4>" + repo.name + "</h4>"+ "<p>" + repo.username + "</p></a></li>");
            });
            $('#allRepos').listview('refresh');

            setTimeout(function(){
                  loadRepos();
               }, 300000);
        })
        .fail(function (xhr, textStatus, thrownError) {
               alert(xhr.statusText);
               alert(xhr.responseText);
               alert(xhr.status);
               alert(thrownError);
        });
}

jquery get json with timeout

2 Answers2