Call Apex function first and then javascript method

Question

On click of apex: command button I have to call method in controller so that I can get values. After calling the apex i have to call an javscript function.

I have used action function to call apex function.

<apex:commandButton value="Save"  onclick="saveValuesDetails();" oncomplete="setvalue();" styleClass="buttonWidth"/> &nbsp; 
 <apex:actionfunction action="{!saveProduct}" name="saveValuesDetails" />  

and in javascript I am calling as

 function setvalue()
        {  
            var prodId = getParameterByName('product');   
            alert(prodId); 
            window.parent.opener.document.getElementById(prodId).value={!oppty.Name};  
         }

in controller I am having an function

Public saveValuesDetails(){
//here I am initiallizing values.
} 

I have to first inititalize my values and the assign it thorough javascript. Please help.

Answer 1

First of all if you don't use rerender parameter on the command button the page will reload. So your oncomplete action get lost. To prevent the page reload you need to use rerender="none" attribute or if you call your apex method through the actionFunction use return false; command after that call.

<apex:commandButton value="Save"  
                    action="{!saveProduct}"
                    rerender="none"
                    oncomplete="setvalue();" 
                    styleClass="buttonWidth"/>

In apex class your method should have the same name like in the actionFunction action attribute:

public void saveProduct(){
    //here I am initiallizing values.
} 

In the javascript function while assigning a string value to the DOM element you should use quotes:

function setvalue(){  
    var prodId = getParameterByName('product');   
    alert(prodId); 
    window.parent.opener.document.getElementById(prodId).value = "{!oppty.Name}";  
}