Hi,
I could solve the "challenge" of ajaxifying a document together with using
a thickbox to display clicked ajaxified links.
The idea is to display the summary of a document when the mouse passes over a link
and to load the document in a thickbox when the link is clicked.
I’m trying to use the For this, I used the "Ajaxify" script
http://modxcms.com/forums/index.php/topic,6743.0.html
together with the jQuery Thickbox.
(...)
With the thickbox component, I’m getting like a conflict between the "Ajaxify" script and the "Thickbox". (...)
The behaviour is OK, but the template of the ajaxified document is not used.
Note: It is very important that the documents called by Ajax are not cached.
If they’re they will keep the template they were called with.
The ajaxify.js script itself is handles the "onmouseover" event.
If you observe the code below, the onclick event is to build the thickbox.
The return false instruction at the end is intented to prevent the document to be loaded without thickbox by the "href" link.
It stops the propagation of the "clicked" event.
This is correct approach.
I observed that the right model is used by the thickbox if I specify it inside the "rel" attribute. (i.e. rel="modele_zone_ajaxifiee Thickbox")
But in this case, a MODx parse error occurs at each onmouseover event.
One solution was to modify the ajaxify.js script.
But after several tentatives, I found better way.
The Ditto chunk I use for Ajaxification + Thickbox:
<li onmouseout="javascript:document.getElementById('zone_ajaxifiee').innerHTML=ajaxInitial">
<a class="loadinto-zone_ajaxifiee" rel="modele_zone_ajaxifiee"
href="[~[+id+]~]" title="Cliquez pour en savoir plus."
onclick="javascript:tb_show('', '[~[+id+]~]&TB_iframe=true&width=600&height=500', '');return false;"
>
[+menutitle+]</a>
</li>
Note: The thickbox can either be called by giving a "thickbox" class to the calling link or by calling it explicitely like in code above (onclick event).
The first approach implies making the regular expression for the className less restrictive in the ajaxify.js script, so that other class names like "thickbox" can be appended. However, there remain problems in that case with the thickbox.js script who does not select the right template (maybe the docs were still cached). It that case it is also not possible to specify the thickbox size.
I chose the second approach. The child documents are set in MODx manager to the template to use in the thickbox. DocManager can be used efficiently for this task.
I also tried appending the model in the string used to build the thickbox. This way:
... '[~[+id+]~]&template=Thickbox&keepThis=true ...
But this was without effect.
The jQuery thickbox component use the template given to the linked document.
I tried specifying another template, using the thickbox in <iframe> mode, but it failed.
See note above for a solution that works.
This integration seems a real challenge...
Is is not that hard when you know.
But I spent a lot of time for testing.
The important think is to remember is that linked documents must not be cached.
I still have a problem but with MSIE 8 only : the overlay that shadows the main window does not disapear when the thickbox is closed, until I refresh the page.
I’m sorry but I cannot link an example yet.