Add Disqus comment on each carousel Image - javascript

I'm using carousel to cycle through Images from my server.
I want to add to each carousel Image a disqus thread for comments
My code to Add images to my Carousel and shows it is the following :
$('#imgModal').on('show.bs.modal', function(event) {
var indicators = $(this).find('.carousel-indicators');
var items = $(this).find('.carousel-inner');
var targPath = $(event.relatedTarget).attr('src').split('/');
var imgsPath = targPath.splice(0, targPath.length - 3).join('/') + '/';
var target = {
date: targPath[0],
category: targPath[1],
name: targPath[2]
};
// Lister les répertoires (dates)
$.ajax({
url: imgsPath,
success: function(data) {
var dates = [];
var date;
$(data).find('a').each(function() {
date = $(this).attr('href').replace(/\/$/, '');
if (date.match(/[0-9]{6}$/)) dates.push(date);
dates.sort();
});
var i = 0;
var path;
dates.forEach(function(date) {
// Vérifer que le fichier existe
path = imgsPath + date + '/' + target['category'] + '/' + target['name'];
$.ajax({
url: path,
async: false,
success: function() {
// L'ajouter au carousel
item = $(
'<div class="item">'+
'<img src="'+path+'" alt="'+target['name']+'">'+
'<div class="carousel-caption">'+
'<h3>'+date+'</h3>'+
'<p>'+target['name']+'</p>'+
'</div>'+
'</div>'
).appendTo(items);
indicator = $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo(indicators);
// Afficher l'image cliquée
if (date == target['date']) {
item.addClass('active');
indicator.addClass('active');
}
i++;
}
});
});
}
});
});
And i want to integrate my disqus script for each of my Images in the carousel :
disqus script :
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'nedox149';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>

i have resolved my problem, i used this example for my solution :https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html

Related

jQuery detect refreshing of the page when ajax is in progress and stop reload

I have a script ajax which is launched every 32 seconds sending an ajax request :
setInterval(function() {
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
console.time("debut ajax");
$.getJSON('http://127.0.0.1:<?php echo $_SERVER['SERVER_PORT']; ?>/order/get_orders', function(data) {
//console.log(data);
if(jQuery.type(data) === "array") {
var id = data[0].id; var starter = data[0].starter; var meal = data[0].meal; var dessert = data[0].dessert; var expenses = data[0].expenses;
var iduser = data[0].log_by; var date = data[0].date;
var server= "<?php echo $this->config->item('server_url'); ?>index.php/account/updateExternal?";
$.ajax({
url: server+"&callback=?",
data: "balance="+expenses+"&starter="+starter+"&meal="+meal+"&dessert="+dessert+"&date="+date+"&id_user="+iduser+"&place=client2",
type: 'POST',
success: function (resp) {
var myObj = $.parseJSON(resp);
$.getJSON("http://127.0.0.1:<?php echo $_SERVER['SERVER_PORT']; ?>/order/update_log?id="+id+"&balance="+myObj.expenses+"&starter="+myObj.starter+"&meal="+myObj.meal+"&dessert="+myObj.dessert+"&id_user="+myObj.id_user, function(data) {
});
},
error: function(e) {
//alert('Error: '+e);
}
});
}
});
console.timeEnd("fin ajax");
}, 32 * 1000);
During this ajax request I need to prevent or stop the page from refreshing. How to do it ?
// Reload the page if the input is onfocusout for some reasons
$(document).ready(function(){
$(function(){
$("#barcode").focus();
$('#mtsg').html('Staff Canteen Software<br />Veuillez placer votre badge pour identification');
});
$( "#barcode" ).focusout(function() {
$(location).attr('href', "http://127.0.0.1:<?php echo $_SERVER['SERVER_PORT']; ?>/");
});
});
///

JavaScript extract certain data from Wikipeida API

How do I extract highlighted(in green) data from Wikipedia API and display on front-end. I want to separate those value and display it separately in front-end.
function getJSONP(url, success) {
var ud = '_' + +new Date,
script = document.createElement('script'),
head = document.getElementsByTagName('head')[0] || document.documentElement;
window[ud] = function(data) {
head.removeChild(script);
success && success(data);
};
script.src = url.replace('callback=?', 'callback=' + ud);
head.appendChild(script);
}
getJSONP('http://en.wikipedia.org/w/api.php?format=json&action=query&titles=List_of_metropolitan_areas_by_population&prop=revisions&rvprop=content&callback=?', function(data){
console.log(data);
document.getElementById("title").innerHTML = data.query.pages[125279].title;
var inContent = data.query.pages[125279].revisions[0];
document.getElementById("con").innerHTML = inContent;
});
<div id="title"></div>
<div id="con"></div>

Disqus in Ionic APP

I am trying to implement disqus commments in my ionic app. I know I have to host it on the domain its setup for which I believe I have configured correctly. Any assistance will be welcomed
Here is the code in my app.js for the ionic app
$scope.showComments = function () {
$scope.currentView = "comments";
//loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
//
var disqus_title = "Venue 1";
var disqus_identifier = '/venue/' + $stateParams.id;
var disqus_url = 'liverpool.li/venue/' + $stateParams.id;
var url = "http://liverpool.li/app/disqus.html?";
$scope.url = url + "shortname=liverpoolli&url=" + encodeURIComponent(disqus_url) +
"&title=" + encodeURIComponent(disqus_title) + "&identifier=" + encodeURIComponent(disqus_identifier);
$scope.url = $sce.trustAsResourceUrl($scope.url);
};
$scope.$on("$destroy", function () {
if ($scope.lastScriptElm && $scope.lastScriptElm.parentNode) {
$scope.lastScriptElm.parentNode.removeChild($scope.lastScriptElm);
$scope.lastScriptElm = null;
}
});
And the page it points to (disqus.html) located on my domain
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="disqus_thread"></div>
<script type="text/javascript">
var params;
var disqus_url;
var disqus_title;
var disqus_shortname;
var disqus_identifier;
window.onload = function () {
var match,
pattern = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pattern, " ")); },
query = window.location.search.substring(1);
params = {};
while (match = search.exec(query))
params[decode(match[1])] = decode(match[2]);
if (params["shortname"] === undefined || params["url"] === undefined || params["title"] === undefined) {
alert("Required arguments missing");
}
else {
loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
}
};
function loadComments(shortname, url, title, identifier) {
disqus_url = url;
disqus_title = title;
disqus_shortname = shortname;
if (identifier !== undefined)
disqus_identifier = identifier;
else
disqus_identifier = "";
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
blog comments powered by <span class="logo-disqus">Disqus</span>
</body>
</html>
I get the following error
we were unable to load disqus. if you are a moderator please see our
troubleshooting guide.
It looks like you're almost there. The only issue I see is the disqus_url variable must also include the protocol to be valid. Try using this line instead:
var disqus_url = 'http://liverpool.li/venue/' + $stateParams.id;

Disqus with my own User Database

First of all, i want to ask if i can login to disqus with my own user db? I think we can do?
I don't know what else can i do. I'm totally stuck now.
I know i have to use SSO (https://help.disqus.com/customer/portal/articles/236206-single-sign-on#configure-domain). I did all settings but i must miss something...
My Complete Disqus configuration:
As i understand, user info is my own user data that already logged in to our website.
var DISQUS_SECRET = "SECRET_HERE";
var DISQUS_PUBLIC = "PUBLIC_HERE";
function disqusSignon(user) {
var disqusData = {
id: user.id,
username: user.username,
email: user.email
};
var disqusStr = JSON.stringify(disqusData);
var timestamp = Math.round(+new Date() / 1000);
// This line is important! In official example, they were using NodeJS Buffer class. As they told in example, i have encrypted with window.btoa insted of NodeJS Buffer.
var message = window.btoa(disqusStr).toString('base64');
var result = CryptoJS.HmacSHA1(message + " " + timestamp, DISQUS_SECRET);
var hexsig = CryptoJS.enc.Hex.stringify(result);
return message + " " + hexsig + " " + timestamp;
}
// getting the user data from twig
var user = {
id: {{ app.user.id }},
username: "{{ app.user.username }}",
email: "{{ app.user.email }}"
};
//generating auth_s3 key
var auth_key = disqusSignon(user);
var disqus_config = function () {
this.page.remote_auth_s3 = auth_key;
this.page.api_key = DISQUS_PUBLIC;
this.sso = {
name: "Oyun Maceraları",
icon: "http://www.oyunmaceralari.com/favicon.png",
url: "http://oyunmaceralari.com/login-popup",
logout: "http://oyunmaceralari.com/logout"
};
};
var disqus_shortname = 'xxxxxx';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

xml parsing in jquery mobile

I'm using mmenu library in jquery mobile, when parsing an xml and append the result to:
<nav></nav>
the sub-menus don't work correctly.
here is my js:
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "MainMenuAsXml.xml",
dataType: "xml",
cache: false,
success: function(xml){
var list_elem = $("<ul></ul>");
$(xml).find('module').each(function(){
var module = $(this);
var moduleLabel = module.attr("text");
var directories_list = $("<li class='Selected'></li>").appendTo(list_elem);
module.find("directory").each(function(){
var directory = $(this);
var directoryLabel = directory.attr("text");
var directory_elem = $("<li></li>").append("<span>" + directoryLabel + "</span>").appendTo(directories_list);
var entries_list = $("<ul></ul>").appendTo(directory_elem);
directory.find("entries").each(function(){
var entries = $(this);
var linkName = entries.attr("text");
var myLink = entries.attr("link");
$('<li>' + linkName + '</li>' ).appendTo(entries_list);
});
});
});
$("#menu-left").append(list_elem));
buildMenu();
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
</script>
I'm sure that the parsing result is correct but I think there is an error using the function.
and here is the output

Categories