My ajax success:function() runs a line of code which opens a new window and inserts data into it. Rigth now my code looks like this:
success: function(data) {
var url = location.href;
var w = window.open(url);
w.onload = function() {
w.$('#main').html(data);
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It works just fine in Chrome but If I want to run it in Internet Explorer 11 it won't execute w.$('#main').html(data). I also tried:
success: function(data) {
var url = location.href;
var w = window.open(url);
w.addEventListener('load', function() {
w.$('#main').html(data);
}, {
once: true
});
}
Which also works fine in Chrome but with IE it gives me the same result as the line above. Does anybody know why this code doesn't work in IE?
I found a solution in this thread:
addEventListener in Internet Explorer
I need to use attachEvent method instead of addEventListener or onload.
Related
I wrote a JavaScript method for loading contents on my page on an interval of one second. It works fine in Chrome and Firefox, but not in Internet Explorer. The auto-reload after 1000ms does not work.
How to fix this?
function testing() {
$.getJSON('test.php', function(data) {
var lastresult = data.lastresult;
$('#test').html(lastresult);
});
}
// Execute testing() after every 1 second
window.setInterval(function(){testing()}, 1000);
EDIT (I found the solution): IE was caching the result of test.php, that's why it seemed to be not working for me. Adding this to the script worked:
jQuery.ajaxSetup({ cache: false });
Also, I tried below code, and they worked for me.
Example 1 (worked):
function testing() {
$.getJSON('test.php', function(data) {
var lastresult = data.lastresult;
$('#test').html(lastresult);
});
}
testing(); // Worked!
Example 2 (worked):
function testing() {
alert('test');
}
window.setInterval(function(){testing()}, 1000); // worked
I have two javascript functions that work fine so long as I keep them in the HTML of my head tag, but I'd like to move them to an external javascript file.
function uploadImageSB() {
Shadowbox.init({});
// shadowbox for image upload
Shadowbox.open({
content: 'photo.cgi?function=photo_upload',
player: 'iframe',
title: 'Image Upload',
height: 200,
width: 500,
options: {
onFinish: function () {
// get the iframe
var iframe = document.getElementById('sb-player');
var formName = 'photoForm';
// add an event listener to determine when the sb form is fully loaded
if (iframe.addEventListener) {
// use addEventListener for Safari, Chrome, Firefox
iframe.addEventListener("load", getTA(formName), true);
} else {
// use attachEvent for IE
iframe.attachEvent("onload", getTA(formName));
}
}
}
})
};
The above javascript calls this next function:
function getTA(fn) {
// get the contents of the tinymce editor
var ed = tinymce.activeEditor;
var content = ed.save();
// dynamically create textarea
var ta = document.createElement('textarea');
ta.textContent = content;
ta.name = 'article';
ta.value = ta.textContent;
// get the iframe content
var iframeContent = this.contentDocument || this.contentWindow.document;
// append the textarea to the shadowbox form, but do not display it
var form = iframeContent.getElementById(fn);
form.appendChild(ta);
form.getElementsByTagName('textarea')[0].style.display = 'none';
};
I think the problem is with my usage of this here:
var iframeContent = this.contentDocument || this.contentWindow.document;
But I'm not sure how fix it. thanks.
As per my understanding your code shouldn't work when you are calling from head too. Problem is with your following code.
if (iframe.addEventListener) {
// use addEventListener for Safari, Chrome, Firefox
iframe.addEventListener("load", getTA(formName), true);
} else {
// use attachEvent for IE
iframe.attachEvent("onload", getTA(formName));
}
You are calling the getTA(formName) function there itself and because it is called in the context of window, you dont get the iframe as your context ie this.
To solve this problem you need to provide it as a listener as a function object as argument as given below.
EDIT : Using closure to support using same fn for multiple instance.
if (iframe.addEventListener) {
// use addEventListener for Safari, Chrome, Firefox
iframe.addEventListener("load", (function(){
return function(){
getTa.call(this, formName);
}
})(), true);
} else {
// use attachEvent for IE
iframe.attachEvent("onload", (function(){
return function(){
getTa.call(this, formName);
}
})());
}
That should do it.
I've got some JS which works in Chrome, but not in FireFox, and I'm too inexperienced in JS to be able to troubleshoot this without some assistance.
I tested it from localhost on my dev machine and from its deployed location (on our internal intranet) ... same results in both cases.
In chrome, it does exactly what I expect. It asynchronously catches a JSON object from the API and splashes it for the user.
In FF, it takes the user to the target API URL. No "asynchronisity".
What tweaks can I do to support FF too??
(fortunately, FF & Chm are the only two I need to code against).
Any and all help will be greatly appreciated.
var submit_map_url = 'blahblah'; // dynamically generated by PHP
$('#mapper_form').submit(function() {
event.preventDefault();
$.ajax({
type:'POST',
url: submit_map_url,
data:$('#mapper_form').serialize(),
success: function(response) {
var response = $.parseJSON(response);
if(response.status == 'failure'){
alert(response.message);
}else{
var doRedirect = true;
$('#splash').fadeIn(800, function() { // fade in
window.setTimeout ( function() { // start a timer for auto redirect
$('#splash').fadeOut(1000, function() { // fade out
if(doRedirect) window.location = redirect_target; // then redirect
}) }
, 4000); //
});
$('#splash').click(function(){ // on click
doRedirect = false; // cancel the redirect request
$(this).fadeOut(700,function() {}); // and fade out
});
$('#countdown').countdown({until: +5, format: 'S'});
} // end IF/ELSE
} // end success:
}); // ajax
return false;
});
Add the event parameter to you submit function. $('#mapper_form').submit(function(event) {
Chrome has a global event object window.event when you are in a event handler.
I'm developing a chrome extension and i've met a very strange bug - my code works well on Mac OS, but doesn't work on Windows and Linux versions of Chrome. Versions are the same.
function captureAllScreen() {
chrome.windows.getCurrent(function(w) {
chrome.tabs.captureVisibleTab(w.id, {"format":"png"}, function(response) {
var image = response;
var url;
chrome.tabs.getSelected(w.id, function(response) {
url = response.url;
});
var viewTabUrl = [chrome.extension.getURL('app.html'),
'?id=', id++].join('');
chrome.tabs.create({url: viewTabUrl}, function(tab) {
var targetId = tab.id;
var addSnapshotImageToTab = function(tabId, changedProps, tab) {
if (tabId != targetId || changedProps.status != "complete") {
return;
};
chrome.tabs.onUpdated.removeListener(addSnapshotImageToTab);
var views = chrome.extension.getViews();
for (var i = 0; i < views.length; i++) {
var view = views[i];
if (view.location.href == viewTabUrl) {
view.twm_Draw.sendScreen(image, url); //Application-specific method
break;
}
}
window.close();
};
chrome.tabs.onUpdated.addListener(addSnapshotImageToTab);
});
});
});
};
Update:
What i want to do with this code - is to take a screenshot and tab url and send it to my extension's page. When user clicks on my extension's icon - it opens a popup with two buttons, one of it fires this function.
In Mac Os everything works - this code takes a screenshot, tab url, opens new tab with my application and sends the data there. On Linux & Windows versions of chrome it doesn't send the data, after clicking the icon in the popup you just get a blank tab opened.
I think this part might be causing problems:
var url;
chrome.tabs.getSelected(w.id, function(response) {
url = response.url;
});
//using url
The rest of the code should be wrapped into callback function, otherwise order of execution is not guaranteed.
I'm guess it's only supported on Mac, whatever it does:
view.twm_Draw.sendScreen(image, url); //Application-specific method
I don't know about Unix but on Windows you can only get a screenshot using a NPAPI plugin like the Google extension for screen capture.
i have a problem with this script in firefox 4. I test the same script in chrome and it works, but in FF the load never stops, maybe some problem with the code
<script type="text/javascript">
$(document).ready(function(){
var somevar = 'some info';
var someothervar = 'some other info';
var data = "var1=somevar&var2=someothervar";
$.post("chart.php", data, function(theResponse){
if (theResponse == 'sim') {
document.write("test");
}
else {
document.write("testone");
}
});
});
</script>
php file have a simple echo "sim";
thanks
You really can't get away with using "document.write()" for such testing. Change your code like this:
$(document).ready(function(){
var somevar = 'some info';
var someothervar = 'some other info';
var data = "var1=somevar&var2=someothervar";
$.post("chart.php", data, function(theResponse){
if (theResponse == 'sim') {
alert("test");
}
else {
alert("testone");
}
});
});
Because the response to the request is very likely to be received after the browser has finished with the original page, the call to "document.write()" will have the effect of obliterating that page.
Beyond that, you can try the TamperData plugin for Firefox (if it's been updated for FF4 ...) to watch the progress of HTTP requests. FireBug will show you XHR requests too.