when i am Double click on URL Error:Survey ID required..How to achieve this?

Question

/*Requirement: I will get a survey mail to my gmail. when i click on that survey link then i will get redirect to a survey page.(This is working fine).Here the questions are in page by page.so fill first question and click on next button and so on.. The URL for first question is Like this for survey Page: http://bindu-developer-edition.ap1.force.com/csat?surveyId=a0U90000007CO6TEAW

Urls for rest of next questions page are same as http://bindu-developer-edition.ap1.force.com/csat/css_se__CSATvDynamicSurveyTemplate

Problem: when i click F5 for refresh it is working good. But here when i select second URL and press enter then it is showing error as Survey Id is required. It should show respective question because it is just reloading the page only. Please help me for this. */

<apex:page controller="CSATcDynamicSurveyTemplate"  sidebar="false" showHeader="false" cache="false">
<style type="text/css">
body {
    background-image: {!$Resource.SurveyLogo} repeat-x; margin:0; padding:0;
}
#banner_cont{
    width:100%;height:66px; 
}
#logo{
    width:405px; height:66px; float:left;
}
#welcome_cont{
    width:400px; float:right; margin-right:10px;
}
.wel{
    font:12px/16px Arial,tahoma,sans-serif;text-align:right;color:#9B9B9B;width:auto;padding-top:9px;
}
.tag{
    font:bold 16px Arial,tahoma,sans-serif,verdana;text-align:right;color:#1483C3;width:auto;padding-top:9px;
}
#intcontent_cont{
    width:96%; margin-left:auto; margin-right:auto; margin-top:20px; 
}

#cont_hd{
    font:bold 16px Arial,tahoma,sans-serif,verdana;color:#1483C3;text-align:center;
}
#content{
    font:12px/16px Arial,tahoma,sans-serif;color:#333;padding-left:10px; text-align:justify;padding-top:10px;
}
.btnTableClass{
    background-color:#e3eefc;
    width:100%; height:26px; border-top:1px solid #d3dce7; border-bottom:1px solid #d3dce7;
}
#cmnbtn{
    float:left; width:auto; margin-left:18px;padding-top:1px;
}
#prvnxtbtn{
    float:right; width:auto;margin-right:18px;padding-top:1px;
}
.message {
    background-color: #FFFFCC;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    margin: 0 0 10px 0;
    padding: 6px 8px 6px 6px;
}
.txtarea{
    width:250px; height:90px; font:12px Arial; color:#333; 
}
span{
    font:12px Arial,tahoma,sans-serif,verdana; color:#333;
}
.text {
    color: blue;
    position: absolute;
}

button{
    outline:none;
}
.BodyCSS{
    inherit: none; 
    font-family: verdana;
    font-size: 12px;
    padding: 5px 0px 5px 5px;
    valign:center;
}
.QuesTextStyle{
    background-color: #E8E8E8;
    height:auto;
    width:100%;
    color:#1483C3;
}
.previousAnswerTextStyle{
    background-color: #0174DF;
    height:auto;
    width:100%;
    color:white;
}
.ui-progressbar { 
    height:20px;
    width:300px;
    margin:0 auto;
}   

.ui-progressbar span { 
    width:300px;
    position:absolute;
    text-align:center;
    font-weight:bold;
} 
.AlternateRowStyle{
    background-color: #C1D2E8;
}
.AnswerOptionsCSS{
    inherit: none; 
    font-family: verdana;
    font-size: 12px;
}

.outerTableClass{
    height:auto;
    width:95%;
    margin: 5px 25px 5px 5px;
    padding: 5px 25px 5px 5px;
}
.innerTableClass{
    height:auto;
    width:90%;
    margin: 5px 25px 5px 5px;
    padding-left:40px;
    padding-right:20px;
    padding-top:5px;
    padding-bottom:5px;
    border:1px #808080;
}
.titleClass{
    font:bold 16px Arial,tahoma,sans-serif,verdana;
    color:#1483C3;
    padding-bottom:14px;
}
.ansOptClass{
    font-family: verdana;
    font-size: 12px;
    padding-left:20px;
    padding-top:10px;
}
.pblabel { position: absolute; width: 100%; text-align: center; line-height: 1.9em; }
#progressbar .caption { width: 50px; margin: 0 auto; }
</style>


<script type="text/javascript">
 var i =0;
 var pgrsBarJS = 0;
// var percentValue=0; 
var j=0;  
</script>

<script type="text/javascript">
var answeredQuestions=null;

var currentComment = '';
    function getCurrentComment(comment) {
       currentComment = comment;    
    }<!-- passing the  jS value to apex controller -->
function proactiveMsg(record, elementType)
{  var madatoryIDs = document.getElementById('{!$Component.frmDynamicSurvey.mandatory}').value;  
if(elementType != 'text'){if(madatoryIDs.search(record)!= -1 && currentComment == ''){
                alert('For your response less than \“Satisfactory\” please elaborate on your feedback to proceed further','test');            
                return false;   


            } 
            else
            {
                return true;
            }

      }
    proactiveMsgtest();

        var pagenumber = ({!pgNum})+1;
        var searchPageId =":"+pagenumber+".0:";          

        if( (answeredQuestions==null|| answeredQuestions.search(searchPageId) == -1) 
&& ( record != null && record != '')             
&& (j==0) )  
        {  
            j = j+1;
            proactiveMsgtest(); 
            // DynamicProgressBar(); ` }           


     }  

      function DynamicProgressBar()
       {

           progressBar = document.getElementById('{!$Component.frmDynamicSurvey.txtprogressBar}').value; 
            if(i==0)
            {

                  var value = {!round(progressBarPercentage*progressBarInit,0)}; 
                $("#progressbar").progressbar("option", "value",value);//added the value*
                $("#progressbar span.text").text(value+ "%");//added the  value *

                i++;
            }

     }       

</script>

<script type="text/javascript">
      var __sfdcSessionId = '{!GETSESSIONID()}';
</script>

<script src="../../soap/ajax/22.0/connection.js"
    type="text/javascript"></script>

<script type="text/javascript">

<!--  function validate(idStr){
        alert(idstr);
        var result = sforce.connection.query("Select Id,css_se__Answer_Text__c from css_se__SNGoAnswer_Options_Set_Details__c where Id='"+idStr+"'");
        var records = result.getArray("records");

        for (var i=0; i< records.length; i++) {
            var record = records[i];

        }
    }

-->
</script>

<apex:form id="frmDynamicSurvey">


<div style="width:750px; margin:20px 20px 0px 160px;">

<script>
 pgrsBarJS = 0;
answeredQuestions = null;</script>

<apex:outputPanel id="refreshProgressBar">

<script>
<!--
         var value = {!round(progressBarPercentage*progressBarInit,0)};
           //var value = {!(progressBarPercentage)};
           //var init = {!(progressBarInit)}; 
           $("#progressbar").progressbar("option", "value",value);
           $("#progressbar span.text").text(value + "%");  -->
</script>
</apex:outputpanel>

<apex:repeat value="{!lstsurveyPageWrapper1}" var="wp" >


<apex:outputPanel id="thePanel">
<script>


    if({!wp.checkValue} == true)
    {

      pgrsBarJS++;

         var searchstr = ':'+('{!wp.objQues.Question_Order__c}')+':';
        // if( (answeredQuestions==null|| answeredQuestions.search(searchPageId) == -1) {
         answeredQuestions =answeredQuestions+':'+('{!wp.objQues.Question_Order__c}')+':';
         //}
    }

</script>
<!--  
<div style="width:40px;padding:10px 10px 10px 0px;display:inline;">
<div style="width:40px;height:5px;display:inline;clear:both"></div>
<div style="width:auto;padding-top:10px;display:inline;"><apex:inputCheckbox value="{!wp.checkValue}" disabled="true"   /></div>
<div style="width:auto;padding-top:10px;display:inline;">
<apex:outputText value="{0,number,0}" >
<apex:param value="{!wp.objQues.Question_Order__c}"/>
</apex:outputText>
</div>

</div>-->

</apex:outputPanel>

</apex:repeat>
</div>



<!-- when the user clicks the answer option the action function 'VERIFYOPTION' IS CALLED -->
<apex:actionFunction name="proactiveMsgtest" action="{!verifyOption}" rerender="refreshProgressBar,proactivemsg1,msg1,thePanel,progressBar,txtprogressBar" >
<!-- <apex:param name="QuestionRec" assignTo="{!questionRecord}" value=""    /> -->
</apex:actionFunction>


<apex:outputPanel id="errorMsgPanel" rendered="{!displayErrorPanel}">
<apex:pageMessages />
</apex:outputPanel>

<!-- New Survey -->
<apex:outputPanel id="SurvPanel" rendered="{!displayPanel}">
<div style="margin:0; padding:0; width:100%">
<div id="banner_cont">
<div id="logo"><img src="{!$Resource.CSSLogo_2012}" alt="E-Survey" border="0" /></div>
<div id="welcome_cont">
<div class="wel">Welcome to the</div>
<div class="tag">Electronic Customer Satisfaction Survey</div>
</div>
</div>

<div id="intcontent_cont">
<table width="100%">

<tr><td>
<!--    <div>
             Time Taken <apex:inputText size="5" id="timespent" value="{!SurveyTimer}" style="width:40px" disabled="true"/>
<apex:inputHidden id="timespent1" value="{!SurveyTimer}" />
<input type="submit" id="hiddentimerbtn" style="visibility:hidden" onclick="fnsetTime()" />
</div> -->
</td>
<td>

</td>
</tr>
</table>
<div id="cont_hd">
                {!HTMLENCODE(objTemplate.Title__c)}
</div>
<div id="content">
<apex:pageMessages />
<apex:outputPanel rendered="{!pageMsg2!=''}">
<div class="message errorM2" style="height:17px;width:300px;">
<div style="float:left;" id="message" >{!pageMsg2}</div>
</div>
</apex:outputPanel>
<apex:actionFunction name="validateOptions" action="{!next}">
</apex:actionFunction>
<apex:dataTable value="{!lstsurveyPageWrapper}" id="datTabl"  var="lst" align="center" width="100%">




<apex:column >

<table class="QuesTextStyle" border="0" cellpadding="4" cellspacing="1" style="border:1px solid #d3dce7">
<tr>
<th>
<apex:outputText id="RequiredwithCat" value="*" style="color:red" />
<script> if({!lst.objQues.Required__c}==false){
                                document.getElementById('{!$Component.RequiredwithCat}').style.display='none'; } </script>

<apex:outputText value="{!lst.objQues.Question_ID__r.Question_Text__c}" />



</th>
</tr>
<tr>
<td style="border-top:1px solid #fff">
<apex:outputText value="{!lst.objQues.Question_ID__r.Question_Help_Text__c}" style="color:#1483C3;"/>

</td>
</tr>
</table>

</apex:column>

<apex:column breakBefore="true" >

<table class="ansOptClass" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="AnswerOptionsCSS" width="30%" align="left" valign="top">


<apex:outputPanel rendered="{!lst.isVertical}">
<apex:outputPanel rendered="{!pageMsg!=''}">
<div class="message errorM2" style="height:17px;width:250px;">
<div style="float:left;" id="message" >{!pageMsg}</div>

</div>
</apex:outputPanel>




<apex:selectRadio id="optionsListOuter"   value="{!lst.objSurveyResDetail.Answer_Options_Set_Details_ID__c}" rendered="{!lst.isoption}"  layout="pageDirection"  
    onclick="if(proactiveMsg(this.value, 'radio') == false)
        {   
            alert(proactiveMsg(this.value, 'radio'));                               
            document.getElementById('{!$Component.textAreaForComments}').focus();
        }else
        {
            alert(proactiveMsg(this.value, 'radio'));
        }">
<apex:selectOptions value="{!lst.lstOptions}"/>
</apex:selectRadio>
</apex:outputPanel>

<apex:outputPanel rendered="{!lst.isHorizontal}">
<apex:outputPanel rendered="{!pageMsg!=''}">
<div class="message errorM2" style="height:15px;width:250px;">
<div style="float:left;" id="message" >{!pageMsg}</div>
</div>
</apex:outputPanel>
<apex:selectRadio id="optionsListOuter1"      value="{!lst.objSurveyResDetail.Answer_Options_Set_Details_ID__c}" rendered="{!lst.isoption}" layout="lineDirection" onclick="if(proactiveMsg(this.value,'radio') == false){document.getElementById('{!$Component.textAreaForComments}').focus();}">
<apex:selectOptions value="{!lst.lstOptions}"/>

</apex:selectRadio>
</apex:outputPanel>



<apex:outputPanel rendered="{!lst.isList}">
<apex:outputPanel rendered="{!pageMsg!=''}">
<div class="message errorM2" style="height:15px;width:250px;">
<div style="float:left;" id="message" >{!pageMsg}</div>

</div>
</apex:outputPanel>
<apex:selectList value="{!lst.objSurveyResDetail.Answer_Options_Set_Details_ID__c}" size="1" onchange="if(proactiveMsg(this.value, 'picklist') == false){document.getElementById('{!$Component.textAreaForComments}').focus();}; ">
<apex:selectOption itemValue="" itemLabel="Select"/>
<apex:selectOptions value="{!lst.lstOptions}"/>
</apex:selectList>
</apex:outputPanel>
<script>
                                  var count=0;
</script>
<apex:repeat value="{!lst.lstColorCode}" var="colors">
<script>
                                  changeStyle();
                                  function changeStyle()
                                  {
                                  var elementRef ;                            
                                  if({!lst.isoption}==true){
                                    if({!lst.isVertical}==true){
                                        elementRef = document.getElementById('{!$Component.optionsListOuter}'+':'+count);

                                    }else{
                                        elementRef = document.getElementById('{!$Component.optionsListOuter1}'+':'+count);
                                    }                       
                                  }
                                  var labelArray = elementRef.parentNode.getElementsByTagName('label');
                                      if(labelArray.length > 0){
                                            labelArray[0].style.color= '{!JSINHTMLENCODE(colors)}';                     
                                      }
                                      count++;
                                  }
</script>
</apex:repeat>
<div style="padding-top:16px;">
<apex:outputPanel rendered="{!lst.textDisplay}">
<apex:outputPanel rendered="{!txtPageMsg!=''}">
<div class="message errorM2" style="height:17px;width:170px;">
<div style="float:left;" id="message" >{!txtPageMsg}</div>
</div>
</apex:outputPanel>
<apex:inputTextarea id="commen" styleClass="txtarea"  value="{!lst.objSurveyResForComments.Text_Comments__c}" onblur="proactiveMsg(this.value,'text');"/>
</apex:outputPanel>
</div>
</td>
<td width="2%" >
&nbsp;
</td>
<td width="68%" align="left" valign="top">
<apex:outputPanel rendered="{!lst.objQues.Question_ID__r.Show_Comments__c}" id="proactivemsg1">

<!--
<script>
              var value = {!floor(progressBarPercentage)};      



    $("#progressbar").progressbar("option", "value", value* {!progressBarInit});//added the value*
    $("#progressbar span.text").text(value* {!progressBarInit} + "%");//added the  value *

</script>  -->
<apex:outputPanel rendered="{!pageMsg1!=''}" id="msg1">
<div class="message errorM2" style="height:17px;width:600px;">
<div style="float:left;" id="message" >{!pageMsg1}</div>
</div>
</apex:outputPanel>
<span>Please enter your comment here:</span><br/>
<apex:inputTextarea id="textAreaForComments" onblur="getCurrentComment(this.value)" styleClass="txtarea" value="{!lst.objSurveyResForComments.Comments__c}"   />
</apex:outputPanel>
</td>
</tr>
</table>
<!--  previous survey answers --commented>
<!--    
<apex:outputPanel id="previousAnswers" rendered="{!previousSurveyDetails}">
<apex:outputPanel id="previousAnswers1" rendered="{!if(Len(previousAnswerText[lst.objQues.Question_ID__c]) > 0,TRUE,False )}">
<table class="previousAnswerTextStyle" border="0" cellpadding="4" cellspacing="1" style="border:1px solid #d3dce7">
<tr>
<td   class="previousAnswerTextStyle" colspan="5" > Your response for this criteria in the previous survey was  &nbsp;  <apex:outputText value="{!previousAnswerText[lst.objQues.Question_ID__c]}" /></td>
</tr>

<apex:outputPanel id="comments" rendered="{!if(Len(previousAnswerComments[lst.objQues.Question_ID__c]) > 0,TRUE,False )}">
<tr>
<td class="previousAnswerTextStyle"><b>Comments entered :</b><apex:outputText value="{!previousAnswerComments[lst.objQues.Question_ID__c]}" /></td>
<td></td>
<td></td>
<td></td>
</tr>
</apex:outputPanel>
</table>
</apex:outputPanel>
</apex:outputPanel>

                                  -->

</apex:column>
</apex:dataTable>
<apex:inputText value="{!options}" id="mandatory" style="display:none" />
<!-- <apex:inputText value="{!progressBarInit}" id="txtprogressBar" style="display:none"  />  -->


</div>
</div>
<br/>
<div>
<div class="btnTableClass">
<apex:outputPanel id="btnOutput">
<div id="cmnbtn">
<apex:commandButton value="Save and resume later" action="{!SavePartialSurvey}" onclick="fnsetTime()" reRender="SurvPanel"></apex:commandButton>
</div>
<div id="prvnxtbtn">

<apex:commandButton value="<<Previous"
                   rendered="{!paginator.hasPrevious}" action="{!previous}" onclick="fnsetTime()">
</apex:commandButton>

<apex:commandButton value="Submit"
                   rendered="{!NOT(paginator.hasNext)}" action="{!SaveCompleteSurvey}"  reRender="SurvPanel"/>
<apex:commandButton value="Next>>" rendered="{!paginator.hasNext}"
                   action="{!next}" onclick="fnsetTime()">
</apex:commandButton>

</div>
</apex:outputPanel>
</div>
</div>
</div>
<script>
var progressBar = 0;
</script>

<!--    ********* PROGRESS BAR   ********                         -->

<apex:outputPanel id="progressBar1" >
<div class="demo">
<table  border="0" cellpadding="1" cellspacing="1" width="100%" >

<tr>

<td align="center" style="font:bold 12px Arial,tahoma,sans-serif;color:#1483C3;" width="15%">

<div><BR/>Time Taken &nbsp;
<apex:inputText size="5" id="timespent" value="{!SurveyTimer}" style="width:40px" disabled="true"/>
<apex:inputHidden id="timespent1" value="{!SurveyTimer}" />
<input type="submit" id="hiddentimerbtn" style="visibility:hidden" onclick="fnsetTime()" />
</div></td>


<td align="left">
<!--   <table border="0">
<tr>
<td style="font:bold 12px Arial,tahoma,sans-serif;margin-left:50px;color:#1483C3;"   width="300px" align="right">Completion Status &nbsp;&nbsp;</td>
<td>

<div id="progressbar" style="visibility:visible;width:500px;height:20px; " title="test" align="left">
<span class="text" ></span>




</div>

</td></tr>
</table> -->

</td>

</tr>
</table>

</div>


</apex:outputPanel>

</apex:outputPanel>

<script>
<!--       
    $(function() { 

           var value1 = {!round(progressBarPercentage*progressBarInit,0)};  

         $( "#progressbar" ).progressbar({ value:value1 });
         $("#progressbar span.text").text( value1 + "%");//added the  value *
      }); -->
</script>



<apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/>
<apex:includeScript value="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"/>
<apex:stylesheet value="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css"/>
<apex:stylesheet value="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css"/>


<script src="/soap/ajax/17.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/17.0/apex.js" type="text/javascript"></script>
<script>sforce.connection.sessionId = '{!$Api.Session_ID}'; </script>

<Script> // For timer 
    startday = new Date();
    clockStart = startday.getTime();
    window.onload=setCookie();
    var result;
    var startmin;
    var startsec;
    var starthour;
    var cnt = 0;
    //var stoptimer='false';

    function setCookie()
    {
        var query = window.location.search.substring(1);
        var vars = query.split("=");
        var PId=vars[1];

        if(document.getElementById("{!$Component.timespent1}").value == ""){ 
            document.getElementById("{!$Component.timespent1}").value = "00:00" ;
        }
        alret(PId);
        if(PId!=undefined){
            result = new String(sforce.apex.execute( "CSATcDynamicSurveyTemplate", "fetchtimer", {Id:PId} ));
        }else{
            result = document.getElementById("{!$Component.timespent1}").value;
        }

        var objtime = result.split(":");
        startmin=objtime[0];
        startsec=objtime[1];
        starthour=objtime[0] % 60;
        //alert(result);
        //if(startmin=='00' && startsec=='00' ){
        if(result=='00:00'){
            cnt = 1;
        }else{
            cnt = 0;    
        }
        window.setTimeout('getSecs()');
    }



    function initStopwatch() {
        myTime = new Date();

        var year1 = myTime.getFullYear();
        var day1 = myTime.getDate(); 
        var min1 = myTime.getMinutes(); 
        var hours1 = myTime.getHours();
        var sec1 = myTime.getSeconds(); 
        var month1 = myTime.getMonth();

        if(cnt == 0 ){
            startday1 = new Date(year1, month1 , day1 ,hours1 - starthour , min1 - (startmin - (starthour * 60) ), sec1 - startsec - 1 , 01);
            clockStart = startday1.getTime();
            cnt=1;
        }

        return((myTime.getTime() - clockStart)/1000);
    }

    function getSecs() {

        var tSecs =  Math.round(initStopwatch());
        var iSecs = tSecs % 60;
        var iMins = Math.round((tSecs-30)/60);
        var sSecs ="" + ((iSecs > 9) ? iSecs : "0" + iSecs);
        var sMins ="" + ((iMins > 9) ? iMins : "0" + iMins);

        if(sSecs!=null && sMins!=null ){ 
            document.getElementById("{!$Component.timespent}").value = sMins +":"+sSecs ;
            document.getElementById("{!$Component.timespent1}").value = sMins +":"+sSecs ;
        }else{ 
            document.getElementById("{!$Component.timespent}").value = "00:00";
            document.getElementById("{!$Component.timespent1}").value = "00:00";
        }

        //if(stoptimer== 'false'){
            window.setTimeout('getSecs()',1000);
        //}
    }

    function fnsetTime(){
document.getElementById("{!$Component.timespent1}").value = document.getElementById("{!$Component.timespent}").value;
        document.cookie = "c1" + "=" + document.getElementById("{!$Component.timespent}").value;
}
</Script>
</apex:form>
</apex:page>`

Answer 1

when i click F5 for refresh it is working good

When you hit F5 the browser sends the exact same request it sent before, so it makes sense that you are able to see the page successfully, if you were currently viewing it successfully.

But here when i select second URL and press enter then it is showing error as Survey Id is required.

When you click on a link with the URL of http://bindu-developer-edition.ap1.force.com/csat/css_se__CSATvDynamicSurveyTemplate or paste that URL in your browser and hit enter to go to that page you are making a fresh GET request. Since you don't specify the surveyId parameter it gives you the error.

See the documentation on Order of Execution for Visualforce Page Get Requests.

A get request is an initial request for a page either made when a user enters an URL or when a link or button is clicked that takes the user to a new page.

If you need to be able to go directly to the page via a link then you'll need to add the surveyId query string parameter to the link you have on the page. Take a look at the <apex:outputLink/> documentation.

<!-- you may have to change some of the values to suit your needs -->
<apex:outputLink value="css_se__CSATvDynamicSurveyTemplate">
    A question
    <apex:param name="surveyId" value="{!yourSurvey.Id}"/>
</apex:outputLink>

Answer 2

The problem is probably that the second page doesn't know the survey id or question when you use F5. You may want to add those values to the query string or store them in a more persistent manner.