I am working on GitHub Pages with Jekyll. The Disqus code is located in _includes/disqus.html and has the following code:
<div class="comment">
<button class="show-comments"><i class="fa fa-comments" aria-hidden="true"> Load/Add comments</i></button>
<div id="disqus_thread"></div>
</div>
<script src={{ "/js/jquery.min.js" | prepend: site.baseurl }}></script>
<script>
$(document).ready(function() {
$('.show-comments').on('click', function(){
var disqus_shortname = '{{site.disqus-shortname}}';
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
$(this).fadeOut();
});
});
</script>
In the layouts folder I have a blue.html file with the following code for Disqus:
{% include disqus.html %}
{% else %}
{% endif %}
And in the config.yml I noted my Disqus short name:
#comments disqus-shortname: eudemonis
But nothing of Disqus is loaded when clicking on the load comment section, see test post.
With or without the YAML front matter set as comments: true it doesn't work in neither Safari nor Chrome. I'm seriously at a loss.
I already tried a complete new file following Disqus documents with the Universal code but it doesn't work. Changing the Liquid tags manually with my Disqus short name also doesn't work.
I think the problem is that your website is hosted with HTTPS but you are linking to Disqus with HTTP protocol in your _includes/disqus.html:
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
Error from Chrome console (hit F12 and see):
Mixed Content: The page at 'https://eudemonis.github.io/blog/test//' was loaded over HTTPS, but requested an insecure script 'http://eudemonis.disqus.com/embed.js'. This request has been blocked; the content must be served over HTTPS.
To solve this, change the protocol to HTTPS:
url: "https://" + disqus_shortname + ".disqus.com/embed.js",
Or leave the protocol out and let the browser decide:
url: "//" + disqus_shortname + ".disqus.com/embed.js",
Related
Picture 1 Picture 2 Picture 3 I am building a page in Django that first renders a blank page with a loading picture, and then calls an Ajax get function to one of my views. Once my Ajax get function succeeds, it is supposed to load one of my HTML files. I get a 404 error saying that the template cannot be found, but the template is in the same folder as my other file. Is my file path wrong?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
{% extends "stocks_sites/base.html" %}
<!-- The loading image -->
{% block loader %}
<div id="loading">
<p>Loading</p>
</div>
<div id="articles">
</div>
<script>
// AJAX call when page has loaded
$(document).ready(function(){
$.ajax({
type: "GET",
url: "{% url 'stocks_sites:get_news_articles' %}",
success: function(response) {
const news_articles = response;
const posts = news_articles.posts;
const search = news_articles.search;
document.getElementById("loading").style.display = "none";
$("#articles").load("news_articles.html");
}
});
});
</script>
{% endblock loader %}
I have ths code tyng to make a call to my django backed using ajax
but it gives me this error: Reverse for 'delete_skill' with arguments '('',)' not found. 1 pattern(s) tried: ['jobs/delete_skill/(?P[0-9]+)$']
<a href="{% url 'freelance:delete_skill' id_number %}"
class="glyphicon glyphicon-trash delete_skill"
style="padding:0px; margin:0px; background:grey;
color:red; border:0px;" id="{{skill.id}}"></a>
</span>
{% endfor %}
{% endif %}
<script>
$(document).ready(function() {
$(".delete_skill").click(function(){
var id_number = this.id;
alert(id_number);
$.ajax({
type: 'DELETE',
url: "{% url 'freelance:delete_skill' id_number %}",
dataType: "json",
data: 'identifier='+id_number, 'csrfmiddlewaretoken': '{{ csrf_token }}
success: function(){
if(data) {alert("Success! skill has been deleted")}
});
});
});
my url is like this
url(r'^delete_skill/(?P<identifier>[0-9]+)$', views.delete_skill, name='delete_skill'),
any help on what is going on or what I should add please
Ok, to help you move forward, here a principle that I use:
Create data-* attribute for href such as data-href. You can read more about data-* attributes here.
<a href="#" data-href="{% url 'freelance:delete_skill' skill.id %}"
class="glyphicon glyphicon-trash delete_skill" style="padding:0px; margin:0px;
background:grey; color:red; border:0px;" id="{{skill.id}}"></a>
You can access this data-href attribute in javascript with getAttribute() or via dataset property. Below is jQuery example since you're using jQuery already.
$(".delete_skill").click(function() {
var url = $(this).attr("data-href");
$.ajax({
type: "DELETE",
url: url,
dataType: "json",
data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
success: function(data){
if(data) {
alert("Success! skill has been deleted");
}
}
});
});
This way your code won't break when you change urls.
I am trying to load some items via an AJAX request to my own API and display them on my site with Vue.js. It's already working fine and displaying the images with the code below, except the issue that I'm getting a 404 error in the developer console:
GET http://example.com/images/%7B%7B%image_file%20%7D%7D 404 (Not Found)
before the XHR request finshes
XHR finished loading: GET "http://example.com/api/getItems".
HTML (with blade syntax):
<div id="items-wrapper">
<div v-repeat="items">
<img src="http://example.com/images/#{{ image_file }}">
</div>
</div>
JavaScript:
new Vue({
el: '#items-wrapper',
ready: function() {
this.fetchItems();
},
methods: {
fetchItems: function() {
this.$http.get('api/getItems', function(items) {
this.$set('items', items);
})
}
}
});
For me it looks like <img src="http://example.com/images/#{{ image_file }}"> is rendered before the XHR request finishes and therefor throwing a 404 error.
Any ideas how to avoid the 404 error in the console? Thanks a lot in advance!
Solved by #kreitje from laracasts.com:
From the Vue.js documentation (http://vuejs.org/api/directives.html#v-attr)
You should use v-attr instead of mustache binding when setting the src attribute on elements. Your templates are parsed by the browser before being compiled by Vue.js, so the mustache binding will cause a 404 when the browser tries to fetch it as the image’s URL.
So I changed it to
<img v-attr="src: 'http://example.com/images/' + image_file">
and it's working perfectly fine.
I've created a simple web service using asp.net and hosted on my machine's IIS server. I am trying to call this web service from plain html page without using Asp.net. The problem is that I am not getting response. Here is my code below :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calling Classic Web Services with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a#SayHello").click(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: '{firstName:10,lastName:15}',
// url: 'Service.asmx/SayHello',
url: 'http://192.168.1.20/MyService/Service.asmx/SayHello',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(response) {
alert(response.d); //getting the Response from JSON
},
failure: function(msg) {
alert(msg);
}
});
});
});
</script>
</head>
<body>
<input id="name" /><a id="SayHello" href="#">Greetings!</a>
</body>
</html>
Can anybody please help me where I am going wrong in this code..?? If I run this in ASP.Net environment, it works perfectly. But if I host this, then it doesn't work. Please help me...!!
Are you sure the web service is responding in JSON format? It usually answers in XML. Also your <script> block should go in the <body> and not in the <head>.
if you have hosted the web service on the same IIS, then change 192.168.1.20 to localhost and then try..
I've written a Chrome browser extension that uses Ajax to post data to an MVC3 controller. To make sure that the controller code works, I first wrote a Razor web page to prototype the ajax code. This code works within the web page, JSON model binding an all. I published it to an IIS7 server complete with DNS host and domain name. The code still works on the test page.
function addUrl()
{
$('#res').html('Adding...');
var myData = { url: $('#urlDiv').html(), comments: $('#c1').val() };
$.ajax(
{
url: 'http://hostname.domainname/ControllerName/AddUrl',
type: "post",
dataType: "json",
data:JSON.stringify(myData),
contentType: "application/json; charset=utf-8",
success: function (result)
{
$('#res').html(result);
},
error: function()
{
$('#res').html('An error occurred');
}
}
);
};
I copied this jQuery function into the Chrome JavaScript file and called it from a pop-up window via a conventional form button.
<body onload="buildPopupDom();">
<form>
<h2>Add URL</h2>
<div id='urlDiv'></div>
<p>Comments<br /><textarea id="c1" cols="80" rows="3"></textarea></p>
<p><input type="button" value="Save" id="s1" onclick="addUrl();" /> <input type="button" value="Close" onclick="javascript:window.close();" /></p>
</form>
For some reason posts from the Chrome extension incur a 404 error and it occurred to me that that some MVC3 XSS protection or similar is blocking the post - or perhaps something in IIS7 (UrlScan is not installed).
In order to make cross domain XHR calls corresponding domain permissions need to be declared in the manifest.