How to fiddle on any web page

Seventh Attempt

Now we speak. Even if the situation didn’t change that much, because clicking the first three nodes still only opens the first two, we see no more errors in the console but one, and all the AJAX requests are correctly sent and their results served back, using $.proxyGet() when needed.

That particular error is brand new.

disco-new-error

Apparently it happens at the start of the callback that shows a subtree, and it looks like it’s due to the fact that it doesn’t get any content from the server (line 198). We know our new AJAX setup works and we also know that this subtree download works in the original site, so there must be some difference between the URL which we request here and the one which is requested there.

In fact, the reason why data is empty is because the URL we request contains an ajaxFunction parameter which is empty instead of being loadNode. Pretty understandable that it doesn’t work.

Looking above in the code, we see that the ajaxFunctionString should be properly set to loadNode (line 178) if terms.php was contained in url (line 177). And that should be the case, because we downloaded terms.php in the first place.

Looking even more above, we see that the url is set to window.location.pathname (line 171).

Uff. That is the problem !! The url of the current page IS NOT the URL of the original one. This error is tough.

We cannot change window.location without causing the browser to show the new location… they are one-to-one related.

Looking around, in this script and in the others, we see that lines 171, 177, 178 in the former constitute a pattern also found in the latter. This error is tough. (déjà vu?)

Thinking…

There is a possibility, a hack really, but it could work. url is always accessed by calling indexOf on it, never ever any other usage. What about monkey patching String.prototype.indexOf?

My seventh attempt (open in jsFiddle):

{[ .disco-attempt7 | 1.hilite(=javascript=) ]}

produced this result:

Screen Shot 2014-06-05 at 11.06.06

Hurrah!! We got it.

Lets get back to the original page and compare.

Screen Shot 2014-06-05 at 11.13.33

Hm, we forgot about the right panel…

Let’s click on aesthetic sensitivity in jsFiddle, I mean… instead of clicking on its toggling icon (plus / minus).

Screen Shot 2014-06-05 at 11.07.58

Fantastic. The right panel’s HTML is properly downloaded and displayed.

2 Replies to “How to fiddle on any web page”

  1. Well, all of the above is true and should work not only in jsFiddle but also in any other Online JavaScript IDE [1]. But if you have Google Chrome, forget about all those tricks and use its Custom JavaScript Snippets [2] feature instead. It just works. It’s like having the power you get when developing extensions right from the console.

    1: http://en.wikipedia.org/wiki/Online_JavaScript_IDE
    2: https://developer.chrome.com/devtools/docs/authoring-development-workflow#snippets

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.