Admin Forum:Problems with AJAX output from action=render

I'll try to be as descriptive as possible.

I was trying to load a different page (source) and display it into the current page (target). The source is part of a database system I was working on. The source consists of an ordered list, and each of the items in the list can have other sublists (definition lists, ordered lists, indents, etc.) The reason I'm using AJAX instead of directly transcluding the source into the target is because I need to process the source, in this case, to remove nested sublists from long main list.

In my preliminary code, I've successfully called the AJAX to load the source with action=render set and isolated the main list. The problem started when I appended the main list into the target page. It does not even render like a list, instead all the list items are concatenated into a large wall of text.

Inspection of the main list's HTML is perfectly normal. However, the element inspector of both Firefox and Firebug doesn't like it - it does not want to select the main list at all. My concern now is 1) why it does not render correctly, and 2) if using action=render is the cause. 3) If so, what is the best way to store information in a centralized, database-like manner in a wiki.

I am using Firefox with Firebug. This is the source page and this is the target page. I have not tried this on Chrome or any other browser because IMO they are not suitable for web development. Any help would be much appreciated. Thanks in advance. —mfaizsyahmi (talk) 04:23, September 19, 2012 (UTC)


 * Also, sorry for not presenting any jQuery code, as I'm not on my own computer at this time (I prefer jQuery solutions over everything else!) —mfaizsyahmi (talk) 04:25, September 19, 2012 (UTC)


 * I haven't seen your full script, so I'm not sure what the issue is, but I don't see action=render being a problem. I ran the following from my console on your wiki (I mainly use Chrome, but I checked Firefox and saw the same result):


 * And what that printed was pretty much exactly identical to the HTML structure of http://hitlerparody.wikia.com/wiki/MediaWiki:Scenes?action=render when I compared the two. What exactly are you doing with this HTML data after retrieving it? My guess would be the problem lies somewhere in your parsing routine (when you go to remove nested sublists).
 * Yes... I think that might be the root cause. I'll go and review my code again. —mfaizsyahmi (talk) 05:13, September 19, 2012 (UTC)


 * For another test case, I went to your "target" page (target) and ran the following code from my console:


 * Not seeing any problems there. Definitely a parsing problem, not an action=render problem.
 * The last time round, I used (what I think is the easiest) jQuery selectors $('ol > ol, ol > ul, ol > dt', data) but now I think that is where it all falls apart. This time round I'll parse the main list item with an .each function. I'm not sure if this would considerably slow down the script's execution, though. —mfaizsyahmi (talk) 06:07, September 19, 2012 (UTC)

You shouldn't need to do that, I think something like this would work just fine:


 * Brilliant! Thanks for that input! :D —mfaizsyahmi (talk) 06:37, September 19, 2012 (UTC)


 * By the way, you don't technically need the AJAX if all you want to do is remove the sublists. There's nothing stopping you from using transclusion as the mechanism to get the HTML onto the page, and then removing the sublists after the page has loaded.


 * As you can see in the test target page, I'm planning on populating a table with the items from the source too. I originally wanted the parsing of the table and the list to be as independent of each other as possible, but with one shared AJAX request. Since I have full control of this project I think I can do away by transcluding the source raw in an invisible div, as many as I want, instead - that should work flawlessly... —mfaizsyahmi (talk) 07:14, September 19, 2012 (UTC)