Prevent Firebug from Removing HTML Elements - javascript

I'm sure we've all done it by now. A website pops up some goofy JavaScript modal preventing you from continuing. You whip out Firebug, inspect it, and hit Delete. Poof! Gone. Now, is there a way with JavaScript to recreate the element or disable that functionality altogether? Thanks!

Create a js reference to the element on page load. Add a listener to the element that looks for the destroy event. If that happens, then use your reference to recreate the item. The only issue is firebug might not fire a destroy event when an element is manually deleted. In that case, you could have a loop that checks every x milliseconds to see if the element is there. If it isn't, then create a new one.

Related

How to _actually_ delete a DOM node via javascript?

I don't want to remove an element from it's parent (via element.parentNode.removeChild). I want it to not exist in the DOM whatsoever.
Here's my use case. I have a tampermonkey script I wrote which is supposed to delete annoying pop ups for me. For example, on this page when I hover over the second sentence in point #2, a pop up appears. I want my script to delete that node so that it never pops up.
Here's the problem. Even if I remove it, the element still exists and the website's scripts will move that element into document.body again every time. I want the element to actually not exist. Not merely exist without a parent element.

Making DOM Reflow/Refresh

I'm new to JavaScript and D3, and I'm trying to modify some attributes of a DOM element and then have the page reflow/refresh so I can see those updated changes. The trick is that I need this to happen automatically without any kind of onclickevent or button click or mouse movement or anything.
I've tried everything I could find on the internet and nothing has worked, but oddly enough, if I call an alert() right before the line that changes my element's attributes, when I click okay, the element repositions itself on the screen. I need this to happen without having to call an alert() and click okay.
Here's the code in question:
alert("HI")
$("#g1").attr("transform", "translate(0,10)");
If I delete the alert line, my element never moves. If I leave it there, and click okay, then as soon as I do, my element repositions itself.
Thanks for the help!!!!
You need to wrap your code like this:
$(document).ready( function() {
$("#g1").attr("transform", "translate(0,10)");
});
in order to ensure that the DOM is loaded before you try to execute the code.
Your alert is getting the page time to load before continuing with the code, which is why that line seems to "fix" the problem.

When editing jquery in Chrome console, how to re-run that event?

When using Chrome console, I am editing the value of a variable that is set in the document ready event, but obviously this event has already fired and me editing the variable will have no effect.
Is there a way to re-run this event somehow?
Either edit your js files and refresh the page, or enter whatever you want to change into the console part of the Chrome Development Tools to see it without having to refresh the page
For e.g. $('p').hide();
Although you will obviously still need to edit your files to keep this change permanently.
I'm not saying this is a good idea, as it's an event which is supposed to fire once when the DOM is ready, but have you tried this?
$().trigger('ready')
edit
scratch that - it won't work as jQuery gets rid of the event handler once it has run the first time.
See this question:
How to trigger $().ready() in jQuery?
So you'd probably have to rewrite all of your JS to fit into a separate function and then run that function again.
Having said that, the scope of the variable you are changing would need to be outside of that new function if it is going to retain the value you have changed it to.

strange behavior on display|display:none elements

I have a custom modal dialogue that consists of a simple div and some css. There are 2 buttons (OK, CANCEL) buttons. The CANCEL button is always the same; it hides the modal dialogue via onclick="$('#div').css('display','none')" (NB: this is also how the modal is shown; ('display','')). I assign different actions to the OK button depending on the need. This is done via $('#okBTN').attr('onclick','my_function()').
It works, but only the first time ©
The first time I open the modal and walk through the steps, everything works as expected. If I close the modal, however, then re-open it, the OK button has no action on it. I mean, the onclick is assigned (correctly); it's in the source code, and it will alert correctly via .attr('onclick'), but clicking the button does nothing. I have it set that when the modal pops up, the onclick is assigned each time; but it's almost as if there is a shadow copy or something stuck in memory or the DOM. Although, I don't see anything strange in Firebug....
I've tried cloning the button, reassigning it, then replaceWith'ing. I've also tried remove'ing it and re-adding it...
Any clues?
Hate to say it my friend but you're not leveraging the benefits of jQuery.
Why set display via CSS? Just use .hide() .show() or .toggle().
Why are you setting on onclick attribute via javascript? This doesn't make much sense at all. Use $(elem).click(my_function);
The second bullet will likely fix your problem, but I'd do some serious re-evaluation.
Good luck!
Use bind or event-name binders:
$('#okBTN').click(my_function)
I'd try using .css('display','block') instead of .css('display',''), as assigning a blank display value doesn't seem like a good idea (it might work, but just to be safe).
Have you tried setting the .bind() function of the element?
$('#okBTN').bind('click', my_function);

Catching the specific Javascript code being executed onClick

I am working on a site that has loads of legacy Javascript and jQuery includes and there is no documentation to show what is happening when.
I have a specific problem to fix and I cannot find the relevant code that is being executed when a button is clicked. To save me from trawling through (and making sense of) hundreds of lines of legacy script, is there a feature, possibly in Firebug, that will identify what script is being executed when I click on a button?
I believe there is a feature in Firebug's console window called Profile. Click profile, click the button, then click profile again. It should give you what all functions were called in that time. Be warned that if this code includes jQuery, you might get a huge long list of functions because jQuery uses tons in its code. Unfortunately, the profiler will also show anonymous functions, which can really be a pain.
Otherwise, do a search in the code for the button's class or ID and go through them. If you have an id of fancy then you might do a search for #fancy in your code and attempt to find it. That may lead you in a general direction, at least.
You can click Firebug's "Break on next" button (in the Script tab; it looks like a pause button), then push the button that you want to debug.
The next time any JavaScript code executes, Firebug will break into the debugger and show you that line of code.
The break button didn't work for me. Instead I did edit the onclick attribute with FireBug and prepended it with "debugger;" ... then you'll break right there once you click :)
None of the above answers worked for me. I am trying to use Firebug to figure out how a feature on a page is working for a site I have no control over. Here is what worked for me.
First, got the id of the element I am clicking on from the page source, and then get a temporary reference to it by creating a watch (under the script tab):
tmp=document.getElementById("idOfElement")
Next, I assigned the current onclick value to another temporary variable.
oldfunc=tmp.onclick
Next, I defined a new onclick function. Initially I tried putting debugger; as the first thing in the function, but this does not work! So instead, I created an alert:
tmp.onclick = function() { alert("Ok"); oldfunc() }
Now, as soon as I click on the button the alert comes up, at which point I then click the "Break on next" button as outlined in another answer to this question. Then I dismiss the alert and immediately I am in the debugger at the correct place.
In my case, the "Break on next" button did not work by itself, because there are a lot of other events, just mousing over the page was causing the breakpoint to be hit, preventing me from ever clicking the button.
In Firebug you can set a breakpoint in some JS and then you get a stack which will let you know the current function call stack. So if you set the breakpoint in function used by several handlers then you can use this to discover exactly which handler you are in.
This probably won't work if you are dealing with AJAX callbacks and the like though.

Categories

Resources