Hello Yannick,
Thanks for looping back to this topic :-)
I guess the simplest way is to show you some code.
When I want to use AJAX to display the link categories and the links themselves without reloading the page, here is the generated code (you can see it here):
<!-- Link Library Categories Output -->
<SCRIPT LANGUAGE="JavaScript">
var ajaxobject;
function showLinkCat ( _incomingID, _settingsID, _pagenumber) {
if (typeof(ajaxobject) != "undefined") { ajaxobject.abort(); }
var map = {id : _incomingID, settings : _settingsID, linkresultpage: _pagenumber}
jQuery('#contentLoading').toggle();jQuery.get('http://www.lalunemauve.fr/wp-content/plugins/link-library/link-library-ajax.php', map, function(data){jQuery('#linklist1').replaceWith(data);jQuery('#contentLoading').toggle();});
}
</SCRIPT>
<div id="linktable" class="linktable"><table width="100%">
<tr>
<td><a href='#' onClick="showLinkCat('553', '1', 1);return false;" >Nos partenaires (3)</a> </td>
</tr>
<tr>
<td><a href='#' onClick="showLinkCat('551', '1', 1);return false;" >Sites artistiques (2)</a> </td>
</tr>
<tr>
<td><a href='#' onClick="showLinkCat('550', '1', 1);return false;" >Sites littéraires (2)</a> </td>
</tr>
<tr>
<td><a href='#' onClick="showLinkCat('549', '1', 1);return false;" >Sites musicaux (1)</a> </td>
</tr>
</table>
</div>
<div class='contentLoading' id='contentLoading' style='display: none;'><img src='http://www.lalunemauve.fr/wp-content/plugins/link-library/icons/Ajax-loader.gif' alt='Loading data, please wait...'></div>
<!-- End of Link Library Categories Output -->
<!-- Beginning of Link Library Output -->
<div id='linklist1' class='linklist'>
<div class='LinkLibraryCat553'><div class=""><div id="nos-partenaires"><div class="linklistcatname">Nos partenaires</div></div>
<ul>
<li><a href="http://www.akiza.net/" id="link-9" class="track_this_link " title="L'univers d'une petite poupée en noir et blanc.">Akiza</a>
<a href="http://www.lalunemauve.fr/wp-admin/link.php?action=edit&link_id=9">(Éditer)</a></li>
<li><a href="http://www.spleenarcana.com/" id="link-11" class="track_this_link " title="Un musicien qui fait tout tout seul : jeu, enregistrement, mixage, promo…">Spleen Arcana</a>
<a href="http://www.lalunemauve.fr/wp-admin/link.php?action=edit&link_id=11">(Éditer)</a></li>
<li><a href="http://www.vampirisme.com/" id="link-12" class="track_this_link " title="Webzine dédié à nos amis aux dents longues et au teint pâle.">Vampirisme</a>
<a href="http://www.lalunemauve.fr/wp-admin/link.php?action=edit&link_id=12">(Éditer)</a></li>
</ul>
</div></div><script type='text/javascript'>
jQuery(document).ready(function()
{
jQuery('a.track_this_link').click(function() {
linkid = this.id;
linkid = linkid.substring(5);jQuery.post('http://www.lalunemauve.fr/wp-content/plugins/link-library/tracker.php', {id:linkid});
return true;
});
});
</script></div>
<!-- End of Link Library Output -->
If you disable Javascript in your browser, you cannot access to the link lists except to the featured one (#linklist1) which is already present on the page when it loads. You can try on my test page) : simply disable Javascript in your browser, and try clicking on the link category links. Nothing happens.
I suggest that, instead of echoing href="#", you echo the real URL of the page where each link list will appear. This way :
- If Javascript is on, the links are loaded on the same page with AJAX;
- If Javascript is off, users and search engines can follow the links specified in each href of the #linktable element.
Javascript should always be a UX enhancement, and shouldn't be a requisite for a webpage to work normally. Jeremy Keith, who you may have heard of, wrote a pretty simple and good article about this back in 2006 : Behavioral Separation. It will help you understand what I mean (because English isn't my mother tongue!).
Which leads me to other problems I have with Link Library:
- You should call Link Library CSS and JS through the wp_enqueue_script and wp_enqueue_style WordPress hooks. Not only would it be cleaner and safer regarding WordPress performances, but this would allow anyone to manipulate them through functions.php files, for example. We don't all need Link Library CSS actually. In order to disable Link Library CSS, since it is not enqueued through the aforementioned hook, you have to comment the CSS call out from link-library/link-library.php. However it means you will have to do this everytime Link Library is updated… which is not very practical. It would be much easier if we could simply remove it through wp_deregister_style.
- Link Library creates a lot of HTML errors. You can see this on my test page validated by the W3C Validation service. These errors includes bad Javascript calls (replace
<SCRIPT LANGUAGE="JavaScript"> by <script type="text/javascript">), image tags that are not correctly closed (any <img /> tag must be closed by the / symbol, at least in HTML Strict and XHTML), and onClick attributes should be removed because there are obsolete. You could replace onClick attribues by metadatas (in HTML5) or a cleaner Javascript output.
- The Dashboard genuinely works without Javascript. Amen to the WordPress team for that. However, on the Link Library admin panel, it is not possible to select differents libraries from the top dropdown menu on the wp-admin/admin.php?page=link-library-settingssets page. It's embarrassing because it's supposed to be just a form : a form must work with PHP and hasn't to rely on JS to work, otherwise it's really harmful to web accessibility.
These are a few suggestions to improve Link Library's overall quality.
Like I said, I really enjoy this plugin, which is complete and balances WordPress poor links functionality. You really did a great job! In my opinion, some of its weak points are very easy to correct (I can help!).
I think Objective Best Practices for Plugin Development could be useful in this quest of upper quality for your plugin :-)
kReEsTaL
