+ Start a Discussion
Sam.arjSam.arj 

actionFunction and Javasctipt block

I have a repeater within a javascript block, once a user clicks on a link that calls the javascript function of my actionFunction, the selected area refreshs. However, the javascript block is not executed again on the Ajax refresh.

 

 

<div id="msgdiv"></div> <apex:outputPanel id="refreshArea"> <script type="text/javascript"> function test() { var msg = ""; <apex:repeat value="{!Strings}" var="item"> msg += '{!item}-'; </apex:repeat> document.getElementById('msgdiv').innerHTML = msg; }

//works ok only on first page load

test(); </script>

Here is te actionFunction definition on the page:

 

<apex:actionFunction name="AddNewString" action="{!addString}" reRender="refreshArea" status="status"></apex:actionFunction> <a href="javascript:AddNewString()">test adding a string</a>

 In order to make the javascript call, I tried both actionStatus "onstop" event and actionFunction "oncomplete".

 

 Here  are the results:

 1) actionFucntion:

<apex:actionFunction name="AddNewString" action="{!addString}" reRender="refreshArea" oncomplete="test()"></apex:actionFunction>

 

 

 actionFunction oncomplete: won't call the javascript function!

 

 2) actionStatus:

  

<apex:actionStatus startText="working..." onstop="test()" id="status"></apex:actionStatus>

This one calls the javascript, in the HTML source code also I can see the javascript block is updated, however the previous text is shown. As if the actionStatus has called the javascript just before the DOM is updated by Ajax call.

 

This is very strange!
 
By the way, if I remove the javascript block and just flush out everything into the browser it works fine!

Anyone can help shed some light on this issue?


 

 

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
stephanstephan

This is a general issue with AJAX, script blocks, and innerHTML. Specifically, the JS in the script block won't get evaluated by the browser if inserted programatically into the DOM.

 

You might try working around this by putting an id on your script block:

 

<script type="text/javascript" id="myscript"> function test() { var msg = ""; <apex:repeat value="{!Strings}" var="item"> msg += '{!item}-'; </apex:repeat> document.getElementById('msgdiv').innerHTML = msg; } //works ok only on first page load test(); </script>

 

 

 

And then evaling the JS:

 

<apex:actionFunction name="AddNewString" action="{!addString}" reRender="refreshArea" oncomplete="eval(document.getElementById('myscript').innerHTML)"></apex:actionFunction>

 

...stephan

 

All Answers

stephanstephan

This is a general issue with AJAX, script blocks, and innerHTML. Specifically, the JS in the script block won't get evaluated by the browser if inserted programatically into the DOM.

 

You might try working around this by putting an id on your script block:

 

<script type="text/javascript" id="myscript"> function test() { var msg = ""; <apex:repeat value="{!Strings}" var="item"> msg += '{!item}-'; </apex:repeat> document.getElementById('msgdiv').innerHTML = msg; } //works ok only on first page load test(); </script>

 

 

 

And then evaling the JS:

 

<apex:actionFunction name="AddNewString" action="{!addString}" reRender="refreshArea" oncomplete="eval(document.getElementById('myscript').innerHTML)"></apex:actionFunction>

 

...stephan

 

This was selected as the best answer
Sam.arjSam.arj

Thanks a bunch!

 

the oncomplete event never fired, so I used "onstop" event of the actionStatus and it worked like a charm!

 

Thanks again,

 

sreejasreeja
hi sam, can you please share your email id i have a small query