0

I have jquery document ready issue. I wrote the below code and document.ready function is working until the apex method is called. Once apex method is called, the event is not firing. I need some help.

<script type="text/javascript">
    var j$ = jQuery.noConflict();

    j$(document).ready(function(){
        j$("#table").change(function () {
            calcTotal();
        });       
    });

    function getPrice(){
        calc();
    }

    function calcTotal(){
      /// sum each value //
    }
</script>

<apex:form id="form">
    <apex:pageMessages id="msg" escape="false"/>
    <apex:actionFunction name="calc" action="{!getPrice}" reRender="block" oncomplete="calcTotal();"/>
    <apex:pageBlock id="block">
        <table id="table">
            <apex:repeat value="{!sampleList}" var="s">
                <tr>
                    <apex:inputField value="{!s.Sample__r.Account_c}" onchange="getPrice();">
                    <apex:inputField value="{!s.Price1__c}"/>
                    <apex:inputField value="{!s.Price2__c}"/>
                    <apex:inputField value="{!s.Price3__c}"/>
                    <apex:inputField value="{!s.Price4__c}"/>

                    //more input Field//
                    <apex:outputText value="{!s.Total__c}"">
                </tr>
            </apex:repeat>
        </table>
    </apex:pageBlock>
<apex:form>
  • Wheres the markup code for #table? – RedDevil Mar 21 '18 at 10:37
  • I added #table in my post. – nat18 Mar 21 '18 at 10:49
  • Where is the element with id block? Does it enclose all of this code? – David Reed Mar 21 '18 at 10:51
  • sorry again, I added the block. – nat18 Mar 21 '18 at 10:57
3

The general pattern to use here is to re-run the jQuery logic once the re-render is complete:

<script type="text/javascript">

function addChangeListener() {
    var j$ = jQuery.noConflict();

    j$(document).ready(function(){
        j$("#table").change(function () {
            calcTotal();
        });       
    });

    function getPrice(){
        calc();
    }

    function calcTotal(){
      /// sum each value //
    }
}

// Run when page first loads
addChangeListener();

</script>

<!-- Run when re-render is complete -->
... reRender="block" oncomplete="addChangeListener();"/>

The jQuery ready will execute immediately in the re-render case so adding the change handler.

  • I tried your code, and it works perfectly! I had been struggling against this issue. I came across the same issue before, but I was able to manage only in jquery then. But this time, it needs to call apex method. I can't thank you enough! – nat18 Mar 21 '18 at 11:50
  • @nat18 You are welcome. Suggest you spend a few minutes now making sure you understand why it works so you can apply the same pattern the next time. – Keith C Mar 21 '18 at 11:52
2

Your jQuery is adding a change handler to an element (#table) that is affected by a partial page rerender in Visualforce. When getPrice() is executed, Visualforce rerenders the contents of the <apex:pageBlock> with id block, which contains #table.

When Visualforce rerenders all or a portion of the page, those components are generated on the server side. The original DOM elements aren't there anymore, so if you've manipulated them, your changes will be lost. That's why your jQuery no longer works.

It's not clear why you need the change handler, however, since you already call calcTotal() following any change to the one input field within the table.

  • As you pointed, the element is related both document.ready and apex method. I didn't know that DOM is lost if I use the rerender. How can we handle like this pattern? I thought the possibility by using only jquery, but it is impossible since it is needed to get the selected account information. Changing account, it needs to get the data by query. – nat18 Mar 21 '18 at 10:51
  • 1
    @nat18 See the various techniques in these search results salesforce.stackexchange.com/search?q=jquery+rerender. – Keith C Mar 21 '18 at 11:03
  • @David Reed I added more actual code, but it is not all since it's huge code. There are lot of input fields needed to be calc. – nat18 Mar 21 '18 at 11:23
  • @Keith C thanks, I'm looking at the page you told me. There seems to be the same issue on that pages. – nat18 Mar 21 '18 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.