Skip to main content

Salesforce Actionstatus with JQuery Dialog box


I have a page which contains apex:component, custom (dynamic) tab in apex:page.The design is like this,each tab represent the category and each category have 3 text area.The tab is created in page level while the text areas is inside component level.Once the user navigate into different tab, the component will re render the text area for the related category.

The user reported that whenever they update the textarea and quickly move to the different textarea or navigate into other tab, the data won't update correctly.I am thinking maybe because I use  actionSupport for every text area that calling the same method in Apex Controller which will update all the three text areas together.

The quick workaround that I can think is to disable user to move or enter  new data before system complete processing the previous data.So I need to have something like indicator or progress bar like the one that I used to see in other applications.I need to use ActionStatus but it will be cooler if I combine it with jQuery.

After I bumped into here and here.I come out with this.

1) The style to hide the dialog box's close button ,because it ugly to show the progressing icon with the Close 'X',and I don't want user to close it manually.
<!--This will remove the Close button inProgress dialog-->
 <style>
.ui-dialog-titlebar-close{
    display: none;
}
</style>
2)Define jquery dialog box
$(document).ready(function () {
$( "#dialog-modal" ).dialog({
        autoOpen: false,
        height: 150,
        width: 400,
        modal: true,
        resizable: false,
        draggable: false
        });
});

3)Create html div , put the image that I created from the
<div id="dialog_modal">
<div align="center">
<img src="{!$Resource.ProgressCircular}" />
            </div>
</div>

4)Create java script function to show and hide the dialog
function statusShow() {
$( "#dialog-modal" ).dialog( "open" );
}
function statusHide() {
$( "#dialog-modal" ).dialog( "close" );
}
5)ActionStatus
<apex:actionstatus id="inProgress" onstart="statusShow();" onstop="statusHide();">
</apex:actionstatus>

6)The fields and actionSupport that call the ActionStatus
 <apex:repeat value="{!myFields}" var="c">
       <div class="col">
<apex:inputtextarea value="{!c.Name}">
        <apex:actionsupport action="{!updateData}" event="onchange" rerender="dummy" status="inProgress">
       </apex:actionsupport></apex:inputtextarea>
       </div>
<div class="col">
<apex:inputtextarea value="{!c.Age}"> 
          <apex:actionsupport action="{!updateData}" event="onchange" rerender="dummy" status="inProgress">
          </apex:actionsupport></apex:inputtextarea>
          </div>
<div class="col">
<apex:inputtextarea value="{!c.Position}"> 
         <apex:actionsupport action="{!updateData}" event="onchange" rerender="dummy" status="inProgress">
         </apex:actionsupport></apex:inputtextarea>
        </div>
</apex:repeat>


Congratulations to me it works but after testing, I figured out something weird.When I first time load the page, update the text area ,the dialog box able to close automatically.But after I click into different tab, update the text area,the dialog box popup and it never close forever.It keep hanging there.I am not sure why at the first load it works, but after I navigate through the tabs it wont work.
I was running out of idea, I moved the code here and there, put at page level ,move back to the component level.I put alert inside statusHide() and the alert come out but I noticed it could not read this
$( "#dialog-modal" ).dialog( "close" );

I don't get any solid rules why,because it works initially after the page loading but suddenly not working if I navigate into different tab and update the field from there.I googling here and there but still zero result.At last maybe because of too much reading, I see various kind of code posted in internet and come out with something like this. Instead of calling using id, I declare and call it as variable.
var dialog_modal= $( '#dialog_modal' ).dialog({
        autoOpen: false,
        height: 150,
        width: 400,
        modal: true,
        resizable: false,
        draggable: false
});


function statusShow() {
$(dialog_modal).dialog('open');
}

function statusHide() {
 $(dialog_modal).dialog('close');
}
It WORKS and I have no idea why it works??? Happy and confuse with the solution.I am using jquery 1.7.1 ... is it related?No idea :)

EDITED:For better code put style="display: none;" in dialog_modal div.

Comments

  1. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

Popular posts from this blog

Search Solution Basics

When is it a good time to create a customized search solution? You're developing an external knowledge base for user support. You're in the mood for a fun Friday night. The sales reps just started using the Sales Cloud in Lightning Experience. You want to put your company branding in the search bar. What differentiates SOSL from SOQL? Syntax SOSL searches the search index instead of the org database. SOSL searches more efficiently when you don't know in which object the data resides. All of the above. SOSL works with: REST only SOAP only REST, SOAP, and Apex SOQL only What does a search for a single object look like in SOSL? FIND {cloud} RETURNING Account FIND in ACCOUNT RETURNING "cloud" FIND "cloud" in ACCOUNT FIND (cloud) RIGHT NOW! What does a search for multiple objects look like in SOSL? FIND {sneakers} RETURNING ALL ARTICLES FIND {sneakers} in ALL OBJECTS FIND {sneakers} RETURNING Product2, Content

Process Builder is not fired when field update is called from Approval Process

Scenario In Final Approvals section ; in Approval Process we have field update to update Status field. In Process Builder , we have some action that need to be done when Status field is updated in Approval Process.However this process builder is not fired. Solution To handle this, in Field Update in Approval Process , check Re-evaluated Workflow Rules after Field Change as picture below. What happen if field updated from Approval Process. Workflow - does not fires untill Re-evaluate workflow checkbox is ticked on your field update Process Builder - does not fires untill Re-evaluate workflow checkbox is ticked on your field update Trigger - will fire if conditions are matched This is explained in article here  . Field Updates That Re-evaluate Workflow Rules If  Re-evaluate Workflow Rules After Field Change  is enabled for a field update action, Salesforce  re-evaluates all workflow rules on the object if the field update results in a change to the value of the fi

Tips and Tricks : Test class for Invocable method

Issue : I got 100% coverage in my sandbox but when run validation for deployment it returns 0% coverage It turn out that in my sandbox, I am depending on Process Builder to Invocable Apex class, as long I manipulate test data that fire Process Builder it will call Invocable class. This is not useful when deploying it to Production although it gets deployed together with Process Builder. The correct way is to direct call Invocable method inside test class itself. Example of class : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 global class MyCustomObject_StatusUpdate_Util { @InvocableMethod ( label = ' Update Quote Status ' ) public static void updateQuote ( Request [] requests ) { Set < Id > setOppId = new Set < Id >(); List < SBQQ__Quote__c > listQuoteToUpdate = new List < SBQQ__Quote__c >(); for ( Request request : requests ) {