Admin Forum:AJAX cleans away JavaScript?

Hello! I'm an admin on Locomotive Wiki and I have a question concerning the use of AJAX and JavaScript at the same time.

A little while ago I asked here for help with adding a tag to URLs (admins' user pages) for use in the recent changes. Rappy gave me some cool jQuery, something along the lines of this if memory serves me correctly (personal test):

$('[href="/wiki/User:Example"],').attr('title', 'This user is an administrator');

I've now modified this text (with some help from others), to run better and include more admins. The problem now (though I have known about it for awhile) is that the AJAX refresher deletes the tags upon activation. Is there a way of getting around this problem? I did good job of appending " [admin] " to the links in question in my personal js (if I do say so myself), but I wasn't thinking since that being javascript as well: the ajax deleted it with the tags. As before any help with this problem? :) STARFLEET  ACADEMY  01:26, May 12, 2012 (UTC)


 * Look for ajaxcallagain in the ajax RC docs- that'll fix it. -- Kangaroopowah  ( Talk ) 01:30, May 12, 2012 (UTC)


 * Come again? n00b to codes. :P STARFLEET  ACADEMY  01:37, May 12, 2012 (UTC)


 * The technical reason why they disappear is because javascript (and thus jQuery) apply only to the elements on the page at the time. Ajax refresh gets the new list of recent changes and puts it in place of the elements in the body of the page - thus, it overwrites the changes made by your JS.  is an array of functions that are run every time ajaxrc refreshes the page. So by adding your function to that array, it will re-apply all of your changes to the new elements on the page.


 * Basically place ajaxCallAgain = [$('[href="/wiki/User: "],').attr('title', 'This user is an administrator')]; above your import to AjaxRC. -- Kangaroopowah  ( Talk ) 01:41, May 12, 2012 (UTC)


 * That won't work, ajaxCallAgain requires a function reference. You put in the name of your function, like.

Okay, I've added ajaxcallagain. But it still won't work: See here. I've now broken the whole thing! XD STARFLEET  ACADEMY  01:58, May 12, 2012 (UTC)


 * You don't want a string containing the function name, just the actual function name. Functions are objects in javascript, so you can use them like they're variables.


 * Monchoman, I don't understand. What exactly am I doing wrong? :/ STARFLEET  ACADEMY  03:22, May 12, 2012 (UTC)


 * Try ajaxCallAgain = [AdminTag,FounderTag]; (with the quotes in there, they are just strings, not function references) — Mathmagician 03:36, May 12, 2012 (UTC)


 * Sigh, that didn't work either Mathmagician. It completely breaks the script. To the point where the text doesn't highlight and the ajax refresher doesn't display. To contain this here a bit more... here's the import:

 // Ajax auto-refresh var ajaxPages = ['Special:RecentChanges','Special:WikiActivity']; var AjaxRCRefreshText = 'Auto-refresh'; ajaxCallAgain = [AdminTag,FounderTag]; importScriptPage('AjaxRC/code.js', 'dev'); // END of ajax auto-refresh


 * Any other thoughts? STARFLEET  ACADEMY  03:59, May 12, 2012 (UTC)

Sorry, I didn't notice you had your functions wrapped by document.ready, as in $; -- Try replacing your entire common.js with this: /* Any JavaScript here will be loaded for all users on every page load. */ // Ajax auto-refresh var ajaxPages = ['Special:RecentChanges','Special:WikiActivity']; var AjaxRCRefreshText = 'Auto-refresh';

/* You can remove this comment * this calls FounderTag and AdminTag * after every time the ajax reloads */ ajaxCallAgain = [FounderTag,AdminTag];

importScriptPage('AjaxRC/code.js', 'dev'); // END of ajax auto-refresh

/* You can remove this comment * these next two lines will call FounderTag * and AdminTag only once, after the page * finishes loading */ $(FounderTag); $(AdminTag);

function FounderTag { $('[href="/wiki/User:HenryDuckFan"]').attr('title', 'This user is the Founder'); }

function AdminTag { $('[href="/wiki/User:Starfleet_Academy"], [href="/wiki/User:SirHandelFalcon"], [href="/wiki/User:Kpt_kraut_99"]').attr('title', 'This user is an Administrator'); }

You can see it working on my test wiki if you like, just go here and hover over my name, the title should say "This user is the Founder" both with/without the ajaxRC — Mathmagician 04:11, May 12, 2012 (UTC)


 * I apologize for causing so much trouble, but I'm afraid it hasn't worked again Math. Any suggestions? I copied it, didn't touch placement, code or anything. Still won't work. Is this a slow server issue again, or what? I couldn't see it working on your wiki either. :/ STARFLEET  ACADEMY  07:00, May 12, 2012 (UTC)


 * You might want to declare your functions before you add them to ajaxCallAgain:


 * And on a related note: It's  not  . You don't want to invoke the function and pass its result to $, but pass the function itself to $. --


 * Pecoes is correct on both counts. However, I believe the root of the problem is a Firefox compatibility issue with the .attr method. The code I gave you works in Chrome. In fact, it was working for me on your wiki! But then when you posted back here, I checked in Firefox 12 and noticed it wasn't working.


 * Pecoes, can you do a favor for me? Go here (in Oasis with Firefox, preferably logged out) and purge the page -- when it loads, watch the siderail carefully. What happens for me with Firefox 12 is that the script runs, making my name 40px and changing the title attribute properly, but then after 1-2 seconds, it magically defaults back to the original size and the title is reset to null! It's really weird. — Mathmagician 07:48, May 12, 2012 (UTC)


 * I couldn't try it logged-out because I seem to have misplaced the USB-stick with my password database *rolleyes* but at least while logged-in your code seems to work fine. --


 * But no sweat.


 * @Pecoes: It works! :D It works fine. I will cross browser check, but it works in FF 12.


 * @Math: Nooooooo! I forgot to test it in other browsers. I am using Fire Fox 12, and it didn't work for me too. Sorry. The .attr thing is fine now as well -- of course. :D STARFLEET  ACADEMY  08:02, May 12, 2012 (UTC)

So it's working fine now? Hmmmm. Weird. (On my test wiki in Firefox 12 while logged out, I can still reproduce that weird issue I mentioned above 100% of the time -- but it doesn't occur while logged in, or with Chrome) — Mathmagician 08:21, May 12, 2012 (UTC)


 * Okay, I've tested it in IE 9, Safari 5.1, Chrome 18 and obviously Fire Fox 12. It's all ship-shape. I'll be able to add this to many more logs now. So thank you all! :D


 * @Math: Could it be some code on your wiki? :) STARFLEET  ACADEMY  08:25, May 12, 2012 (UTC)


 * Nope. Confirmed: Firefox 12, logged out, script doesn't work for me on your wiki either. Logged in it works perfectly fine. — Mathmagician 08:30, May 12, 2012 (UTC)


 * Now I have got the bit between my teeth. I tried that, and it works fine for me in FF 12, logged in or out. Any thoughts? STARFLEET  ACADEMY  08:33, May 12, 2012 (UTC)


 * If no one else can reproduce it, it must be something on my end. I've already tried turning off / uninstalling all my extensions and that didn't fix it. But in any case, it's obvious that your code works, so I wouldn't worry about it. (Although I personally would like to know what's wrong with my Firefox) — Mathmagician 08:38, May 12, 2012 (UTC)


 * When you view pages as an anon - and that's true with any browser - they're served from a different cache. The cache for the web-at-large is significantly more aggressive i.e. it takes hours before it updates. Maybe that's what bit you... --


 * Even though I've deleted my entire browsing history and sent ?action=purge to the server a dozen times? — Mathmagician 08:56, May 12, 2012 (UTC)


 * Hm. Good question! That's odd. Let's wait until tomorrow. Then we'll know for sure. --

@Math: If you haven't made any changes to the "Web-developer" section of FF, then you should worry less about your Moz version. I don't know why the servers would treat you and me differently though. I don't think resending the purge command will help. If I was you I'd leave this code on your wiki (or use Locomotive Wiki's) and check tomorrow. If it's working tomorrow, then maybe a S:C might be in order, but if it's still not working: Uninstall Fire Fox and download a new version. Not ideal, but I can't see another option, unless you can? :\

@Pecoes: You stole my thunder! XD STARFLEET  ACADEMY  09:11, May 12, 2012 (UTC)


 * So it's been ~18 hours, I've purged my cache and used ?action=purge in the URL too many times to count. Completely uninstalled Firefox, shut down my computer, reset my internet connection, got a fresh install of Firefox 12 and I'm still getting this issue. But only while logged out. XD — Mathmagician 01:31, May 13, 2012 (UTC)


 * When you say it doesn't work: Are there any error messages? And can you confirm the script loads to begin with? You can test both with Firebug. To test the latter type the name of one of the script's functions or variables into the console and see if it's accessible. --


 * There's no error messages in Firebug. And I can run the script from the console just fine by typing in AdminTag and it works then. — Mathmagician 06:18, May 13, 2012 (UTC)


 * Okay. So the script does get loaded. It just doesn't run or doesn't work for some reason. Try adding some console.logs to the script - especially to AdminTag - and see what if anything gets executed. --


 * Okay, I think I've determined what's happening. Something else is running AFTER my JavaScript which wipes it out. Link to my testing location: here. Picture describing what happens: — Mathmagician 07:07, May 13, 2012 (UTC)


 * Oh joy. The Facebook crap. This stuff also breaks the TabView extension - at least for me. Have you tested if the AjaxRC code works? And if so, does ajaxCallAgain still have a value? --