Add/Remove Content in the VF Page using JS
<apex:page docType="html" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var obj=new Array();
$("#addBtn").click(function(){
obj.push($("[id$=accName]").val());
displayDetailsInPanel();
alert("Saved..."+obj.length);
$("[id$=accName]").val('');
$('#displayPanel').hide();
});
function displayDetailsInPanel(){
var imgTag = document.createElement("img");
imgTag.src = '{!URLFOR($Resource.closeImages,'close-icon.jpg')}';
imgTag.id=$("[id$=accName]").val();
imgTag.onclick = function (){removeValueInList(this.id)};
var spanTag = document.createElement("span");
spanTag.setAttribute("align","left");
spanTag.innerHTML =$("[id$=accName]").val()+"<br/>";
spanTag.id=$("[id$=accName]").val();
document.getElementById("displayValues").appendChild(imgTag);
document.getElementById("displayValues").appendChild(spanTag);
document.getElementById("displayVal").appendChild(displayValues);
}
function removeValueInList(str){
var element=document.getElementById(str);
element.parentNode.removeChild(element);
var element=document.getElementById(str);
element.parentNode.removeChild(element);
obj.splice(str,1);
alert(str+" Removed...");
}
$("#addDetail").click(function(){
$('#displayPanel').show();
});
});
</script>
<apex:form id="searchForm">
<apex:pageBlock title="Enter the Name To Display In Panel" helpTitle="Enter The Detail" helpUrl="i">
<span id="addDetail">Click Here To ADD : </span> <BR/>
<div id="displayPanel" style="display:none;"> <apex:inputText id="accName"/>
<input type="button" value="SAVE" id="addBtn" />
</div>
<div id="displayValues" style="border:1px solid #eaeaea">
</div>
<p id="displayVal">
</p>
</apex:pageBlock>
</apex:form>
</apex:page>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var obj=new Array();
$("#addBtn").click(function(){
obj.push($("[id$=accName]").val());
displayDetailsInPanel();
alert("Saved..."+obj.length);
$("[id$=accName]").val('');
$('#displayPanel').hide();
});
function displayDetailsInPanel(){
var imgTag = document.createElement("img");
imgTag.src = '{!URLFOR($Resource.closeImages,'close-icon.jpg')}';
imgTag.id=$("[id$=accName]").val();
imgTag.onclick = function (){removeValueInList(this.id)};
var spanTag = document.createElement("span");
spanTag.setAttribute("align","left");
spanTag.innerHTML =$("[id$=accName]").val()+"<br/>";
spanTag.id=$("[id$=accName]").val();
document.getElementById("displayValues").appendChild(imgTag);
document.getElementById("displayValues").appendChild(spanTag);
document.getElementById("displayVal").appendChild(displayValues);
}
function removeValueInList(str){
var element=document.getElementById(str);
element.parentNode.removeChild(element);
var element=document.getElementById(str);
element.parentNode.removeChild(element);
obj.splice(str,1);
alert(str+" Removed...");
}
$("#addDetail").click(function(){
$('#displayPanel').show();
});
});
</script>
<apex:form id="searchForm">
<apex:pageBlock title="Enter the Name To Display In Panel" helpTitle="Enter The Detail" helpUrl="i">
<span id="addDetail">Click Here To ADD : </span> <BR/>
<div id="displayPanel" style="display:none;"> <apex:inputText id="accName"/>
<input type="button" value="SAVE" id="addBtn" />
</div>
<div id="displayValues" style="border:1px solid #eaeaea">
</div>
<p id="displayVal">
</p>
</apex:pageBlock>
</apex:form>
</apex:page>
This is highly informative, crisp and clear. I think that everything has been described in systematic manner so that reader could get maximum information and learn many things.
ReplyDeletecheaterland.com removal