Admin Forum:Why does preview page take off all java effects?

We all know that page preview is slightly different from what we have on real page. First of all, it takes off every javascript effect, and it has different width than real page (preview is smaller), so the page layout is not exactly the same. I started asking myself "why". Is there a reason for this mismatch?
 * The preview is the same width as a page with the rail showing, give or take a few pixels. I don't know for sure, but it's probably because javascript is either executed on page load or when you trigger another event eg. clicking a button, hovering over something. If the preview loaded on a completely new page, it would probably be affected by javascript, but it doesn't. When you preview a page, the text in the edit box is passed to the server and the response is injected dynamically into the page -- it doesn't actually load a new page. Javascript doesn't just listen for changes to the page. It isn't that flexible. — Matthew2602 (talk) 11:25, June 22, 2012 (UTC)
 * I think Wikia could keep their previous function: reloading the page completely instead of adding a new layer (this is the way Wikipedia is still using) which allows me to see how my coding works by just a simple click on preview. I'm pretty liking Wikia's own preview function, but saving my edit every time and polluting page history to verify js work is not that funny.
 * Well, one upside is that you don't have to load the page again every time, so you don't have to go through all the HTTP requests again. That would be particularly useful on slower connections, especially if you were proofing something and were previewing it multiple times. You could always create a sandbox in your userspace on the wiki, or if your code isn't specific-wiki dependent, you could even create a completely separate test wiki. It might sound a bit elaborate, but it can be a good idea when you're making forward of tens to hundreds of revisions to a piece of code. — Matthew2602 (talk) 12:18, June 22, 2012 (UTC)
 * Absolutely. I made Username/test page on wikis I'm working on, and even made a sandbox wiki for myself a few days ago. However, I couldn't help myself but feel that this is inconvenient. I'm not good at all at this kind of java coding, so every time I try to build something I need to see how it functions. And this requires to be saved completely, which makes me waste a lot of time on waiting for the procedure.
 * I mean, if I'm gonna change only js code while keeping html, I don't need to edit the article. But in most cases, html input does change, so I can't miss it.

Do you use Firefox+Firebug or Chrome? Both have a console into which you can enter large chunks of JS and execute it as many times as you want. So if you code with a little self-discipline you can write code that is completely neutral towards page loads.

If e.g. you add something to the page, prepend code that removes it:

The above can be executed an unlimited number of times - no page reload required. Just make sure you undo every change you make to the page and overwrite every object you create. Also: Do not use global variables or functions - only use properties and methods.

And when you do eventually save your code, make sure to add some sort of switch with which you can turn your code off. When your code is off, it won't run at all, so you can run it from the console again instead.

That switch could be something as simple as appending "?off" to the URL. In your code you would test for that like so:


 * I feel like I don't understand. You mean, I add/remove elements by javascript for test instead of adding them directly to the page? I'm missing a lot of basic knowledge in JS, I do understand what these codes do, but not what they are for.


 * I'll try to phrase it better: First of all, you should not safe your JS code until you're done. While you're tinkering with it, you should run it from the console (Interrupt me if you're not familiar with the console!). To be run from the console, the code needs to be written in such way that when you run it again, it undoes everything it did in the previous run. That's why one of my suggestions was to delete every object you're about to create - and do so before you create it. That operation will do nothing the first time you run the code. But it's essential the second time you run it on the same page. And the third time. And so on... If your code reverts everything it does, you can run it again and again until you're happy with it. Better? --


 * As long as you refresh the page in your browser every single time before you run code from the console -- I always do this so that I know with 100% certainty that the page is in default pageload state -- the "write your code so that it undoes everything it did" part isn't necessary. When you refresh the page it's going to undo whatever you did anyways.


 * @Pecoes Thank you for the clarification. I'll start working on this (frankly, it is completely a new job because I was learning JS by puzzling some fragmented codes and observing its feature...) I found some documentations about it, I think they will help me doing this.

Apart from that, it's kind of interesting to learn web development step-by-step, but I'm not sure that I'm gonna do it intensively, because it's primarily to make my wiki's edit condition better, not to become an accomplished developer. For the moment I feel a great need to know basic JS, that is why I'm giving it a try.