We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 15001
    • 697 Posts
    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. wink 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.
      • 15001
      • 697 Posts
      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.

      Example: http://www.altipoint.ch/index.php?id=190

      This is sounds like a minor bug of the ajaxify.js script as used together with MSIE.
      If I remove the ajaxification, the grey overlay disapears correctly when the thickbox is closed.

      If the jQuery thickbox is used together with the ajaxification, the grey overlay does not disappear as long as the page is not refreshed.