Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sucharita NandanSucharita Nandan 

Javascript remote action calling from vf page link

Hi, i want show list of opportunitylineitem when i click one opportunity from list of opp related to one account but its not working

vf Page:
<apex:page  controller="HTMLtestCon" showHeader="true" sidebar="true">
    <script type="text/javascript">
        function accountOpp(){
            var recordid = '{!$currentpage.parameters.id}';
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOpps}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName = result[i].Name;
                            document.getElementById("{!$Component.block.blockSection.firstItem.OpportunityName}").innerHTML +=  resultName +'<br/>';
                            var resultAmount = result[i].Amount;
                            document.getElementById(
                                "{!$Component.block.blockSection.secondItem.amount}"
                            ).innerHTML += resultAmount +'<br/>';
                            var resultCloseDate = new Date(result[i].CloseDate);
                            document.getElementById(
                                "{!$Component.block.blockSection.thirdItem.CloseDate}"
                            ).innerHTML += resultCloseDate +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<pre>" + event.where + "</pre>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );

        }
        function oppLineItems(){
            var oppName = document.getElementById('OpportunityName').value;
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOPLI}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName2 = result[i].Product2.Name;
                            document.getElementById("{!$Component.block2.blockSection2.firstItem2.Product2Name}").innerHTML +=  resultName2 +'<br/>';
                            var resultQuantity = result[i].Quantity;
                            document.getElementById(
                                "{!$Component.block2.blockSection2.secondItem2.Quantity}"
                            ).innerHTML += resultQuantity +'<br/>';
                            var resultUnitPrice = new Date(result[i].UnitPrice);
                            document.getElementById(
                                "{!$Component.block2.blockSection2.thirdItem2.UnitPrice}"
                            ).innerHTML += resultUnitPrice +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<pre>" + event.where + "</pre>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );
        }
    </script>

    <button onclick="accountOpp()">Related Opps</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
        <apex:pageBlockSection id="blockSection" columns="3">
            <apex:pageBlockSectionItem id="firstItem">
                <apex:outputLink id="OpportunityName"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="amount"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem">
                <apex:outputText id = "CloseDate" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock id="block2">
        <apex:pageBlockSection id="blockSection2" columns="3">
            <apex:pageBlockSectionItem id="firstItem2">
                <apex:outputText  id="Product2Name"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem2">
                <apex:outputText id="Quantity"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem2">
                <apex:outputText id = "UnitPrice" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>



controller:

public class HTMLtestCon {
 
    @RemoteAction
    public static List<Opportunity> loadOpps( id recordid){
        List<Opportunity> listOfOpps = new List<Opportunity>();
        listOfOpps = [ Select Id, Name, Account.Name, CloseDate, Amount, Type from Opportunity
                                        where AccountId =: recordid ];
        return listOfOpps;
    }

    @RemoteAction
    public static List<OpportunityLineItem> loadOPLI( String oppName ){
        List<OpportunityLineItem> listofOPLI = new List<OpportunityLineItem>();
        listofOPLI = [ Select Id, Product2.Id, TotalPrice, Quantity, Product2.ProductCode, UnitPrice,
                                                                Product2.Family, Product2.Name , OpportunityId from Opportunitylineitem
                                                                where OpportunityId =:oppName ];
        return listofOPLI;
    }

}

also i want to stop opportunity list multiple time when i am clicking related opp button.


User-added imageUser-added image
Swayam@SalesforceGuySwayam@SalesforceGuy
Hi,
Can You Re- Enter the VF Code using Code Formatter, It's very diffcult to understand your code.

--
Thanks,
Swayam
Sucharita NandanSucharita Nandan
vf page

<apex:page  controller="HTMLtestCon" showHeader="true" sidebar="true">
    <script type="text/javascript">
        function accountOpp(){
            var recordid = '{!$currentpage.parameters.id}';
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOpps}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName = result[i].Name;
                            document.getElementById("{!$Component.block.blockSection.firstItem.OpportunityName}").innerHTML +=  resultName +'<br/>';
                            var resultAmount = result[i].Amount;
                            document.getElementById(
                                "{!$Component.block.blockSection.secondItem.amount}"
                            ).innerHTML += resultAmount +'<br/>';
                            var resultCloseDate = new Date(result[i].CloseDate);
                            document.getElementById(
                                "{!$Component.block.blockSection.thirdItem.CloseDate}"
                            ).innerHTML += resultCloseDate +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<pre>" + event.where + "</pre>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );

        }
        function oppLineItems(){
            var oppName = document.getElementById('OpportunityName').value;
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOPLI}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName2 = result[i].Product2.Name;
                            document.getElementById("{!$Component.block2.blockSection2.firstItem2.Product2Name}").innerHTML +=  resultName2 +'<br/>';
                            var resultQuantity = result[i].Quantity;
                            document.getElementById(
                                "{!$Component.block2.blockSection2.secondItem2.Quantity}"
                            ).innerHTML += resultQuantity +'<br/>';
                            var resultUnitPrice = new Date(result[i].UnitPrice);
                            document.getElementById(
                                "{!$Component.block2.blockSection2.thirdItem2.UnitPrice}"
                            ).innerHTML += resultUnitPrice +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<pre>" + event.where + "</pre>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );
        }
    </script>

    <button onclick="accountOpp()">Related Opps</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
        <apex:pageBlockSection id="blockSection" columns="3">
            <apex:pageBlockSectionItem id="firstItem">
                <apex:outputLink id="OpportunityName"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="amount"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem">
                <apex:outputText id = "CloseDate" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock id="block2">
        <apex:pageBlockSection id="blockSection2" columns="3">
            <apex:pageBlockSectionItem id="firstItem2">
                <apex:outputText  id="Product2Name"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem2">
                <apex:outputText id="Quantity"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem2">
                <apex:outputText id = "UnitPrice" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

controlller 
public class HTMLtestCon {
  
    @RemoteAction
    public static List<Opportunity> loadOpps( id recordid){
        List<Opportunity> listOfOpps = new List<Opportunity>();
        listOfOpps = [ Select Id, Name, Account.Name, CloseDate, Amount, Type from Opportunity 
                                        where AccountId =: recordid ];
        return listOfOpps;
    }

    @RemoteAction
    public static List<OpportunityLineItem> loadOPLI( String oppName ){
        List<OpportunityLineItem> listofOPLI = new List<OpportunityLineItem>();
        listofOPLI = [ Select Id, Product2.Id, TotalPrice, Quantity, Product2.ProductCode, UnitPrice, 
                                                                Product2.Family, Product2.Name , OpportunityId from Opportunitylineitem 
                                                                where OpportunityId =:oppName ];
        return listofOPLI;
    }

}

 
Swayam@SalesforceGuySwayam@SalesforceGuy
Hi,

You need to get the opportunity Id , Updated VF Code
  
<apex:page  controller="HTMLtestCon" showHeader="true" sidebar="true">
    <script type="text/javascript">
        function accountOpp(){
            var recordid = '{!$currentpage.parameters.id}';
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOpps}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName = result[i].Name;
                            document.getElementById("{!$Component.block.blockSection.firstItem.OpportunityName}").innerHTML +=  resultName +'<br/>';

                            var resultAmount = result[i].Amount;
                            document.getElementById(
                                "{!$Component.block.blockSection.secondItem.amount}"
                            ).innerHTML += resultAmount +'<br/>';
                            var resultCloseDate = new Date(result[i].CloseDate);
                            document.getElementById(
                                "{!$Component.block.blockSection.thirdItem.CloseDate}"
                            ).innerHTML += resultCloseDate +'<br/>';

                             var resultId = result[i].Id;
                            document.getElementById("{!$Component.block.blockSection.fourthItem.OpportunityId}").innerHTML +=  resultId +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<div class="syntaxhighlighter  " id="highlighter_669751"><div class="bar"><div class="toolbar"><a rel="nofollow" class="item viewSource" style="width: 16px; height: 16px;" title="view source" href="#viewSource">view source</a><div class="item copyToClipboard"><embed id="highlighter_669751_clipboard" type="application/x-shockwave-flash" title="copy to clipboard" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_669751" menu="false" src="/resource/flash/clipboard.swf" width="16" height="16"></div><a rel="nofollow" class="item printSource" style="width: 16px; height: 16px;" title="print" href="#printSource">print</a><a rel="nofollow" class="item about" style="width: 16px; height: 16px;" title="?" href="#about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="attrString">" + event.where + "</code></td></tr></tbody></table></div></div></div>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );

        }

        function oppLineItems(){
            var oppName = document.getElementById("{!$Component.block.blockSection.fourthItem.OpportunityId}").value;
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOPLI}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName2 = result[i].Product2.Name;
                            document.getElementById("{!$Component.block2.blockSection2.firstItem2.Product2Name}").innerHTML +=  resultName2 +'<br/>';
                            var resultQuantity = result[i].Quantity;
                            document.getElementById(
                                "{!$Component.block2.blockSection2.secondItem2.Quantity}"
                            ).innerHTML += resultQuantity +'<br/>';
                            var resultUnitPrice = new Date(result[i].UnitPrice);
                            document.getElementById(
                                "{!$Component.block2.blockSection2.thirdItem2.UnitPrice}"
                            ).innerHTML += resultUnitPrice +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<div class="syntaxhighlighter  " id="highlighter_889148"><div class="bar"><div class="toolbar"><a rel="nofollow" class="item viewSource" style="width: 16px; height: 16px;" title="view source" href="#viewSource">view source</a><div class="item copyToClipboard"><embed id="highlighter_889148_clipboard" type="application/x-shockwave-flash" title="copy to clipboard" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_889148" menu="false" src="/resource/flash/clipboard.swf" width="16" height="16"></div><a rel="nofollow" class="item printSource" style="width: 16px; height: 16px;" title="print" href="#printSource">print</a><a rel="nofollow" class="item about" style="width: 16px; height: 16px;" title="?" href="#about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="attrString">" + event.where + "</code></td></tr></tbody></table></div></div></div>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );
        }
    </script>

    <button onclick="accountOpp()">Related Opps</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
        <apex:pageBlockSection id="blockSection" columns="3">
            <apex:pageBlockSectionItem id="firstItem">
                <apex:outputLink id="OpportunityName" onclick="oppLineItems()"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="amount"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem">
                <apex:outputText id = "CloseDate" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="fourthItem">
                <apex:inputHidden id = "OpportunityId" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock id="block2">
        <apex:pageBlockSection id="blockSection2" columns="3">
            <apex:pageBlockSectionItem id="firstItem2">
                <apex:outputText  id="Product2Name"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem2">
                <apex:outputText id="Quantity"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem2">
                <apex:outputText id = "UnitPrice" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

Please try with above code and let me know,

Hope this helps,

--
Thanks
Swayam
Sucharita NandanSucharita Nandan
I have tried this one but it was asking to inclue <apex:form> for <apex:inputHidden>,
so i have added <input/>, but it is not working.

<apex:pageBlockSectionItem id="fourthItem">
                <!--<apex:inputHidden id = "OpportunityId" />-->
                <input id="OpportunityId" type="hidden" name="theHiddenInput"/>
            </apex:pageBlockSectionItem>
Swayam@SalesforceGuySwayam@SalesforceGuy
Hi

What error are you facing, did you click on Opportunity link, Please let me know the error


--
Thanks
Swayam




 
Sucharita NandanSucharita Nandan
opportunity list is not showing after clicking related opp button
Pramodh KumarPramodh Kumar
There is some syntax error in the line event.type=== exception use debugger to find the exact error.

the main problem when you click the button it is re-initializing the page,

You need to be the re-rerender certain block to get the results. I am getting the data on second click.

If you dont the data on the first click, Click one more time to get the results


Please use this code. I commented some lines in the script and added the commandbutton to re-render the pageblock.  
<apex:page controller="HTMLtestCon" showHeader="true" sidebar="true">
    <apex:form id="form">
    <script type="text/javascript">
        function accountOpp(){
            var recordid = '{!$CurrentPage.parameters.id}';
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOpps}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName = result[i].Name;
                            document.getElementById("{!$Component.block.blockSection.firstItem.OpportunityName}").innerHTML +=  resultName +'<br/>';

                            var resultAmount = result[i].Amount;
                            document.getElementById(
                                "{!$Component.block.blockSection.secondItem.amount}"
                            ).innerHTML += resultAmount +'<br/>';
                            var resultCloseDate = new Date(result[i].CloseDate);
                            document.getElementById(
                                "{!$Component.block.blockSection.thirdItem.CloseDate}"
                            ).innerHTML += resultCloseDate +'<br/>';

                             var resultId = result[i].Id;
                            document.getElementById("{!$Component.block.blockSection.fourthItem.OpportunityId}").innerHTML +=  resultId +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                       // document.getElementById("responseErrors").innerHTML =
                         //   event.message + "<br/>\n<div class="syntaxhighlighter  " id="highlighter_669751"><div class="bar"><div class="toolbar"><a rel="nofollow" class="item viewSource" style="width: 16px; height: 16px;" title="view source" href="#viewSource">view source</a><div class="item copyToClipboard"><embed id="highlighter_669751_clipboard" type="application/x-shockwave-flash" title="copy to clipboard" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_669751" menu="false" src="/resource/flash/clipboard.swf" width="16" height="16"></div><a rel="nofollow" class="item printSource" style="width: 16px; height: 16px;" title="print" href="#printSource">print</a><a rel="nofollow" class="item about" style="width: 16px; height: 16px;" title="?" href="#about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="attrString">" + event.where + "</code></td></tr></tbody></table></div></div></div>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );

        }

        function oppLineItems(){
            var oppName = document.getElementById("{!$Component.block.blockSection.fourthItem.OpportunityId}").value;
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOPLI}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName2 = result[i].Product2.Name;
                            document.getElementById("{!$Component.block2.blockSection2.firstItem2.Product2Name}").innerHTML +=  resultName2 +'<br/>';
                            var resultQuantity = result[i].Quantity;
                            document.getElementById(
                                "{!$Component.block2.blockSection2.secondItem2.Quantity}"
                            ).innerHTML += resultQuantity +'<br/>';
                            var resultUnitPrice = new Date(result[i].UnitPrice);
                            document.getElementById(
                                "{!$Component.block2.blockSection2.thirdItem2.UnitPrice}"
                            ).innerHTML += resultUnitPrice +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                       // document.getElementById("responseErrors").innerHTML =
                        //    event.message + "<br/>\n<div class="syntaxhighlighter  " id="highlighter_889148"><div class="bar"><div class="toolbar"><a rel="nofollow" class="item viewSource" style="width: 16px; height: 16px;" title="view source" href="#viewSource">view source</a><div class="item copyToClipboard"><embed id="highlighter_889148_clipboard" type="application/x-shockwave-flash" title="copy to clipboard" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_889148" menu="false" src="/resource/flash/clipboard.swf" width="16" height="16"></div><a rel="nofollow" class="item printSource" style="width: 16px; height: 16px;" title="print" href="#printSource">print</a><a rel="nofollow" class="item about" style="width: 16px; height: 16px;" title="?" href="#about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="attrString">" + event.where + "</code></td></tr></tbody></table></div></div></div>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );
        }
    </script>
    <apex:commandButton onclick="accountOpp()" reRender="block" value="CommandButton"/>

    <button onclick="accountOpp()">Related Opps</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
        <apex:pageBlockSection id="blockSection" columns="3">
            <apex:pageBlockSectionItem id="firstItem">
                <apex:outputLink id="OpportunityName" onclick="oppLineItems()"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="amount"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem">
                <apex:outputText id="CloseDate" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="fourthItem">
                <apex:inputHidden id="OpportunityId" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock id="block2">
        <apex:pageBlockSection id="blockSection2" columns="3">
            <apex:pageBlockSectionItem id="firstItem2">
                <apex:outputText id="Product2Name"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem2">
                <apex:outputText id="Quantity"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem2">
                <apex:outputText id="UnitPrice" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>
</apex:page>
The screen shot shows the opportunity list on the page.
User-added image

Please let me know if you have any other questions.


Thanks,
pRAMODH.

 
Sucharita NandanSucharita Nandan
this code is also not working when i am clicking related opp button then opp list is coming like flash for a seconed then its gone.

now i have written this below code for vf page but only one opportunity is coming on the list
  
<apex:page  controller="HTMLtestCon" showHeader="true" sidebar="true">
    <script type="text/javascript">
        function accountOpp(){
            var recordid = '{!$currentpage.parameters.id}';
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOpps}',
                recordid,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName = result[i].Name;
                            document.getElementById("{!$Component.block.blockSection.firstItem.OpportunityName}").innerHTML +=  resultName +'<br/>';
                            var resultAmount = result[i].Amount;
                            document.getElementById(
                                "{!$Component.block.blockSection.secondItem.amount}"
                            ).innerHTML += resultAmount +'<br/>';
                            var resultCloseDate = new Date(result[i].CloseDate);
                            document.getElementById(
                                "{!$Component.block.blockSection.thirdItem.CloseDate}"
                            ).innerHTML += resultCloseDate +'<br/>';
                            var resultoppid = result[i].Id;
                            document.getElementById(
                                "{!$Component.block.blockSection.fourthItem.OpportunityId}"
                            ).innerHTML += resultoppid +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<pre>" + event.where + "</pre>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );

        }
        function oppLineItems(){
            var oppName = document.getElementById("!$Component.block.blockSection.fourthItem.oppid").value;
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.HTMLtestCon.loadOPLI}',
                oppName,
                function(result, event){
                    if (event.status) {
                        for (var i = 0; i < result.length; i++) {
                            var resultName2 = result[i].Product2.Name;
                            document.getElementById("{!$Component.block2.blockSection2.firstItem2.Product2Name}").innerHTML +=  resultName2 +'<br/>';
                            var resultQuantity = result[i].Quantity;
                            document.getElementById(
                                "{!$Component.block2.blockSection2.secondItem2.Quantity}"
                            ).innerHTML += resultQuantity +'<br/>';
                            var resultUnitPrice = new Date(result[i].UnitPrice);
                            document.getElementById(
                                "{!$Component.block2.blockSection2.thirdItem2.UnitPrice}"
                            ).innerHTML += resultUnitPrice +'<br/>';

                        }
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML =
                            event.message + "<br/>\n<pre>" + event.where + "</pre>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                },
                {escape: true}
             );
        }
    </script>

    <button onclick="accountOpp()">Related Opps</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
        <apex:pageBlockSection id="blockSection" columns="4">
            <apex:pageBlockSectionItem id="firstItem">
                <apex:outputLink id="OpportunityName" onclick="oppLineItems()"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="amount"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem">
                <apex:outputText id = "CloseDate" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="fourthItem">
                <input id = "OpportunityId"  type="hidden" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock id="block2">
        <apex:pageBlockSection id="blockSection2" columns="3">
            <apex:pageBlockSectionItem id="firstItem2">
                <apex:outputText  id="Product2Name"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="secondItem2">
                <apex:outputText id="Quantity"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="thirdItem2">
                <apex:outputText id = "UnitPrice" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

 
Pramodh KumarPramodh Kumar
Sucharita Nandan,

I got some results with that code.

If you are okay i can show my instance in skype.
you can reach me @
skype: tpramodhkumar 


Thanks,
pRAMODH.
Pramodh KumarPramodh Kumar
If you found any solution please post here.

I want to know what is the problem


Thanks,
pRAMODH.