jquery load() https http

Question

I am having an issue grabbing an element from another page using the jQuery load() function. I am only able to add client-side script to the page A (https://landing.pkr.com/en/bonus/) and am trying to grab an element from page B (http://letsplay.pkr.com/en/) which I am unable to edit.

I have the code below on page A:

$('#playerNumber').load('https://letsplay.pkr.com/en/ div.players.roundContainerBorderNone h2');

Page A runs on https protocol. Page B runs on both http and https.

My initial issue was that I was trying to grab the element from page B. The code was not working because the protocols were conflicting, however I changed the protocol to https and that mostly sorted the issue.

The only exception was when I tried to view the page in Chrome using an incognito window. For some reason the code was not functioning. Can someone explain to me why this would be and whether it is a cause for concern going forward? Is there a solution for this issue?

Many thanks

--- Additional Comment ------------------------------------------------------

Following further investigation it turns out that page B does not support https. Would this mean that the issue cannot be resolved?

I would imagine you're being blocked by the [Same Origin Policy](http://en.wikipedia.org/wiki/Same-origin_policy). You need to use a server-side proxy. Check the console for more information. If you see an error relating to CORS headers, then this is definitely the problem. — Rory McCrossan, Feb 10 '15 at 10:40
possible duplicate of [Jquery .load Same origin policy](http://stackoverflow.com/questions/2453981/jquery-load-same-origin-policy) — Liam, Feb 10 '15 at 10:42
Thanks all for responding so quickly. The error displayed in the console is as follows - Mixed Content: The page at 'https://landing.pkr.com/en/bonus/?nonMobile=true' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://letsplay.pkr.com/en/'. This request has been blocked; the content must be served over HTTPS. — Jonathan Hutchinson, Feb 10 '15 at 10:55
Add this above your code line and check the result. $.support.cors = true; — Raja Danish, Feb 10 '15 at 10:58
Still seeing the same issue and error message I'm afraid Raja :( — Jonathan Hutchinson, Feb 10 '15 at 11:12
I think there is need to send ajax call, Please test the below code, $.support.cors = true; $.ajax({ type: 'GET', url: 'https://letsplay.pkr.com/en/ div.players.roundContainerBorderNone h2', success: function(html){ $('#playerNumber').html(html) } }); — Raja Danish, Feb 10 '15 at 11:21

Raja Danish · Answer 1 · 2015-02-10T11:45:29.393

0

Plz try this.

$.support.cors = true;
$.ajax({
    type: 'GET',
    dataType: "text",
    crossDomain: true,
    url: "http://letsplay.pkr.com/en/ div.players.roundContainerBorderNone h2",
    success: function (responseData, textStatus, jqXHR) {
        var _data = JSON.parse(
            responseData.replace(
                '{"AuthenticateUserResult":"', ''
            ).replace('}"}', '}')
        );
        $('#playerNumber').html(_data);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

edited Feb 10 '15 at 11:45

answered Feb 10 '15 at 11:22

Raja Danish

235
1
7

This time i am trying to send ajax call instead of jquery.load () – Raja Danish Feb 10 '15 at 11:23
Hi Raja. Thanks for your continued help. Unfortunately I'm still seeing the issue. This time with a very slightly different error - Mixed Content: The page at 'https://landing.pkr.com/en/bonus/?nonMobile=true' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://letsplay.pkr.com/en/%20div.players.roundContainerBorderNone%20h2'. This request has been blocked; the content must be served over HTTPS. – Jonathan Hutchinson Feb 10 '15 at 11:34
Still no luck I'm afraid. If I view the page over http I get the 'POST failed' alert and see the console error 'Failed to load resource: the server responded with a status of 404 (Not Found)'. When I view over https I don't see any alerts and get the console error 'Mixed Content: The page at 'https://landing.pkr.com/en/bonus/?nonMobile=true' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://letsplay.pkr.com/en/%20div.players.roundContainerBorderNone%20h2'. This request has been blocked; the content must be served over HTTPS.' – Jonathan Hutchinson Feb 10 '15 at 11:58
I should point out that I am adding the code through a third party application - Optimizely, as we are performing an A/B test for our client. Not sure if this is of any relevance? – Jonathan Hutchinson Feb 10 '15 at 12:00

score 0 · Answer 2 · answered Feb 10 '15 at 12:04

0

The issue seems to be of cross-domain access. You can omit the scheme from the url, the browser by default takes the scheme the current page is working with.

try the below:

$('#playerNumber').load('letsplay.pkr.com/en/ div.players.roundContainerBorderNone h2');

answered Feb 10 '15 at 12:04

Ankit Saroch

680
7
14

No luck on this one I'm afraid either Ankit. Same console error as before – Jonathan Hutchinson Feb 10 '15 at 12:28
as you updated your question that page B doesn't support https, and browser don't support making a cross domain calls. Please have a look at this [question]( http://stackoverflow.com/questions/8414786/javascript-cross-domain-call-call-from-http-to-https) – Ankit Saroch Feb 10 '15 at 12:38

jquery load() https http

2 Answers2