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>
4
  • Wheres the markup code for #table?
    – RedDevil
    Commented Mar 21, 2018 at 10:37
  • I added #table in my post.
    – nat18
    Commented Mar 21, 2018 at 10:49
  • Where is the element with id block? Does it enclose all of this code?
    – David Reed
    Commented Mar 21, 2018 at 10:51
  • sorry again, I added the block.
    – nat18
    Commented Mar 21, 2018 at 10:57

2 Answers 2

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.

2
  • 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
    Commented Mar 21, 2018 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
    Commented Mar 21, 2018 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.

4
  • 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
    Commented Mar 21, 2018 at 10:51
  • 1
    @nat18 See the various techniques in these search results salesforce.stackexchange.com/search?q=jquery+rerender.
    – Keith C
    Commented Mar 21, 2018 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
    Commented Mar 21, 2018 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
    Commented Mar 21, 2018 at 11:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .