CODEWITHSUNDEEP
javascriptjquery
Prahlad Yeri
Prahlad Yeri

Reputation: 3663

jQuery.get not working with https on github-sites (even request to same domain)

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!

Upvotes: 0

Views: 97

Answers (1)

jcaron
jcaron

Reputation: 17720

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

Upvotes: 2

Related Questions