Disqus not working with ajax - ajax

I have tried to use Diqus comment system in my site using ajax to load the article and comments and i couldn't make it work.
I use jQuery and i load the whole article (comments included) with the action ".load".
I am using the code they provide in their site for this cases:
http://docs.disqus.com/help/85/
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "newidentifier";
this.page.url = "http://example.com/#!newthread";
}
});
I really don't know what i am doing bad. My code is this one:
$(".cargaAqui").load("http://"+ document.domain + "/myArticle"+id, function() {
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "myArticle" + id;
this.page.url = 'http://' + document.domain +'/view-'+ id+'#!newthread';
}
});
Any idea what's wrong?
Thanks

I've made a basic template with working DISQUS 2012 comments loading with ajax via jquery-pjax.
DISQUS 2012 does not work with DISQUS.reset yet, but they're working on it.
If you need DISQUS.reset to reload comments after ajax loading content, you'll need to turn off 2012 features in DISQUS admin.
[UPDATE:] DISQUS.reset has since been implemented in DISQUS 2012, so the workaround above is not really necessary. However, push state combined with DISQUS.reset work really well together.

I agree with Adam. Disqus script tags accumulate. I did that :
var head = document.getElementsByTagName('head')[0];
head.removeChild(head.lastElementChild);
Put it just before the DISQUS function.
It works perfectly for me, because Disqus script tag is at the end of head. I run firebug again in Chrome, and Disqus script tags didn't accumulate any more.

Related

Modernizr.videoautoplay object shows true, Modernizr.videoautoplay returning undefined

I'm using a custom Modernizr build, v3.3.0. I've created a simple JSFiddle example to illustrate: https://jsfiddle.net/cqkg7x45/6/.
console.log(Modernizr);
will show the Modernizr object, and when I inspect it in the JS console I can see "videoautoplay" is a property with a value of "true".
But, when I do
console.log(Modernizr.videoautoplay)
it returns "undefined".
I was originally seeing this issue in a WordPress theme I'm developing, but was also able to recreate in JSFiddle and a separate stand-alone HTML page. Also, Modernizr is putting the "videoautoplay" class on my HTML tag, even when I know the device does not support that feature (iPhone 5).
Update: This issue appears to be happening in Chrome (v47.0.2526.106), but not Firefox (v43.0.2).
I'm going to answer my own question in case anyone else runs into this problem. I found the solution on this SO post: How do I detect if the HTML5 autoplay attribute is supported?.
Since this is an "async" test you can't access the property using the syntax
Modernizr.videoautoplay
You have to use the .on() function, as shown in the above SO post:
Modernizr.on('videoautoplay', function(result){
if(result) {
alert('video autoplay is supported');
} else {
alert('video autplay is NOT supported');
}
});

Plain JS Ajax Upload Progress Event Not Working

I am trying to use object-oriented code to handle an AJAX upload. When I run the code, it sees the file, creates the XMLHttpRequest object, but I cannot seem to get the progress event to fire. The full source of my code can be found here: http://pastebin.com/89QawbS6
Here is a snippet:
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", MyObj.trackProgress, false);
xhr.open("POST", url, true);
...
Then in that same object, different method:
trackProgress: function (event) {
console.log(event);
// stuff that should calculate percent
}
But that console.log(event) never fires.
Please note: I know jQuery is great, and there are a dozen awesome upload plugins that I could just use instead. I am not doing this for a class or homework, I just want to understand the process better myself. So offering a jQuery plugin as an answer is not what I'm looking for. I'm trying to make myself less dependent on jQuery.
This FF bug might be the reason for your issue. It's reported on MacOSX and another similar bug on Linux. I don't know if that matters but I tested on Windows. I still believe that your code is fine.

History issue combining WP7.5, phonegap and jqm

I have a phonegap app that uses jqm that works fine in android and ios.
Porting to WP7 i have an issue with the history, specifically history.back() (but also .go(-1) etc). This refers to going back in history where the previous 'page' was in the same physical html file, just a different data-role=page div.
using a jwm site in a regular browser is fine (with separate 'pages' in the same html file). Also, using history.back() when we go from one html file to another in the app is fine. It's the specific combination of WP7.5, jqm and PG.
Has anyone come across a solution for this? it's driving me crazy, and has been as issue since PG 1.4.1 and jwm 1.0.
EDIT 1: It's possible that the phonegap process of initialising the webview on WP7.5 somehow overrides the jqm history overrides, after they've loaded.
EDIT 2: definitely something to do with jqm not being able to modify the history. each time there is a 'page' change, history.length is still 0.
EDIT 3: When i inspect the 'history' object, i found there is no function for replaceState or pushState - i know jqm uses this for history nav, maybe that's the problem.
ok - this isn't perfect, but here's a solution (read: hack) that works for me. It only works for page hash changes, not actual url changes (but you could add a regex check for that). Put this somewhere in the code that runs on ondeviceready:
if (device.platform == 'WinCE') {
window.history.back = function () {
var p = $.mobile.urlHistory.getPrev();
if (p) {
$.mobile.changePage("#" + p.pageUrl, { reverse: true });
$.mobile.urlHistory.stack.splice(-2, 2);
$.mobile.urlHistory.activeIndex -= 2;
}
}
}

jQuery load() not working in Internet Explorer

I am trying to use jQuery load() function to get content from another page via AJAX. It works on Firefox, Google Chrome, but not in Internet Explorer 7 & 8.
Here is the page I am developing: http://139.82.74.22/70anos/no-tempo
All the jQuery code is working normally in Internet Explorer, but the specific part that should bring the destination page isn't. To understand the problem, one must click the "Há 80 anos" or "Há 70 anos" block and click any of the links inside it. It should open a panel underneath the timeline with the content of the block.
Here is the code that pulls the external content:
jQuery('a.link-evento').click(function() {
var strUrl = jQuery(this).attr('href');
var objBlocoConteudo = jQuery(this).parents('div.view-content').next().find('div.conteudo-evento')
objBlocoConteudo.css('display','block').animate({ opacity: 1}, {duration: 350}).load(strUrl + ' #area-conteudo-evento');
return false;
});
With this code I am grabbing the URL of the destination page and telling the browser not to do a normal request, but to open it using jQuery load() function.
Any help appreciated fixing this IE... Thank you.
I'm pretty sure AJAX requests have to be made to a domain name in IE as a security precaution. If you map a domain to your 139.82.74.22 address your problem should go away.
You cant make an .Load(http://139.82.74.22/..), it would have to be .Load("http://mysite.com/mypage")

AJAX UpdateProgress not working on server?

I am trying to show an animated image while data is loading into a gridview after a button click. It works great on localhost, but when I deploy it, it doesn't. I have searched through posts, and I have not made any of what seem to be the most common mistakes ... ie. putting the updateprogress inside the updatepanel, etc. However, I am using a masterpage - but the masterpage doesn't have a scriptmanager on it. I noticed the following difference in my view source pages when I compare production to localhost .. Can anyone help me understand why the JavaScript to make this work might not be showing up in production?
On localhost (where it works) I see this at the bottom of the page:
[CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter":500,"dynamicLayout":true}, null, null, $get("ctl00_ContentPlaceHolder1_UpdateProgress1"));
});
In production (where it does NOT work), this is all I see:
Sys.Application.initialize();
I was having really hard time after converting my project from VS2008 to VS2010. The UpdateProgress stopped working suddenly, which was fine in VS2008. Spending a whole afternoon to search the answer and experimenting this and that, finally I found what went wrong from Scott Gu's posting.
It was an automatically generated web.config entry 'xhtmlConformance mode="Legacy"'.
After disabling this, it started to work again. May be not the case for you but just for guys struggling with the same problem.
Happy coding
This may not be your ideal solution, but you could show() or hide() your animated image just using javascript. Using the following javascript functions (and getting rid of the UpdateProgress control) should do the trick.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
function beginRequest(sender, args) {
document.getElementById('myImageElement').style.display = 'block';
}
function endRequest(sender, args) {
document.getElementById('myImageElement').style.display = 'none';
}
Keep in mind this will happen for every postback, you may need to use the sender parameter to deduce which element called the postback and only perform the display when the correct updatepanel is hit. These events are fired at the beginning and end (respectively) of each UpdatePanel postback. Good luck.

Resources