0

I've got a pretty confounding issue pertaining to Magento, jQuery, and jQuery Block UI. You know the navigation links that appear for customers when they access their customer account? The ones that are created via XML?

Well, I'm trying to target two of them specifically in order to create a jQuery Block UI loading animation while the database takes its sweet time. I have jQuery and jQuery Block UI up and running and now need someway to have this message/animation/block/ajaxloader on screen from the moment the user clicks one of these specific links to the moment that everything has fully loaded. Or I could place the code on the pages I'm attempting to load so I don't have to worry about where they're coming from. However, I'm uncertain of how I might accomplish this through jQuery. I am not currently making an ajax call to load the data (and I understand that this may be simpler if I was to use ajax).

Any ideas?

UPDATE:

Thanks @JaredKipe, but it doesn't seem to accomplish my goal. Here is my placement of jQuery and Block UI within head.phtml as well as the code you describe.

 <script type="text/javascript"   src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('jqueryBlockUI/jquery.blockUI.js') ?>"></script>
<script type="text/javascript">
    //<![CDATA[
    var $j = jQuery.noConflict();
    //]]>
</script>
<script>
    $j(function () {
            $j('.block-account li:not(.current)').click(function () {
            $j.blockUI();
        });
    });
</script>
<?php echo $this->getCssJsHtml() ?>

This is what the controller looks like to load the page.

 public function orderhistoryAction()
{
    if ($this->_getCustomerSession()->isLoggedIn()) {
        $this->loadLayout();
        $this->renderLayout();
    } else {
        $this->_redirect('customer/account/login');
    }
}

Obviously the block is being loaded from a layout xml file, however I'm unsure how I can display jQuery Block UI (or some other kind of loading message) while the block is being loaded/created.

Again, I am very new to the Magento framework. Thanks for any help anyone can offer!

Ellipsis
  • 117
  • 7

1 Answers1

0

I've never heard of jQuery BlockUI but the documentation seems to make it straight forward.

jQuery('.block-account li:not(.current)').click(function () {jQuery.blockUI();});

Should do the trick. This adds a click event for all of the 'account' links (except the current one) that do NOT block the actual page load, but do activate whatever magic '$.blockUI()' does which would prevent a user from interacting with the page until the server has posted a response. AJAX is not needed here, though it may be desired...

Jared Kipe
  • 1,189
  • 6
  • 5
  • Ok. I'm fairly new to Magento so sorry if I'm missing some rather obvious elements of the process. Where should I place this? On the pages I want to link to? All I want to do is to create a 'loading' message via blockUI and have it display from the moment I click the specific link up to the moment that page fully loads. – Ellipsis Feb 15 '13 at 16:28
  • You need this inserted in the DOM somewhere where it will load when the Account page loads. You could do this via specific template changes, or you could insert it (wrapped in script and probably jQuery(document).ready(function () {...}) into the System->Config->General->Design->HTMLHead->Misc.Scripts. This assumes jQuery and jQueryBlockUI are already loaded properly. – Jared Kipe Feb 15 '13 at 17:09
  • It doesn't appear to work. If you have the time to check out my update in the main question, it might give you a bit more context. Thanks for your help! – Ellipsis Feb 15 '13 at 19:44
  • I'm going to need a url that this is actually supposed to be working on (possibly with test credentials, you can contact me through my website for details). For now I haven't seen someone do the whole jQuery(function () {...}); before, is this similar to jQuery(document).ready(function() {...}); ? – Jared Kipe Feb 16 '13 at 01:52