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>

Comments

  1. 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.
    cheaterland.com removal

    ReplyDelete

Post a Comment

Popular posts from this blog

Transaction Security Policy In Salesforce

Salesforce Data Cloud