search

sourcebitsllc / chocolatechip-ui

Mobile Web App Framework
www.chocolatechip-ui.com
MIT License
616 stars 88 forks source link

Default to asynchronous AJAX requests #4

Closed grrowl closed 11 years ago

grrowl commented 11 years ago

Otherwise the UI will hang while the request is being filled (sensible default)

grrowl commented 11 years ago

Actually, I'm finding that with async set to true, my error callback is firing twice before the success callback fires. Could you shed some light on this?

sourcebits-robertbiggs commented 11 years ago

Hmmm... Can I see your ajax request, minus the url?

grrowl commented 11 years ago

It seems to be a problem with request.onreadystatechange = handleResponse: if error is defined on line 63 (which it always is, to either options.error or $.noop) it will fire on any statechange that isn't a final success. (Chrome 30)

grrowl commented 11 years ago

here's my request code, using chocolatechip-3.0.5.js

        $.ajax({
          url: baseUrl + sourceKey,
          async: true,
          success: function onRequestSuccess(data) {
            console.log('got success', data);
          },
          error: function (xhr) {
            console.error("Couldn't fetch "+ sourceKey, xhr, navigator.onLine);
          }
        });
sourcebits-robertbiggs commented 11 years ago

OK, tell me if I've got this right. I want to set up an ajax request with error handling. If there's an error, it should fire twice. Well, it shouldn't, but that's the situation you're dealing with. Right?

grrowl commented 11 years ago

I would expect it to fire either the success or error callback once, only when the request is complete. Synchronous Ajax only fires one onreadystatechange because the js execution for the whole page is paused until the request completes.

On Monday, 11 November 2013, sourcebits-robertbiggs wrote:

OK, tell me if I've got this right. I want to set up an ajax request with error handling. If there's an error, it should fire twice. Well, it shouldn't, but that's the situation you're dealing with. Right?

— Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/pull/4#issuecomment-28167334 .

sourcebits-robertbiggs commented 11 years ago

Yeah, but at the moment you’re saying it’s firing twice for an error, though not for the success.

On Nov 10, 2013, at 5:42 PM, Tom McKenzie notifications@github.com wrote:

here's my request code, using chocolatechip-3.0.5.js

    $.ajax({
      url: baseUrl + sourceKey,
      async: true,
      success: function onRequestSuccess(data) {
        console.log('got success', data);
      },
      error: function (xhr) {
        console.error("Couldn't fetch "+ sourceKey, xhr, navigator.onLine);
      }
    });

— Reply to this email directly or view it on GitHub.

grrowl commented 11 years ago

Sorry I may have been unclear — it fires two errors then the success.

On Monday, 11 November 2013, sourcebits-robertbiggs wrote:

Yeah, but at the moment you’re saying it’s firing twice for an error, though not for the success.

On Nov 10, 2013, at 5:42 PM, Tom McKenzie <notifications@github.com<javascript:_e({}, 'cvml', 'notifications@github.com');>> wrote:

here's my request code, using chocolatechip-3.0.5.js

$.ajax({ url: baseUrl + sourceKey, async: true, success: function onRequestSuccess(data) { console.log('got success', data); }, error: function (xhr) { console.error("Couldn't fetch "+ sourceKey, xhr, navigator.onLine); } }); — Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/pull/4#issuecomment-28167548 .

sourcebits-robertbiggs commented 11 years ago

Let me get this straight, you’re getting your error callback firing twice when the success files? Let me set up some tests to see if I can spot something. This is a new one for me. On Nov 10, 2013, at 5:56 PM, Tom McKenzie notifications@github.com wrote:

Sorry I may have been unclear — it fires two errors then the success.

On Monday, 11 November 2013, sourcebits-robertbiggs wrote:

Yeah, but at the moment you’re saying it’s firing twice for an error, though not for the success.

On Nov 10, 2013, at 5:42 PM, Tom McKenzie <notifications@github.com<javascript:_e({}, 'cvml', 'notifications@github.com');>> wrote:

here's my request code, using chocolatechip-3.0.5.js

$.ajax({ url: baseUrl + sourceKey, async: true, success: function onRequestSuccess(data) { console.log('got success', data); }, error: function (xhr) { console.error("Couldn't fetch "+ sourceKey, xhr, navigator.onLine); } }); — Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/pull/4#issuecomment-28167548 .

— Reply to this email directly or view it on GitHub.

grrowl commented 11 years ago 
        console.log('start ajax');
        $.ajax({
          url: baseUrl + sourceKey,
          async: true,
          success: function onRequestSuccess(data) {
            console.log('success callback');
          },
          error: function (xhr) {
            console.log('error callback', xhr.readyState);
          }
        });

that logs:

start ajax
error callback 2 
error callback 3 
success callback

I would suggest adding a conditional only fire the error callback on a known error state (xhr complete with 400/500 code, xhr.readyState equals an error state (not "in progress")

sourcebits-robertbiggs commented 11 years ago

no, he’s just a user.

On Nov 10, 2013, at 6:30 PM, Tom McKenzie notifications@github.com wrote:

    $.ajax({
      url: baseUrl + sourceKey,
      async: true,
      success: function onRequestSuccess(data) {
        console.log('success callback');
      },
      error: function (xhr) {
        console.log('error callback', xhr.readyState);
      }
    });

that logs:

remoteData fetching bodyTypes error callback 2 error callback 3 success callback I would suggest adding a conditional only fire the error callback on a known error state (xhr complete with 400/500 code, xhr.readyState equals an error state (not "in progress")

— Reply to this email directly or view it on GitHub.

sourcebits-robertbiggs commented 11 years ago

How did you get on this thread? :-P

On Nov 10, 2013, at 6:30 PM, Tom McKenzie notifications@github.com wrote:

    $.ajax({
      url: baseUrl + sourceKey,
      async: true,
      success: function onRequestSuccess(data) {
        console.log('success callback');
      },
      error: function (xhr) {
        console.log('error callback', xhr.readyState);
      }
    });

that logs:

remoteData fetching bodyTypes error callback 2 error callback 3 success callback I would suggest adding a conditional only fire the error callback on a known error state (xhr complete with 400/500 code, xhr.readyState equals an error state (not "in progress")

— Reply to this email directly or view it on GitHub.

grrowl commented 11 years ago

Haha, reply by email hey!

I work at an agency in Melbourne writing a web and phonegap app. Looks like you could use a hand with parts of ChUI though.

sourcebits-robertbiggs commented 11 years ago

Arggg!!! Somehow this got merged by cloud services with my other email accounts. Should be alright now.

So, I have this at the moment: $(function() { $.ajax({ url: 'data/perfumes.json', async: true, dataType: 'json', success: function(data) { data.ladies.forEach(function(ctx, idx) { $('#ladiesPerfumes').append(processCategoryTmpl(ctx, idx)); }); console.log('success callback'); }, error : function (data) { console.log('There was an error!'); } }); function processCategoryTmpl(ctx, idx) { return "<li class='comp'>\ <aside><img src='" + ctx.img_prev + "'></aside>\ <div>\ <h3>" + ctx.product_title + "</h3>\ <h4>" + ctx.short_description + "</h4>\ </div>\ <aside><span class='value'>" + ctx.wholesale_price + "</span></aside>\ </li>"; } });

It's giving me exactly one success result and log. On error, though, I'm getting several error logs. That doesn't make sense. We were planing on totally rewriting the ajax part anyway to take advantage of deferred objects and promises, so I'm going to fast track that now.

In the mean time, since you're having such a problem with the weird Ajax behavior, I'd suggest switch out to jQuery to see if that solves the problem. For you on the client side, there is no difference between using jQuery or ChocolateChipJS. ChUI abstracts those differences for you. Use jQuery 2.0.3, it's been optimized for mobile and modern browsers, it's somewhat smaller and more performant than previous versions of jQuery.

grrowl commented 11 years ago

That would be a very welcome change. I'll investigate switching to jQuery, I've worked around a bunch of CCJS's idiosyncrasies and we're about 70% done with the JS, so it might make sense just to custom write the AJAX stuff (to handle onLine/offLine events, etc).

Thanks for your help.

sourcebits-robertbiggs commented 11 years ago

I wouldn't think you'd have much trouble switching. HOWEVER, if you have a problem, give me a shout out. rbiggs@ymail.com Skype: rombiggs

sourcebits-robertbiggs commented 11 years ago

By the way, groups.google.com is the best place to reach out with problems. the group name is chocolatechipui.

grrowl commented 11 years ago

Yup I've made a couple of posts on there (as Tom McKenzie) but didn't want to litter it with bug reports.

sourcebits-robertbiggs commented 11 years ago

I was going to say just use Github's issues link, but I'm not seeing it anywhere. Did they remove that feature?

grrowl commented 11 years ago

No, but it might have been turned off — under the repo's Settings page, turn on "Issues" under Features.

On Mon, Nov 11, 2013 at 4:45 PM, sourcebits-robertbiggs < notifications@github.com> wrote:

I was going to say just use Github's issues link, but I'm not seeing it anywhere. Did they remove that feature?

— Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/pull/4#issuecomment-28175867 .

sourcebits-robertbiggs commented 11 years ago

Yup just turned it on. You should see it now. You can post all issues there please.