0

I've already looked at this other answer, but in my case, I'm doing a simple jQuery.get request, and that too on my same domain:

//Now, lets pull the data for panels
var maxi = $('#mainpanel .panel[id]').length;
var count =  0;
var processed = [];
$('#mainpanel .panel[id]').each(function(index) {
    var id = $(this).attr('id');
    var turl = '/kb/resources/' + id;
    console.log('pulling data for resource',id,turl);
    $.get(turl , function(data){ 
        console.log('success');
        var dummy = document.createElement("data");
        window.dummy = dummy;
        $(dummy).append(data);
        var title = $(dummy).find('h1').text();
        var header = document.createElement("div");
        var panelBody  = document.createElement("div");
        var ul = document.createElement("ul");
        console.log('dbg 1');

        $(header).addClass('text-center panel-heading');
        $(header).append('<h4><a href="' + turl + '">' + title +  '</a></h4>');
        $(panelBody).addClass('panel-body panel-res-summary');
        $(panelBody).append(ul);
        console.log('dbg 2');

        $('#' + id).append($(header));
        $('#' + id).append($(panelBody));
        $(dummy).find('.container.default li').each(function(index){
            var item = $(this).find('a:first');
            var cls='';
            if (item.hasClass('imp')) cls='class="imp"'; // mark
            if ($(panelBody).height() >= 200)  return;
            $(ul).append('<li><a ' + cls + ' href="' + item.attr('href') + '">' + item.text()  + '</a></li>');
        });
        console.log('dbg 3');

        $(panelBody).append('<a class="small pull-right" href="' + turl + '"><em><u>more...</u></em></a>');
        processed.push(id);
        count += 1;
        console.log('processed');
        if (count>=maxi) {  //(count%3==0)
                msel = '#' + processed[count-1];
                msel += ' #' + processed[count-2];
                msel += ' #' + processed[count-3];
                adjustBoxes(); //Now, lets adjust the heights of all panels
                console.log('now called adjustBoxes');
            }
    });

The above code works fine on localhost, even in the HTTP version of the site, but fails to retrieve the content in the HTTPS version of the site. Since I'm making a request to the same domain, why is it not returning anything?

EDIT

As mentioned in the comments, I worked-around the issue using the accepted answer here. Adding a backslash at the end of the url resolves the issue, but the glitch remains. And this appears to be a glitch with the server hosting github-pages.

EDIT 2

As @jcaron rightly points out, the issue was definitely with my url. It was serving a jekyll generated static page that needed / at the end. And since my code was missing that, gh-pages was returning a 301 redirect and rejecting the second request. However, if gh-pages could have done a proper redirect to my ajax request, my issue would never have arisen in the first place. In short, the glitch at gh-pages end remains!

Community
  • 1
  • 1
Prahlad Yeri
  • 3,567
  • 4
  • 25
  • 55
  • And what error do you get? – jcaron Dec 07 '15 at 09:25
  • Chrome console says that your AJAX requests are made to the HTTP version, not the HTTPS one, when your site is requested via HTTPS – and therefor the browser blocks it as “mixed content”. – CBroe Dec 07 '15 at 09:27
  • @CBroe I wonder what why the requests go to HTTP version? I've clearly written `var turl = '/kb/resources/' + id;`. Doesn't that mean the same host and protocol (HTTPS) ? – Prahlad Yeri Dec 07 '15 at 10:13
  • @jcaron - There is no error, the `$.get()` request callback function isn't being called at all. As you can see, I've printed the `console.log('success')` when it is called, but I don't see that message on the console anywhere. – Prahlad Yeri Dec 07 '15 at 10:15
  • The console should have given you an error anyway, as pointed out by @CBroe. It did so here, but for some reason I no longer get an error, and the page components load correctly now. Did you change something? – jcaron Dec 07 '15 at 10:30
  • @jcaron - Yup, I changed. Accepted answer in [this](http://stackoverflow.com/questions/13054842/jquery-ajax-not-using-https) post helped me. All I had to do was add a backslash at the end of the url. I've done the workaround now, but this looks like a glitch with the server hosting github-pages. – Prahlad Yeri Dec 07 '15 at 10:33
  • @PrahladYeri, your link points back here. – jcaron Dec 07 '15 at 10:35
  • @jcaron Copy pasta error! I've fixed it now. – Prahlad Yeri Dec 07 '15 at 10:38

1 Answers1

2

The issue arises because of two combined problems:

  • your URL (e.g. http://www.prahladyeri.com/kb/resources/php) is not the actual "good" URL, it requires a redirect to add the final /.

  • the server incorrectly redirects to the http rather than the https version.

So your code makes the request, gets a 301, tries to make a second request to the http URL, which is then rejected.

Two possible solutions:

  • correctly include the final /

  • fix the server to correctly redirect to the appropriate protocol

jcaron
  • 17,302
  • 6
  • 32
  • 46
  • Thanks for the explanation, @jcaron! I suspected something like this because I'm generating the static pages using Jekyll. And the server in question is the github-pages (hosting provided by github.com). So, fixing that is out of the question :-)). I had appended the final slash as a workaround, but good to know what was causing that. – Prahlad Yeri Dec 07 '15 at 10:49