function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Neil KimNeil Kim 

InsertRow / InsertCell is rolled back.

Hi.
I have big Visualforce page, and now I tried to use insertRow / insertCell to make dynamic table.

First of all, I tested it on test table.
I made button that call make row function.

However, whenever I click button, the new row appears, and dissapear soon. for 0.2~0.3sec.

Why do this dissapear? How do I avoid it?

Please help.
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello YoungHoon,

It's hard to tell you without more details. If you can share your code we can take a look at it.

Hope to have helped!

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.
Shiva RajendranShiva Rajendran
Hi YoungHoon,
Please do share your implementation part to help you better. Probably it is due to some internal logic issue in the controller or may be rerender issue.
Thanks and Regards,
Shiva RV
Neil KimNeil Kim
Thank you, Zulngllo, Shlva,
Here is my code.
 
<apex:form>
<aepx:pageblock>
<body>
<table id="table1">
<tr>
<td> hi1 </td>
<td> hi2 </td>
</tr>
</table>
</apex:pageblock>
</apex:form>

<script type="text/javascript">
function makerow(){
	var table = document.getElementById("table1");
	var row = table.insertRow(0);
	var col1 = row.insertCell(0);
	var col2 = row.insertCell(1);
	col1.innerHTML = "GGGG";
	col2.innerHTML = "HHHH";
}
</script>

Please help me.
 
Shiva RajendranShiva Rajendran
Hi  YoungHoon,
This happens due to rerender issue .. This happened because you would used apex:commandButton .Onclicking apex:commandbutton , it calls a apex function and rerenders the page.On reRendering the whole page ,the whole js or dom get reloaded. That is why you got that glitch.
I have used reRender component in the code on the apex:commandButton and reRendered only the table onClick of button.Hence the code works now 

Please do use the below code ,the code works as your expectation

VF Page :
<apex:page controller="demPageOnVfController">
    
    <apex:form>
<apex:pageblock>
<!-- used reRender here -->
<apex:outputPanel>
<table id="table1">
<tr>
<td> hi1 </td>
<td> hi2 </td>
</tr>
</table>
    </apex:outputPanel>
</apex:pageblock>
<!-- used reRender here -->
        <apex:commandButton onclick="makerow();" value="click this " action="{!buttonClick}"  reRender="table1"/>
</apex:form>

<script type="text/javascript">
function makerow(){
	var table = document.getElementById("table1");
	var row = table.insertRow(0);
	var col1 = row.insertCell(0);
	var col2 = row.insertCell(1);
	col1.innerHTML = "GGGG";
	col2.innerHTML = "HHHH";
}
</script>
</apex:page>

Controller :
 
public class demPageOnVfController {
public PageReference buttonClick()
{
    
    return null;
}
}



Let me know if it need further help.
Thanks and Regards,
Shiva RV