I have a situation where I'm trying to load JSON data into a popup using AngularJS and Bootstrap. It loads fine in Chrome, Edge, and other browsers I've tested: the popup appears, then there is a spinner that shows until the content loads. But in Internet Explorer, when I click to load the popup, it appears that all scripts on the page pause until all of the data is received. For several seconds, nothing appears to be happening; then, the popup shows up with the requested content. We are using classic ASP to serve the data.
I have tried setting a timeout and now the popup will show up, but once the call starts, the spinner freezes until the data shows up.
I was wondering if anyone else has encountered this and knows of a workaround? This is the simplified version of what I have so far:
$scope.loadData = function() {
if (!isLoaded) {
$scope.loading = true;
$timeout(function(){
$http({
method: 'GET',
url: '/get_data.asp'
}).then(function(res) {
$scope.data = res.data.data;
$scope.loading = false;
});
}, 500);
}
}
Related
I am loading a PDF as follows (I am using Angular 2, but I am not sure that this matters..):
//Inside a service class
downloadPdf = (id): Observable<Blob> => {
let headers = new Headers();
headers.append("Accept", "application/pdf");
return this.AuthHttp.get(this.pdfURL + id, {
headers: headers,
responseType: ResponseContentType.Blob
}).map(res => new Blob([res.blob()], {type: "application/pdf"}));
}
//Inside a click handler
this.pdfService.downloadPdf(this.id).subscribe((data: Blob) => {
let fileURL = window.URL.createObjectURL(data);
window.open(fileURL);
});
This code runs nicely in Firefox. In Chrome, a new tab briefly flashes open and closes. When I debug and I manually put surf to the object URL, Chrome can open it just fine.
What am I doing wrong here?
The opening of a new tab got blocked by an adblocker.
It can not work, new popup will be blocked by browser, because of it was created from callback which is not a trusted event, to make it work it must be called directly from click handler, or you have to disable bloking popups in your browser.
Chrome will only allow this to work as wanted if the ajax call returns in less than a second. More there
Our chrome extension does not work correctly anymore since version 37.0.2062.103 (It used to work correctly on chrome version 36.0.1985.143).
Specifically, the debugger API has stopped working for us when we use the DOMDebugger.
See the attached code: (background.js)
chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if( changeInfo.status == "loading" && tab.active){
var debugId = {tabId:tabId};
chrome.debugger.attach(debugId, '1.0', function() {
chrome.debugger.sendCommand(debugId, 'Debugger.enable', {}, function() {
chrome.debugger.sendCommand(debugId, "DOMDebugger.setEventListenerBreakpoint", {'eventName':'click'},
function(result) {
console.log('registering click');
});
});
});
}
});
chrome.debugger.onEvent.addListener(onEvent);
function onEvent(debuggeeId, method,params) {
if(method=="Debugger.paused"){
console.log('DONE!');
}
};
The extension successfully starts the debugger. we get the yellow debugger ribbon.
We also see the 'registering click' msg in the console. the result argument is an empty object {} (line 8).
However upon clicking on a button that has a click event listener nothing happens.
It used to work without any issues.
It seems like it regressed with https://codereview.chromium.org/305753005. One needs to call "DOM.enable" for it to work now. On the Chrome side, we should implicitly enable DOM domain upon setEventListenerBreakpoint for backwards compatibility. Unfortunately it already squeezed into the stable release.
I'm running a single-page application which loads all <a> links via AJAX. This is a minor visual annoyance, but ever since I switched from #hash tag navigation to proper history via window.onpopstate and window.history.pushState(), many clicks in the system will cause the cursor to "load" as if it were a standard non-AJAX page. On Windows, I get the pointer with the loading symbol. This is in contrast to before where it would simply load the AJAX into the container and never change the cursor. I feel this "breaks the immersion" of being a single-page application.
My code is simple:
$('body').on("click", 'a', function() {
var url = $(this).attr('href');
$.ajax({type:'GET', url: url, success: function(data) {
window.history.pushState({}, url, url);
$('#content').html(data);
}});
return false;
}
});
window.onpopstate = function(event) {
run_url();
};
This works as intended in Firefox. If I remove window.onpopstate completely, it no longer does this, but I cannot find an alternative to onpopstate.
I'm having a bit of trouble getting some final bit of code working to complete my extension.
The short version is that I need my background.html page to notify my content script whenever a different tab is selected. At the moment I have the following:
background.html
chrome.tabs.onSelectionChanged.addListener(function( tab_id , info ) {
// some way to call App.resize();
});
content script js file
var App = {
resize: function() {
// logic
}
}
The longer version is that I'm building a fullscreen extension for chrome that works the same as Firefox and Safari on PC. At the moment, when you enter fullscreen mode you can't really navigate to different other tabs unless you use a shortcut and cycle through all your open tabs. My extension shows all the currently opened tabs and you can switch to them, as well as an address bar so you can go to other websites, etc.
I have everything working as I need it, and it's all working nicely except with pages that redirect to others. E.g. with Google Reader, when you open an article in the background, it goes through google's proxy and then redirects to the actual article. This is the only place where it doesn't work. But if I can call the App.resize() function whenever I switch to a new tab, that will fix my problem. (I hope).
It depends on whether you need to inform content scripts on all pages or just the selected tab. I'll give you solutions for both.
background.html (if you need to inform all tabs)
chrome.tabs.onSelectionChanged.addListener(function() {
chrome.windows.getAll({populate: true}, function(windows) {
var w,t;
for (w=0; w<windows.length; w++) {
for (t=0; t<windows[w].tabs.length; t++) {
chrome.tabs.sendRequest(windows[w].tabs[t].id, "resize");
}
}
});
});
background.html (if you only need to inform the newly-selected tab)
chrome.tabs.onSelectionChanged.addListener(function(tabId) {
chrome.tabs.sendRequest(tabId, "resize");
});
content script
var App = {
resize: function() {
// logic
}
};
chrome.extension.onRequest.addListener(function(request) {
if (request === "resize") {
App.resize();
}
});
I tested this on firefox and ie and worked. But when testing on chrome, I see in the firebug console that the request never loads.
This is the test page: http://gotune.to/index2.php
And here is the function + $.ajax() request.
function getProgress(id) {
$.ajax({
type: 'POST',
cache: false,
url: "getprogress.php",
//Pass our upload identifier as a parameter.
data: {uid: id},
success: function (d) {
//Get the output as an integer.
var progress = parseInt(d, 10);
//If upload progress is not 100, change bar percentage and update again.
if (progress != '100') {
$('#ProgressBar').css('width', progress + '%');
//We aren't done, update again.
getProgress(id);
}
}
});
}
UPDATE
Tried with
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus+" - "+errorThrown);
}
But still not working.
After a web research for this issue if found this:
Turns out it's a bug, in any webkit
based browser all ajax is essentially
blocked until the file upload is
complete. to bypass this you have to
dynamically create an iframe and run
the ajax requests from within it.
So is a problem of the webkit browsers, thanks #ifaour for your time.
THE BUG REPORT CAN BE FOUND HERE: https://bugs.webkit.org/show_bug.cgi?id=23933