+ Start a Discussion
developerTeamdeveloperTeam 

Refresh Only PageBlock Portion & Link InputText n CommandButton by ENTER key

Hi,

I had developed a Visualforce page which UI looks similar to a ListView with a Search Functionality. My  Page has Executed very well but has Several Issues in UI. I had wrote my Issues after the code. Please check Below

 

<apex:page controller="PortofOriginController" showHeader="false" sideBar="false" tabStyle="Sourcing__tab" id="pg">
<head>
 <apex:message title="Error"/>
 <Style>
  .Body 
    {font-size:14px;font-family:'Calibri';}
 </Style>
 <Script type='text/javascript'>
  function noenter(ev)  {
        if (window.event && window.event.keyCode == 13 || ev.which == 13) {
            doSearchAF();
            return false;
         } else {
              return true;
         }
     }
  function writeDB()
{
   location.reload( 0 );
   return false;
}
 </Script>
</head>
<body>
<apex:form >  
   <c:Sectionheader iconsrc="{!$Resource.Port_Of_Origin}" title="Sourcing" subTitle="Port of Origin" PrintUrl="https://cs5.salesforce.com/a0R/x?fcf=00BO0000000WWES&rolodexIndex=-1&page=1" help="https://help.salesforce.com/htviewhelpdoc?id=co_view.htm&siteLang=en_US"/>
   <apex:actionRegion rendered="true">  
    <apex:outputPanel id="top" layout="block" style="
    border: 0 none;
    font-family: Calibri;
    height: 24px;
    float: right;
    margin-top: -25px;  
    width: 270px;">
      <apex:outputLabel value="Search" style="font-weight:Bold;font-family:'Calibri';padding-right:10px;font-size:14px;" for="txtSearch"/>    
      <apex:inputtext value="{!searchString}" id="txtSearch" onkeypress="return noenter(event);" />
        <span style="padding-left:5px; ">
         <apex:commandbutton id="btnGo" value="Go!" action="{!Search}" rerender="searchResults" status="blockUI" style="width:40px;"/>
        </span>
    </apex:outputPanel>
    <apex:outputPanel id="pnlSearchResults" style="margin:10px;overflow-Y:auto;" layout="block">             
       <apex:pageBlock id="searchResults" title="Port of Origin" mode="edit" tabStyle="Sourcing__tab">
       
        <apex:pageBlockButtons location="top" style="padding-left:70px;">
        <apex:commandButton action="{!URLFOR($Action.Port_of_Origin__c.New)}" value="New Port of Origin" id="blockUI" style="font-weight:bold;width:120px;"  />       
        </apex:pageBlockButtons> 
       
        <apex:pageBlockTable value="{!results}" var="a" id="tblResults">
       
          <apex:column >
            <apex:facet name="header">
               <apex:outputPanel >Action</apex:outputPanel>
            </apex:facet>
            &nbsp;<apex:outputLink title="Edit" value="/{!a.id}/e?retURL=/apex/{!$CurrentPage.Name}" 
            style="font-size:12px; color: #015BA7;font-weight: normal;text-decoration: none;">Edit</apex:outputLink>&nbsp;|&nbsp;             
           <apex:commandLink id="idToDel" reRender="searchResults" title="Delete" action="{!deleteMethod}" immediate="true" onclick="if(!confirm('Are you sure you want to delete ?')) return false;" oncomplete="writeDB();" style="font-size:12px;color: #015BA7;font-weight: normal;text-decoration: none;">Del
             <apex:param value="{!a.Id}" name="idToDel" assignTo="{!delId}"/>
            </apex:commandLink>  
          </apex:column>   
               
          <apex:column > 
           <apex:facet name="header">
            <apex:outputPanel style="">Port of Origin Name</apex:outputPanel>
           </apex:facet>
           <apex:outputLink value="/{!a.id}" id="eventlink" >{!a.Name} </apex:outputLink>  
          </apex:column>

        </apex:pageBlockTable>
       </apex:pageBlock>	
     </apex:outputPanel>
   </apex:actionRegion> 
  </apex:form>
 </body>        
</apex:page>

 

1. As for Search I have a input text box with a  command Button "Go!" i.e search Button  the problem here is when is Enter the search text and Press Enter key in my KeyBoard the Go button is not invoked , instead the New Button of below of PageBlock is being Invoked. 

It works very fine when enter search text and Manually inovkes "Go!" Button or using Mouse or Tab and Enter key.

So I want Only "Go!" Button to be invoked  after entering searchtext by Pressing Enter key.

 

2. In PageblockTable the 1st column has Edit and Delete command links. When I click the DEL command link the Entire page is being refreshes or reloaded with record being deleted... I want only a certain portion or a Output Panel or PageBlockTable to only RELOAD or REFRESHED, leaving the entire page remain Constant only certain page to be reloaded similar to inbox of gmail ... Intially I used Rendered but failed to get the required scenario.

 

-Thank you

nickwick76nickwick76

Hi,

Regarding #2

I wonder if that not lies in the nature of commandLink?

Try using outputText, format it as a link and add an actionSupport tag for the action and rerender part.

 

HTH / Niklas

developerTeamdeveloperTeam

Hi,

I didn't get u , 

the code for DEL is 

 

<Script>
function writeDB()
{
location.reload( 0 );
return false;
}
</Script>

.

.

.

<apex:commandLink id="idToDel" reRender="tblResults" title="Delete" action="{!deleteMethod}" immediate="true" onclick="if(!confirm('Are you sure you want to delete ?')) return false;" oncomplete="writeDB();" >Del

<apex:param value="{!a.Id}" name="idToDel" assignTo="{!delId}"/>
</apex:commandLink>

 

Then how to Use apex:inputtext without apex:param.......... Please provide a sample code

developerTeamdeveloperTeam
Please tell me Clearly
nickwick76nickwick76

Hi,

So this is a suggestion to question #2. You can use actionsupport to update only certain sections on a page.

 

        <apex:outputPanel id="A">
            <apex:outputText style="text-decoration:underline;">A link</apex:outputText>
            <apex:actionSupport action="{!aMethod}" event="onclick" reRender="A">
                <apex:param value="{!NOT(booleanVal)}" name="booleanVal" assignTo="{!booleanVal}"/>
            </apex:actionSupport>
    
            <br/><br/>
            <apex:outputPanel rendered="{!booleanVal}">
                <b>Outputpanel now rendered...</b>
            </apex:outputPanel>
        </apex:outputPanel>

 In this case I have used a boolean (booleanVal) instead if delId just to test with the rerendering.

This code assumes booleanVal is set to false in the constructor. When clicking on 'A link' the outputPanel below becomes visible and then invisible again when clicking on the link again.

 

// Niklas

developerTeamdeveloperTeam
The Code didn't worked....
When I click "A Link" the record is being deleted but it still present on page,, when i refresh the entire page it is removed,, So the reRender within the Output-Panel didn't work well ........ Please suggest some other Way! :)
nickwick76nickwick76

It works for me so it depends on the context it is put in.

Can you post your code after the change? You have to rerender the right outputpanel of course.

developerTeamdeveloperTeam

As with your code I had Modified my Code:  Before to that Please check my Previous VF Code

<Script>
  function writeDB()
{
   window.location.reload( true );
}
 </Script>
<!-- Script for Reloading for PageBlockTable -->

<!-- My coloumm in Table-->
<apex:column >
<apex:facet name="header">
<apex:outputPanel >Action</apex:outputPanel>
</apex:facet>
&nbsp;<apex:outputLink title="Edit" value="/{!a.id}/e?retURL=/apex/{!$CurrentPage.Name}" >Edit</apex:outputLink>
&nbsp;|&nbsp;
<apex:commandLink id="idToDel" reRender="tblResults"  title="Delete" action="{!deleteMethod}" immediate="true" onclick="if(!confirm('Are you sure you want to delete ?')) return false;" oncomplete="writeDB();" style="font-size:12px;color:           #015BA7;font-weight: normal;text-decoration: none;">
Del<apex:param value="{!a.Id}" name="idToDel" assignTo="{!delId}"/>
</apex:commandLink>  
</apex:column>  
<!-- This is old VF Code for Edit and Delete which reRenders the whole Page.-->

 And My Controller for Old Code is (which may help you to set aMethod and BooleanVlaue in  VF newCode)

<!-- only a Part of my Controller -->
   
   public string DelId {get;set;}

 //Loads the fields values into a variable and Used in deleteMethod()
   public void loadData() {
            
        deals = [select id, name, CpPort__c,State__c from Port_Of_Origin__c Order By CreatedDate desc];
    }
    
  //Delete function used to delete the record 
  public void deleteMethod(){
        deals = [Select id,Name,CpPort__c,State__c  from Port_Of_Origin__c where id = :DelId];
       if(deals.size() > 0 || deals[0].Id != ''){
       delete deals;
       }
       loadData();
   
    }

 And My Modified Code with your Post is as Follows 

 <apex:outputPanel id="A">
   <apex:outputText style="text-decoration:underline;">DEL</apex:outputText>
     <apex:actionSupport action="{!deleteMethod}" event="onclick" reRender="A">
       <apex:param value="{!a.Id}" name="idToDel" assignTo="{!delId}"/>
     </apex:actionSupport>
     <br/><br/>
     <apex:outputPanel rendered="{!a.Id}">
      <b>Outputpanel now rendered...</b>
   </apex:outputPanel>
 </apex:outputPanel>

 Please Correct this Code Such that When I click DEL only pageBlock reRenders and Delets the record .... or Suggest me some other code to Delete the record and Stay within the samePage

 

nickwick76nickwick76

Hi, 

This is not working because you are using the value of {!a.id} as a boolean value.

 

<apex:outputPanel rendered="{!a.Id}">
      <b>Outputpanel now rendered...</b>
   </apex:outputPanel>

 

 Create another property in your controller, for example

 

public boolean displayArea {get;set;}

 Then set this to true in 'deleteMethod'

 

 //Delete function used to delete the record 
  public void deleteMethod(){
        deals = [Select id,Name,CpPort__c,State__c  from Port_Of_Origin__c where id = :DelId];
       if(deals.size() > 0 || deals[0].Id != ''){
       delete deals;
       }
       loadData();
       
       displayArea = true;
    }

 Or use another param for this.

 

Change the rendered attribute to the value of 'displayArea'

 

<apex:outputPanel rendered="{!displayArea}">
      <b>Outputpanel now rendered...</b>
   </apex:outputPanel>

 

Now when the outputpanel is rerendered it will display what's inside since 'displayArea' is true. Well, hopefully unless there is something else not working.

 

// Niklas