Template:Tooltip-Map - REDUX

[Gahoo]

Ok. So here's the deal. Wikia has informed us that our map tooltip are causing problems. Something about the code not being compatible with other code and causing errors. I don't understand it, but we have been asked to change the code to use the JQUERY library rather than the one they use now. If we can't then the tooltips go bye-bye. So can anyone do this? I am told that someone with knowledge and experience in this area can probably do this in an hour or two.

So does anyone have the know-how and interest to tackle this? I think the following tooltips are in use:

Template:Tooltip
Template:Tooltip-Map
Template:Tooltip-Connection-Map

[Tahngarthor]

Can you ask WoWwiki about how their tooltips are set up?

[Catrinm]

We heavily plagiarised the wowwiki in creating some of the earlier ffxi scripts, so unless they've radically changed, there isn't a lot that will help us.

The only reference I could find on help wikia was at http://help.wikia.com/wiki/Help_talk:Customizing_Monaco where they had problems (so far unresolved) incorporating jscript into the Monaco skin .js file. Are any of the high load sites currently using Jscript or was this just something that one of the Dev's thought might be a "good idea" ?

Since both Jscript.js and the current tooltip.js are written in javascript and use Ajax, could you ask Wikia specifically what problems they are seeing? It would be quicker and easier to fix the problems than to start over, re-invent the wheel, and possibly create even more problems.

Essentially, Jscript.js is a support javascript file which contains a lot of commonly used functions. With the comments included, it is 4300 lines of code amounting to 120kb of extra code to be downloaded and cached by the browser on each visit to the site. tooltip.js is also a support javascript file which contains the functions specifically used by the tooltips templates, without the extra, unneeded, functions - it amounts to 1550 lines of code and is only 54kb (with comments in the code). Several of these functions are mechanically the same as those in the jscript file, but are modified to address specific page elements used within the wiki rather than provide generic returns which would then have to be "wikified" by the calling page. The advantage to tooltip.js is that it conceals the complexity of the code from the wiki editors, allowing them the time to actually edit the wiki instead of figuring out how to use code.

I did find a website that demos some plugins using jscript, which may be the way to go if we have to change over to jscript - most of the work is already done, we just need to 'wikify' the command set, preferrably using the existing command set so it doesn't break all the existing pages that use them

Take a look at http://pupunzi.com/ (don't forget to allow scripts for the site if you use noscript, and you may need to allow googleapis also)

[Catrinm]

Aferthought:- Did they set a time limit on this?

[Gahoo]

They said a week or two to at least show progress.

Unfortunately it is all Greek to me and I don't understand much of the issues - something with conflicts and errors with the existing js library - which is why the jquery library needs to be used. I am pretty much regurgitating what I was told more than really understanding what we have and how it needs to be changed.

[Catrinm]

OK, downloads of the update are running so I have some time ><

The problem, so far, is that Wikia want us to use the Jquery library instead of the custom built library for the tooltips.
The time frame for doing this is "1-2 weeks to show progress".
The size of the problem is changes in over 450 pages just for tooltips alone, without even looking at the map templates.

I've been at work for the past few hours and been googling like crazy in my free time to see what the options are, and have come up with the following:

The existing custom script queries the wiki API (Applications Programming Interface) directly in order to draw down the information needed for the tooltips etc. This is done using Ajax, and is therefore concurrent with the page load or "snippets on demand" once the load is complete. Due to the way our pages are designed, these calls can request a specific part of a page by name without having to pull the entire page. The API is designed and implemented in Wiki for exactly this purpose, and is used by a number of bots for automated bulk page editing, although I hasten to add that the custom interface is designed for read-only access.

Having looked at the current implementation of Jquery, jQuery JavaScript Library v1.3.2 downloaded from googleapis, it is intended for "normal" websites and uses a page call for each query which it then parses for the required information. Jquery has no concept of an API interface in a wiki and would require a fairly large rewrite in order to be usable for this purpose. Without the API it has the potential to increase the number of page hits substantially, and as a consequence, the traffic load on the site. Simply put, a wiki page listing 11 NPCs, and using the custom script, would result in 1 page hit and 11 API queries (each of which pulls ONLY the information needed for the tooltip). The same page, using Jquery, would cause 12 page hits on the site, and each page hit would cause resending the header, menus, all page content, page footer, adverts, etc. for every page, all of which has to then be parsed client side to produce the same result!

Rewriting the custom script as a handler so it passes the query to jquery for execution and then interprets the results is a possibility, but would require some extensive recoding of a system that was written specifically for this purpose. This is certainly not a feasible proposition in a 1-2 week timeframe unless dedicated coders were found with nothing else to do with their time (ie: no full time job, no real life and FFXI is right out of the window!) As Gahoo will know, the time frame from then original idea behind this to having it working properly was a period of several months!

Again, I would ask, please tell us EXACTLY what problems are being seen with the javascript - it may be far quicker and easier to fix the problems than to recreate the existing functionality on a new platform. Also, with the exception of wowwiki, none of the major sites on Wikia are using this type of functionality, so there are no guarantees that the effort to change to Jquery would resolve any of these problems or even worse, create more problems that haven't even surfaced as yet.

"Conflicts and errors with the existing js library" isn't really helpful - conflicts with what, and from where? What kind of errors? Are they re-creatable? This whole thing may come down to one or two minor changes in the code but hey, we're open to working towards fixing it. Jquery? Not sure who came up with that one, but it doesn't solve the problem for Wikia - no more than rewriting the entire wiki interface in ASP would help. Sorry, I digress!!!

We need the exact problems that they are seeing, and if possible a way to recreate them and observe them so we can figure out the cause, and therefore resolve the issues. Jumping to an untried, untested programming base that isn't even compatible with existing wiki features is nonsensical to the point of hilarity .... insert image of a Lamborghini being pulled by a carthorse!

[KyleH]

Hi guys,

Gahoo asked me to chime in with a little more information. Unfortunately, there isn't a WHOLE lot more, but perhaps I can clarify some of the points that I discussed with Gahoo to make the problem and possible fixes more easy to understand.

To start with, the errors that we are seeing are primarily from IE (all versions). IE isn't particularly helpful with debugging information, but the errors that we're seeing are basically ...

Code: Select all

2099: "Object doesn't support this property or method"   referer: http://wiki.ffxiclopedia.org/index.php?title=User:Anthoron/tooltip.js&action=raw&ctype=text/javascript

1459: "Object doesn't support this property or method"   referer: http://wiki.ffxiclopedia.org/index.php?title=User:Anthoron/tooltip.js&action=raw&ctype=text/javascript

We believe that this basically has something to do with the fact that the entire Prototype javascript framework is loaded from this url. As far as I can tell, the only reason that you're loading Prototype is so that this code can generate and display tooltips. That combination is causing FFXI to generate more javascript errors than any other wiki on Wikia, and is also causing the wiki to be slower than any other wiki on Wikia. All-in-all, it doesn't make for a great user experience. I may be wrong about my assumptions regarding how Prototype is used on FFXI, but if my assumptions are correct, it shouldn't be too terribly difficult to migrate from Prototype to jQuery. jQuery is already loaded on every pageview so there is no additional load on the client-side, and it is officially supported by Wikia, so it is less likely that you will run in to conflicts like those which are likely with Prototype.

Please let me know if there is anything else that I can help explain.

[Tahngarthor]

If it's officially supported, why is no one using it (apparently)? I don't think I can speak for the founders, but if anyone from Wikia can help with this, since they brought up the issue, I'm sure we'd accept it with little hesitation.

[atalantia]

There is a problem using both jquery and prototype in the same page.

A solution is to put

Code: Select all

<script>jQuery.noConflict();</script>

at the end of the head section, or somewhere after jquery is loaded.

You then need to wrap all jquery calls inside of a function, so something like

Code: Select all

   $(function() {
      $("#tabs").tabs({
         event: 'mouseover'
      });
   });


becomes something like (I'm not 100% on this, been a while).

Code: Select all

   jQuery(function($) {
      $('#tabs').tabs({  // this line might be jQuery('#tabs').tabs({   , I forget
         event : 'mouseover'
      });
   });


Or else all of your jQuery functions that are not wrapped with jQuery() will stop working.

You can't just use $ function with both of these running. If I remember right, it gives a lot of errors with IE 7, not sure I've played with IE 8 enough to know, and you are just lucky when it all works with FireFox. I tried to look around the site, but it started giving me a headache and I'm not at all familiar how it was designed.

But this would put the effort onto those who use jQuery. I know you can use ajax to load stuff w/ jQuery, but I have never used it.

[KyleH]

If it's officially supported, why is no one using it (apparently)? I don't think I can speak for the founders, but if anyone from Wikia can help with this, since they brought up the issue, I'm sure we'd accept it with little hesitation.

Everyone is using it--it powers most of the javascript on Wikia.

Regarding your comments, atalantia, the javascript on Wikia requires that jQuery owns the $ function. When we originally implemented jQuery, we moved prototype's $ function to $P (in a very haphazard way). It's not a pretty solution, but it was good enough to keep the site from completely breaking. There is nothing inherently wrong with continuing to use Prototype, except that downloading and using the additional 120kb library slows down the site considerably and the library is outdated because no one is updating it. The javascript errors caused by the tooltip.js, however, do need to be fixed. I only suggested moving that code to jQuery as a way to fix both issues at once.

[Catrinm]

I'm not even sure why prototype is even there - all the functions used by tooltip.js are internal as far as I can tell, and there's even a section of them that are commented as being imported from prototype.js !

How about we simply nullify prototype.js (reduce it to a single comment line with no code) and see if that improves matters? It might resolve the issue completely, and if not, then we can start looking at a workaround or fix.

[Catrinm]

The javascript errors caused by the tooltip.js, however, do need to be fixed. I only suggested moving that code to jQuery as a way to fix both issues at once.

The problem here is, as I mentioned previously, JQuery is designed to pull the whole webpage and parse it to extract the information, while tooltip.js uses the Wiki API to access only the needed information. We would need to write a handler specifically for that functionality in order to access the information and format it in the desired manner. This means that JQuery is relegated to being used ONLY for the display of the information.

Taking this a step further, tooltip presents images superimposed on images, as well as text superimposed on images. This in specific reference to the maps and map markers used extensively on the site. I haven't seen anything to indicate that JQuery can emulate this functionality, so once again we have to rely on custom handlers, further reducing the reliance on JQuery.

Examination of tooltip will reveal that it is very specifically tailored to ffxiclopedia.org and references page types and groups within the code. For example:

Code: Select all

function performTooltips() {
   if (wgPageName == "Special:Preferences" && showPrefsPanel) addPrefs();
   if (wgCanonicalNamespace == "Portal") doPortals();
   if (ajaxPages.indexOf(wgPageName)!=-1) ajaxRC();
   if (tooltipsOn && wgCanonicalNamespace != "Special") {
   if (scTooltips && wgCanonicalNamespace == "Category") scttMouseOver();
   if (tableData) addAjaxDisplayLink();
   if (itemTooltips || npcTooltips || questTooltips || coordTooltips || quickTooltips || scTooltips) ttMouseOver();
}

This functionality cannot be handled by wiki code, and so would need to be completely rewritten in a JQuery centric manner (this is only one small example).

Don't get me wrong, but jumping onto someone else's idea of how javascript works means learning how they think and then using their handlers appropriately. In laymans terms, congratulations on learning English, but we now want you to converse in Glaswegian (Glasgow, Scotland) as that is the particular dialect we've approved. It's still English, but very hard to understand for someone not familiar with it!

Apart from FFXI and WoW, what other wiki sites are using this functionality extensively? Perhaps we could get a look at them and their code and find some way to adapt it to our needs ?

I will reiterate a point I made earlier, so that it can be better understood. The existing .js was created/subverted/written/plagiarized/adapted by a few people in order to accomplish what was needed on the site. The total time from inception to final product was several months, as Gahoo can attest. In order to make the proposed changes, a complete rewrite of the scripts to maintain the existing functionality but using the JQuery library instead, we will need to find a group of volunteers willing to devote their time to this. Bear in mind that our FFXI users are either working or in school full time, play FFXI in their spare time, and contribute to this site as a possible 1% or less of their time.

[KyleH]

Perhaps I am confusing the real issue and asking the wrong question then. The question that really needs to be asked is: does anyone understand the tooltip/prototype code well enough to troubleshoot it so that it stops generating JavaScript errors on every page-load for the major browsers used today (IE 7 & 8, FF 2 & 3, Chrome, Safari, and Opera)? The main problem appears to be Internet Explorer--I'm able to reproduce the problem on every page load with IE. The jQuery/Prototype issue is peripheral to everything else, and I understand that such an undertaking would require a great deal of time and effort.

[Tahngarthor]

If the script runs without errors on every other browser but IE, doesn't this point to a bug or glitch in IE and not a problem with the javascript?

Although I do get javascript "Is not defined" errors in Firefox 3 all around the wiki, none of them seem to be specific to the pages with the tooltips or the tooltips themselves.
Tested the page Port Bastok which has a map tooltip.
(I also get tons of Declaration Dropped warnings regarding some wikia extension "StaticChute")

[Catrinm]

Gut feeling: this isn't going to work! That said, I'm willing to dig into the code in my free time and see what can be done with it.

KyleH, please confirm that JQuery is already loaded - I've checked my end and I don't see it! (Firefox 3.5.4)

Please note that I do work full time, and play FFXI in my spare time ... this project is in third place at best. if anyone else wants to step up and take it, or even help. that would be appreciated!

Meanwhile, "1-2 weeks to show some progress" - probably not going to happen!