0

I just can't understand these errors:

" Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

ReferenceError: jQuery is not definedjQuery.noConflict();

ReferenceError: jQuery is not defined jQuery('#like_box').html(like_html);

"

Had anyone encounter such an issue so I can see where the problem is and fix it. Here is the code I am working with:

jQuery.noConflict();

var good_image_url = "images/good.png";
var bad_image_url = "images/bad.png";

function load_stats(url) {

jQuery.post("../../cgi-bin/test/like_new/wacko_like.pl", {
    URL :        this.location.href,
    func: 'get_stats'
  }, function(response){
    setTimeout("finishAjaxLikeLoadStats('"+escape(response)+"')", 400);
  });

}


function finishAjaxLikeLoadStats(response)  {

response = unescape(response);

var the_vals = response.split(":");

jQuery("#like_count").html(the_vals[0]);
jQuery("#dislike_count").html(the_vals[1]);

}



function generate_like_html() {

var like_html = '<a href="javascript: void(0);" onclick="do_vote(document.location.href,1) "><img src="' + good_image_url +'" /></a>'
+ '<a href="javascript: void(0);" onclick="do_vote(document.location.href,2) "><img src="' + bad_image_url + '" /></a>'
+ '<span style="color: green">Likes: <span id="like_count">0</span></span>'
+ '&nbsp;&nbsp;'
+ '<span style="color: red">Dislikes: <span id="dislike_count">0</span></span>';

jQuery('#like_box').html(like_html);

/* ok, now we have the stats - lets pre-update the numbers with real values :) */

load_stats(document.location.href);

}

function do_vote(LinkID,Type) {
jQuery.post("../../cgi-bin/test/like_new/wacko_like.pl", {
    URL :        this.location.href,
    do_what:     Type
  }, function(response){
    setTimeout("finishAjaxLike('"+escape(response)+"')", 400);
  });
}

function finishAjaxLike(response)  {

response = unescape(response);

var the_vals = response.split(":");

if (the_vals[0] == "1") {
    alert("Sorry, you can't vote (can't see your IP!)");
}
if (the_vals[0] == "2") {
    alert("Your vote has been counted, thanks!");
}
if (the_vals[0] == "3") {
    alert("Your vote has been updated accordingly");
}

jQuery("#like_count").html(the_vals[1]);
jQuery("#dislike_count").html(the_vals[2]);

}

Here is the html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-language" content="en-gb" />

<title>Like - Dislike</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="i_like.js"></script>

</head>

<body>

<p>Testing Like/Dislike Feature 1</p>

<div id="like_box"></div>
<script>
    generate_like_html();
</script>


<!--
<a href="javascript: void(0);" onclick="do_vote(<%ID%>,1) "><img src="<%config.build_static_url%>/good.png" /></a>
<a href="javascript: void(0);" onclick="do_vote(<%ID%>,2) "><img src="<%config.build_static_url%>/bad.png" /></a>
<span style="color: green">Likes: <span id="like_count_<%ID%>"><%likes%></span></span>
&nbsp;&nbsp;
<span style="color: red">Dislikes: <span id="dislike_count_<%ID%>"><%dislikes%></span></span>
-->

</body>
</html>
Andre
  • 819
  • 3
  • 15
  • 30

1 Answers1

0

This error most likely means that your site is being served over HTTPS, but you are trying to access the jQuery file over HTTP and the browser is preventing that from happening. So jQuery never gets loaded.

The solution: remove the http: from the beginning of the jQuery URL:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

This will ensure that the jQuery file is retrieved over either http or https depending on how your site is being accessed.

JLRishe
  • 99,490
  • 19
  • 131
  • 169