I've been banging my head against this for the past few hours.
I'm building an HTML chunk with Javascript and appending it to the page's DOM. Problem is this works only if Firebug is running and disabling Firebug doesn't help. When Firebug isn't running the code gets generated but not appended to the DOM (it's not that it's invisible or something).
Safari and Chrome are immune to the problem.
What should I look into?
Following is the incriminated code: if it looks weird it's because it is, and i'm just now refactoring it from the its original german black magic style without comments to self-explanatory jquery
function create_button() {
var textblock = $('div#textblock2');
var token;
token = $(textblock).text();
token = token.split('=')[1];
//delete the text that we parsed to build the btn
textblock.text('');
var form = write_form();
var btn = write_submit_btn(token);
console.log('form: ' + form);
console.log('btn: ' + btn);
textblock.append(form);
textblock.append(btn);
console.log('textblock2 contents:' + textblock.html());
}
function write_form() {
return "<form name='Formular'></form>";
}
function write_submit_btn(token) {
var btn;
if ( token.match(/weiter/) != null )
btn = "<input type='button' name='naechsteFrage' value='weiter' onClick='load_next_question();' />";
else
btn = "<input type='button' name='naechsteFrage' value='zur" + String.fromCharCode(252) + "ck' onClick='load_prev_question()' />";
return btn;
}
create_button();
console.log('textblock2 contents:' + textblock.html()); needs to be removed ... as does
console.log('form: ' + form);
console.log('btn: ' + btn);
When Firebug is not up, Firefox does not have a console and the function terminates.
All Webkit-based browsers have a built-in console, and are thus immune to this problem. (IE and Opera, on the other hand, would also have this problem. [And Links too, but I don't think you are worried about that. ;-) ])
Any calls to "console" methods will fail if firebug is closed. That's the issue.
Although you should always remove console functions in a live environment, the following code will ensure that any console function being run does not give a javascript error when there is no console:
if(!window.console||!console.firebug){var names=["log","debug","info","warn","error","assert","dir","dirxml","group","groupEnd","time","timeEnd","count","trace","profile","profileEnd"];window.console={};for(var i=0;i<names.length;++i)window.console[names[i]]=function(){}}
Related
I have written a web-crawler to test a pre-release website for errors and issues (i.e. missing content type, timeouts, exceptions, redirects).
This morning a colleague asked me to include a check if there was any javascript error on the page...
A pure javascript solution is unlikely -- i.e. detect all JS errors, using JS
What I appear to want to be able to do is capture the javascript console text, ideally via CoreWebView2
If the page logs each exception into an array,
Errors=[]
window.onerror = function (msg, url, line) {
Errors.push("Caught[via window.onerror]: '" + msg + "' from " + url + ":" + line);
return true;
};
Then you can just query the Errors and see both the count and the nature of the errors.
You can also push errors from try catch
I came across this problem recently that I have no idea what caused it. This script makes my wp custom taxonomy list act like a tree accordion menu, but this script broke - I had to find out through a member of the site.
I am too far ahead into updating the site to be able to turn back time. However 1 major thing I did was upgrade from PHP5 to PHP7.2 on the server so I am not sure if that broke it. Here is the script in question:
<script>
function addExpandCollapse(id, expandSym, collapseSym, accordion) {jQuery('#' + id + ' .expand').live('click', function() {
if (accordion==1) {
var theDiv = jQuery(this).parent().parent().find('span.collapse').parent().find('div');
jQuery(theDiv).hide('normal');
jQuery(this).parent().parent().find('span.collapse').removeClass('collapse').addClass('expand');
createCookie(theDiv.attr('id'), 0, 7);
}
jQuery('#' + id + ' .expand .sym').html(expandSym);
expandCat(this, expandSym, collapseSym);
return false;
});
jQuery('#' + id + ' .collapse').live('click', function() {
collapseCat(this, expandSym, collapseSym);
return false;
});
}
</script>
The error on Safari displays
TypeError: undefined is not a function (near '...jQuery('#' + id + ' .expand').live...')
But this error never occurred back then so I am not sure if the code is not PHP7.2 compliant. I am really new to PHP, and fairly a student to Javascript. Any advice?
Try change .live('click') to .on('click')
I've read a few answers, and tried a bit of different code from them, but haven't been able to solve this. I am a newbie at this and it seems like quite a simple thing to do, apologies if the answer is really obvious, just need it to work really..
So far, I have an aspx page in Visual Studio 2010 / it was created by someone else, and has both JavaScript and cSharp code behind it.
What I would like to happen is that, an 'Edit' button appears on the page in a table in the correct place, and as a result of pressing it, another page is called allowing the editing (of contacts - it's an internal website).
I can get the link working OK as a 'normal' hyperlink, using this line of code:
var editcontact = '<td align = "right" colspan = "40" class =
"contactBorder"><a href="WebForm1.aspx?supplier_id=' +
dataRow.supplier_id + '">Open Contact(s) For Edit</a></td>';
edit contact then gets put in a table like structure (maybe it's "form" given the HTML tags):
finishedcontacts += openrow + contactid + contactname +
contactjobtitle + contactlocation + contacttelephone +
contactemail+ editcontact + '</form></tr>';
That's OK but it's not very 'nice', what I would like is an actual edit button, I can get the button to appear, but the last time I tried it pressing it does nothing:
var editcontact = '<asp:button id = "editImage4" runat="server"
Text="Click me"
OnClientClick="window.open(\'WebForm1.aspx\\?supplier_id=\' + dataRow.supplier_id + \', \'WebForm1\');" />';
Any ideas on how to get this working OK from a button?
Here is some other code I tried, which was to separate out the generation of the url from the calling code, but none of them seemed to work:
//var url = string.Format("{0}?supplier_id={1}", "../WebForm1.aspx", dataRow.supplier_id);
//var url = string.Format("{0}?supplier_id={1}", #"../WebForm1.aspx", dataRow.supplier_id);
//var url = 'string.Format("{0} supplier_id={1}", "WebForm1.aspx",'+ dataRow.supplier_id +')';
var url = 'WebForm1.aspx?supplier_id= '+ dataRow.supplier_id +'';
var supplierid1 = dataRow.supplier_id;
Any ideas what be greatly appreciated. This is my first ever post..
Use Response.Redirect(url) if you want to redirect using your button and this button must be a server side control.
In the end, a colleague helped me out with this.
As other posters identified there was some problems with the URL, and especially with the escapes.
Anyway below is the code in the unlikely event anyone needs something similar.
buttoncode = '';
var editcontact = '' + buttoncode + '';
And we added a function (which should probably be called a method or whatever):
function OpenContactForEdit(supplier_id)
{
window.location = "WebForm1.aspx?supplier_id=" + supplier_id;
}
Comments:
This bit is very important:
onClick="OpenContactForEdit(\'' + dataRow.supplier_id + '\')"
Note exactly how we needed to escape (and 'end escape') the single quotes.
I believe that was quite a big part of why, what I was doing was not working.
I am having a bizarre issue that I'm thinking may be a Chrome bug or possibly a bug with Visual Studio. My script is getting loaded twice. To verify the issue I created a test script that sets a cookie with a timestamp to show the code is getting appended twice. If I navigate to the page via a hyperlink it works fine. Also if I hit the back and forth buttons it also works fine -- but if I manually type the url for the second page in the browser it calls the script twice.
This only happens in Chrome and only when using a Asp.Net Web Application. If I use a Asp.Net website, it does not occur. These are new empty web applications with no extra files or settings changed.
My example html pages look like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page 1</title>
<script src="chromebug.js"></script>
</head>
<body>
<h1>Page 1</h1>
Page 1
Page 2
Page 3
</body>
</html>
And the chromebug.js look like this:
function getCookieTest(name) {
var cookie, cookies = document.cookie.split(';');
name = name + '=';
while ((cookie = cookies.pop())) {
cookie = cookie.replace(/^\s+/, '');
if (cookie.indexOf(name) === 0) {
return cookie.substring(name.length, cookie.length);
}
}
return null;
}
function setCookieTest(name, value, secs) {
var c;
if (secs > 0) {
c = new Date();
c.setSeconds(c.getSeconds() + secs);
c = name + '=' + value + '; expires=' + c.toGMTString() + '; path=/';
} else {
c = name + '=' + value + '; path=/';
}
document.cookie = c;
return
}
console.log('chromebug loaded');
var getdata = getCookieTest('loaded') || '';
setCookieTest('loaded', getdata.toString() + document.title + ':' + new Date().getTime().toString() + '|', 10000);
getdata = getCookieTest('loaded');
console.log(getdata); // show what has been saved in the cookie
Am I missing something? Any way to work around this?
I even created a video where the issue is demonstrated:
http://screencast.com/t/MpXfbDMBvfY
Thanks so much to stdob for pointing me to the Live HTTP Headers extension. I'd recommend it if you are having a similar issue.
https://chrome.google.com/webstore/detail/live-http-headers/iaiioopjkcekapmldfgbebdclcnpgnlo?hl=en
The issue in my case is with the Google Chrome prefetch optimization. When you type in the address bar, Google anticipates the page you will be loading and starts pulling down the scripts. If your script preforms some loading or cookie action upon loading this is problematic. When you uncheck this option you should see the duplicate loads go away.
However this is an easy way to control this without changing your settings. This is especially important since you have no control over your end-user's settings.
if (document.webkitVisibilityState && document.webkitVisibilityState == 'prerender') {
// avoid performing load logic
}
It's look like Chrome have non-obvious behavior when user manualy typing url in address bar. You can use some tools like Chrome live http headers to catch this behavior.
I am quite new to Phantomjs and am starting to getting to know how to use it. However all of the semi advanced tutorials does not cover the thing i want to use Phantomjs for.
Now my question is how would i check if a Javascript is active on the site and if it is working correcly (i.e not throwing erros in the console).
I hope someone is able to point me in the right direction or know how to do this.
you can interact with the open page using the webpage.evaluate method:
var page = require('webpage').create();
page.open('http://m.bing.com', function(status) {
var title = page.evaluate(function(s) {
//what you do here is done in the context of the page
//this console.log will appear in the virtual page console
console.log("test")
//here they are just returning the page title (tag passed as argument)
return document.querySelector(s).innerText;
//you are not required to return anything
}, 'title');
console.log(title);
phantom.exit(); //closes phantom, free memory!
});
in order to see the virtual page console, you have to add a onConsoleMessage callback:
page.onConsoleMessage = function(msg, lineNum, sourceId) {
console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};
EDIT: by default javascript is executed.