+ Start a Discussion
SoozeeSoozee 

jQuery and blockUI in VF Page

I have a page that does a dynamic update.  This update takes 4 seconds, so I thought it would be super cool to implement the jQuery blockUI to block the page to let the user know that something is happening behind the scenes.  Here's my code that I cannot get to work.

 

<apex:page controller="EndOfTermController"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"/> 
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery.blockUI.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery.jquery-ui-1.8.20.custom.min.js')}"/>
<apex:form > 
   <apex:actionFunction name="SupressLetter" action="{!suppressLetter}" rerender="out" status="loading">
     <apex:param name="firstparam" assignto="{!selSupLetterID}" value="" /> 
   </apex:actionFunction>
   <apex:actionStatus id="loading" onstart="loading(true)" onstop="loading(false)" />
 
       
  
  <div class="contentLoaded">  
 
  <!-- LOTS OF PAGE CONTENT  HERE -->

  </div>
</form>
</apex:page>


 Here is the script on the page:

 

<script type="text/javascript">
  var j$ = jQuery.noConflict();
  var val;
  
  function loading(val) {
  
    if (val) {    
      alert("Hello! I am an alert box!!"+ val);
      j$('.contentLoaded').blockUI();
      //j$('div.contentLoaded').block({ message: null });
      //document.getElementById('contentLoading').style.display = 'block';
      //document.getElementById('contentLoaded').style.display = 'none';
    }
    else {
      
      alert("Hello! I'm the else!!" +val);
      j$('.contentLoaded').unblockUI();
      //j$('div.contentLoaded').unblock({ message: null});
      //document.getElementById('contentLoading').style.display = 'none';
      //document.getElementById('contentLoaded').style.display = 'block';
    }
  }
</script>

Has anyone successfully used the blockUI function to work on a visualforce page?

 

Thanks,

Suzie

bob_buzzardbob_buzzard

Do you see the alerts that you have put in place?   Also, do you get any errors in the javascript console?

SoozeeSoozee

Yes, I see the alerts.  And no, I do not see any errors (you mean at the bottom of the page?)

joshbirkjoshbirk

I think you might be missing some CSS references ... and I don't know if you need to loop all the actionFunction/Status together here.  This worked for me:

 

<apex:page standardController="Contact">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"/> 
    <script src="https://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"/> 
    <script src="http://malsup.github.com/jquery.blockUI.js" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />
    
    <script>
     j$ = jQuery.noConflict(); 
     
    function blockme() { 
        j$.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
            } }); 
 
      }
    </script>
    <apex:form>
        <apex:commandButton onclick="blockme()" oncomplete="j$.unblockUI()" value="Save!" action="{!quickSave}" />
    </apex:form>
</apex:page>

 

janujanu

hi,

 

 

what should be written in controller class(EndOTermController)