0

I am calling a action function from javascript and the page is getting refreshed and my controller is not getting called. Please let me how to call the controller here. I want to reRender the outputLabel after the call happened to controller.

Code:

<apex:page showHeader="false" sidebar="false" controller="WebOrderController" id="webForm" docType="html-5.0">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>


      <script type="text/javascript">

      $(document).ready(function()
      {
          $('.serviceDate').datepicker({format: 'mm/dd/yyyy',startDate: '0d'});
      });

       $(document).ready(function()
          {
              $('.email2Class').bind("cut copy paste",function(e) 
              {
                  e.preventDefault();
              });
          });


      $(document).ready(function()
      {
          $('.mandatory').blur(function()
          {
              var input= $(this);
              var group = input.parents('.input-group');
              var input_val = input.val();
              if(input_val)
              {
                  group.removeClass('invalid_input').addClass('valid_input');
                  group.next().hide(); 
              }
              else
              {
                  group.removeClass('valid_input').addClass('invalid_input');
                  group.next().show();
              }
          });


          $('.email1Class').blur(function()
          {
              var input= $(this);
              var group = input.parents('.input-group');
              var input_val = input.val();
              if(input_val=="")
              {
                  group.removeClass('valid_input').addClass('invalid_input');
                  group.next().show();
                  group.next().next().hide();
              }
              else
              {
                  var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

                  if(filter.test(input_val))
                  {
                      group.removeClass('invalid_input').addClass('valid_input');
                      group.next().hide();
                      group.next().next().hide();
                  }
                  else
                  {
                      group.removeClass('valid_input').addClass('invalid_input');
                      group.next().hide();
                      group.next().next().show(); 
                  }
              }
           });


          $('.email2Class').blur(function()
          { 
              var input= $(this);
              var input_email=$('.email1Class').val();
              var group = input.parents('.input-group');
              var input_val = input.val();
              if(input_val=="")
              {
                  group.removeClass('valid_input').addClass('invalid_input');
                  group.next().show();
                  group.next().next().hide();
                  group.next().next().next().hide();
              }
              else
              {
                  var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

                  if(filter.test(input_val))
                  {
                          if(input_email==input_val)
                          {
                              group.removeClass('invalid_input').addClass('valid_input');
                              group.next().hide();
                              group.next().next().hide();
                              group.next().next().next().hide();
                          }
                          else
                          {
                              group.removeClass('valid_input').addClass('invalid_input');
                              group.next().hide();
                              group.next().next().hide();
                              group.next().next().next().show();                          
                          } 
                  } 
                  else
                  {
                      group.removeClass('valid_input').addClass('invalid_input');
                      group.next().hide();
                      group.next().next().show(); 
                      group.next().next().next().hide();
                  }
              }
           });                             


          $('.btn').on('click',function()
          {

              var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

              var fname=$('.fnameClass');
              var group = fname.parents('.input-group');
              var input_Fname=fname.val();

              var lname=$('.lnameClass');
              var group1=lname.parents('.input-group');
              var input_Lname=lname.val();

              var email1=$('.email1Class');
              var group2=email1.parents('.input-group');
              var input_email1=email1.val();

              var email2=$('.email2Class');
              var group3=email2.parents('.input-group');
              var input_Email2=email2.val();

              var mobile=$('.mobileClass');
              var group4=mobile.parents('.input-group');
              var input_Mobile=mobile.val();

              var serviceDate=$('.serviceDate');
              var group5=serviceDate.parents('.input-group');
              var input_serviceDate=serviceDate.val();


              var airlines=$('.airlinesClass');
              var group6=airlines.parents('.input-group');
              var input_airlines=airlines.val();

              var flightNum=$('.flightNumClass');
              var group7=flightNum.parents('.input-group');
              var input_flightNum=flightNum.val();

              var meeting=$('.meetingClass');
              var group8=meeting.parent('.input-group');
              var input_meeting=meeting.val();      

              var flagValue=1;
              var fnameFlag=1;
              var lnameFlag=1;
              var email1Flag=1;
              var email2Flag=1;
              var mobFlag=1;
              var serviceDateFlag=1;
              var airlineName=1;
              var airlineNum=1;
              var meetFlag=1; 
              //positive 1 and neg 0

              if( !$('.termsAndCondit').prop('checked'))
              {
                   $('.termsAndCondit').removeClass('valid_input').addClass('invalid_input');
                   $('.termsAndCondit').next().next().show(); 
                   flagValue=0;               
              }
              else
              {
                  $('.termsAndCondit').removeClass('invalid_input').addClass('valid_input');
                  $('.termsAndCondit').next().next().hide();
              }
              if(input_Fname=="")
              {
                  group.removeClass('valid_input').addClass('invalid_input');
                  group.next().show();
                  fnameFlag=0;
              }
              else
              {
                  group.removeClass('invalid_input').addClass('valid_input');
                  group.next().hide();                   
              }
              if(input_Lname=="")
              {
                  group1.removeClass('valid_input').addClass('invalid_input');
                  group1.next().show();   
                  lnameFlag=0;
              }
              else
              {
                  group1.removeClass('invalid_input').addClass('valid_input');
                  group1.next().hide();                      
              }

              if(input_email1=="")
              {
                  group2.removeClass('valid_input').addClass('invalid_input');
                  group2.next().show();
                  group2.next().next().hide();
                  email1Flag=0;
              }
              else
              {
                  if(filter.test(input_email1))
                  {
                      group2.removeClass('invalid_input').addClass('valid_input');
                      group2.next().hide();
                      group2.next().next().hide();
                  }
                  else
                  {
                      group2.removeClass('valid_input').addClass('invalid_input');
                      group2.next().hide();
                      group2.next().next().show(); 
                      email1Flag=0;
                  }
              }

              if(input_Email2=="")
              {
                  group3.removeClass('valid_input').addClass('invalid_input');
                  group3.next().show();
                  group3.next().next().hide();
                  group3.next().next().next().hide();
                  email2Flag=0;
              }
              else
              {
                  if(filter.test(input_Email2))
                  {
                          if(input_email1==input_Email2)
                          {
                              group3.removeClass('invalid_input').addClass('valid_input');
                              group3.next().hide();
                              group3.next().next().hide();
                              group3.next().next().next().hide();
                          }
                          else
                          {
                              group3.removeClass('valid_input').addClass('invalid_input');
                              group3.next().hide();
                              group3.next().next().hide();
                              group3.next().next().next().show();                          
                              email2Flag=0;
                          }        
                  } 
                  else
                  {
                      group3.removeClass('valid_input').addClass('invalid_input');
                      group3.next().hide();
                      group3.next().next().show(); 
                      group3.next().next().next().hide();
                      email2Flag=0;
                  }
              }  
              if(input_Mobile=="")
              {
                  group4.removeClass('valid_input').addClass('invalid_input');
                  group4.next().show();     
                  mobFlag=0;
              }
              else
              {
                  group4.removeClass('invalid_input').addClass('valid_input');
                  group4.next().hide();

              }
              if(input_serviceDate=="")
              {
                  group5.removeClass('valid_input').addClass('invalid_input');
                  group5.next().show();    
                  serviceDateFlag=0;
              }
              else
              {
                  group5.removeClass('invalid_input').addClass('valid_input');
                  group5.next().hide();
              }
              if(input_airlines=="")
              {
                  group6.removeClass('valid_input').addClass('invalid_input');
                  group6.next().show();      
                  airlineName=0;
              }
              else
              {
                  group6.removeClass('invalid_input').addClass('valid_input');
                  group6.next().hide();                    
              }
              if(input_flightNum=="")
              {
                  group7.removeClass('valid_input').addClass('invalid_input');
                  group7.next().show();      
                  airlineNum=0;

              }
              else
              {
                  group7.removeClass('invalid_input').addClass('valid_input');
                  group7.next().hide();
              }
              if(input_meeting=="")
              {
                  group8.removeClass('valid_input').addClass('invalid_input');
                  group8.next().show();   
                  meetFlag=0;
              }
              else
              {
                  group8.removeClass('invalid_input').addClass('valid_input');
                  group8.next().hide();
              }
              if(flagValue==0|| fnameFlag==0|| lnameFlag==0|| email1Flag==0||email2Flag==0||mobFlag==0||serviceDateFlag==0||airlineName==0||airlineNum==0||meetFlag==0)
              {

                  return false;
              }
              else
              {
                  callFunction();          
              }             
          });
          function callFunction()
          {
              //alert('Hi')
              CallNextPage();
          } 
    });


    </script>

    <style>
      .header { text-align: center; margin: 15px 0; }
      .labelTextAlign{text-align:right;}
      #emailDiv { margin-bottom: 15px; }
      #emailWrapper, #mobileWrapper{ min-height: 85px; }
      @media (max-width: 992px){
      #mobileWrapper{ min-height: 61px; }
      .baggage { min-height:34px;}
      }

        .valid_input
        {

        }
        .invalid_input
        {
            border:solid 1px red !important;
            box-shadow: 0 0 5px 0 #c23934;
            border-radius: 5px;

        }

        .display-hidden
        {
            display:none;
        }

    </style>
  </head>
  <apex:form id="webOrderForm" styleClass="container">



    <body style="background-color:white; width:auto; height:auto;">
      <div class="img-responsive center-block" style="text-align:center; padding:15px 0px 25px 0;">
        <apex:image value="{!$Resource.Test_Logo}" style="width:300px;" />
      </div>
      <form class="form-horizontal" data-toggle="validator">
        <div class="row" style="background-color:#65CBC9; padding:10px 0 10px;">
          <div class="col-lg-offset-1 header" style="display: block; align-content: center; word-wrap: break-word; padding: 20px 20px;">
            <h4> Test Heading </h4>
          </div>
          <!-- first Name Block-->
          <apex:outputpanel id="formPanel1">
          <div class="container row">
          <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="fname">First Name: </label>
            <div class="col-md-8 ">
            <div class="input-group text-danger"> 
              <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
              <apex:input type="text" styleClass="form-control mandatory fnameClass" value="{!firstName}" id="fname" html-placeholder="Enter First Name" />
            </div>
            <div class="text-danger display-hidden">First Name field is required</div>
            </div>
          </div>

          <!-- Last Name Block -->
          <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="lname">Last Name:</label>
            <div class="col-md-8 ">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
              <apex:input type="text" styleClass="form-control mandatory lnameClass" id="lname" html-placeholder="Enter Last Name" value="{!lName}" />   
            </div>
            <div class="text-danger display-hidden">Last Name field is required</div>
            </div>
          </div>
          </div>

          <!-- Email and Confirm Email block -->
          <div class="container row">
          <div class="form-group col-md-6 " id="emailWrapper">
            <label class="control-label col-md-4  labelTextAlign" for="email">Email:</label>
            <!--<span class="input-group-addon col-md-2"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>-->
            <div class="col-md-8 " id="emailDiv">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
                  <apex:input type="email" styleClass="form-control email1Class" value="{!email}" html-placeholder="Enter Email" id="email"/>
                </div>
                <div class="text-danger display-hidden">The Email field is required</div>
                <div class="text-danger display-hidden">The Email entered is invalid</div>
            </div>
            <label class="control-label col-md-4  labelTextAlign" for="confirmEmail">Confirm Email:</label>
            <div class="col-md-8 ">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
                    <apex:input type="email" styleClass="form-control email2Class" id="confirmEmail" html-placeholder="Confirm Email" value="{!confirmEmail}"/>
                </div>
                <div class="text-danger display-hidden">The Email field is required</div>
                <div class="text-danger display-hidden">The Email entered is invalid</div>
                <div class="text-danger display-hidden">The Email entered doesn't match with the entered email</div>
            </div>
          </div>

          <!-- Mobile block -->
          <div class="form-group col-md-6 " id="mobileWrapper">
            <label class="control-label col-md-4  labelTextAlign" for="mobile">Mobile:</label>
            <div class="col-md-8 ">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></span>
                    <apex:input type="text" styleClass="form-control mandatory mobileClass" id="mobile" html-placeholder="Enter Mobile Number" value="{!mobileNumber}"/>
                </div>
                <div class="text-danger display-hidden">The Mobile field is required</div>
            </div>            
          </div>

         </div>
          <!-- Service Type block-->

          <div class="container row">
          <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="serviceType">Service Type:</label>
            <div class="col-md-8 ">
            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-briefcase"></span></span>
              <apex:selectList styleClass="form-control" id="serviceType">
                  <apex:selectOption itemValue="Baggage Porter"></apex:selectOption>
              </apex:selectList>
            </div>
            </div>
          </div>

          <!-- service Date block -->
          <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="pwd">Service Date:</label>
            <div class="col-md-8 ">
              <div class="input-group searchbar">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <apex:input type="text" styleClass="form-control mandatory serviceDate" id="datepicker" html-placeholder="MM/DD/YYYY" value="{!serviceDate}"/>
              </div>
              <div class="text-danger display-hidden">The Service Date field is required</div>
            </div>
          </div>
          </div>

          <!-- service time block -->
          <div class="container row">
          <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="ServiceType">Service Time:</label>
            <div class="col-md-4">
              <label class="control-label" for="hours">Hours:</label>
              <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-time" aria-hidden="true"></i></span>
                  <apex:selectList value="{!serviceTimeHoursselected}" styleClass="form-control col-md-2 col-sm-6" id="serviceTypeHours" size="1">
                      <apex:selectOptions value="{!serviceTimeHours}"></apex:selectOptions>
                  </apex:selectList>
              </div>
            </div>
            <div class="col-md-4 ">
            <label class="control-label" for="minutes">Minutes:</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-time" aria-hidden="true"></i></span>
              <apex:selectList value="{!serviceTimeMinutesSelected}" styleClass="form-control col-md-2 col-sm-6" id="serviceTypeMin" size="1">
                  <apex:selectOptions value="{!serviceMinutes}"></apex:selectOptions>
              </apex:selectList>
            </div>
            </div>
          </div>

          <!-- Airline block -->
          <div class="form-group col-md-6 " id="mobileWrapper">
            <label class="control-label col-md-4  labelTextAlign" for="airline">Airline:</label>
            <div class="col-md-8 ">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-plane" aria-hidden="true"></i></span>
              <apex:input type="text" styleClass="form-control mandatory airlinesClass" id="airline" html-placeholder="Enter Airline Name" value="{!airlineName}"/>
            </div>
             <div class="text-danger display-hidden">The Airline field is required</div>
            </div>
          </div>
          </div>

          <!-- Fligh Details block -->
          <div class="container row">
          <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="flightNumber">Flight Number:</label>
            <div class="col-md-8 ">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-plane" aria-hidden="true"></i></span>
              <apex:input type="text" styleClass="form-control mandatory flightNumClass" id="flighNumber" html-placeholder="Enter Flight Number" value="{!flightNumber}"/>
            </div>
            <div class="text-danger display-hidden">The Flight Number field is required</div>
            </div>
          </div>


           <!-- Number of bags block -->
           <div class="form-group col-md-6" style="min-height:34px;">
            <label class="control-label col-md-4 labelTextAlign" for="numnberOfBags">No of Bags:</label>
            <div class="col-md-8 ">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-briefcase" aria-hidden="true"></i></span>
                <apex:selectList value="{!baggagePorterSelected}" styleClass="form-control" id="baggagePoerter" size="1">
                  <apex:selectOptions value="{!BaggagePorterList}"></apex:selectOptions>
              </apex:selectList>
            </div>
            </div>
          </div>
          </div>

          <!-- Meeting Location block -->
           <div class="container row" >
           <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="meetingLocation">Meeting Location:</label>
            <div class="col-md-8 ">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
              <apex:input type="text" styleClass="form-control mandatory meetingClass" id="meetingLocation" html-placeholder="Enter Meeting Location" value="{!meetingLocation}" />
            </div>
            <div class="text-danger display-hidden">The Meeting Location field is required</div>
            </div>
          </div>

          <!-- Special Instruction -->
          <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="spclInst">Special Instruction:</label>
            <div class="col-md-8 ">
              <apex:inputTextarea value="{!specialInstruction}" styleClass="form-control" style="resize:none;" id="specialInst"/>
            </div>
          </div>
          </div>
          <div class="header">
              <apex:inputCheckbox value="{!TermsAndCondition}" styleClass="termsAndCondit"/> I have read the <a href="#">Terms and Conditions</a>
              <div class="text-danger display-hidden">Please accept the Terms and Conditions</div>
          </div>


          <div class="header">
           <apex:actionFunction name="CallNextPage" action="{!changePageMethod}" reRender="formPanel1" />
              <apex:commandButton value="Next" id="next" styleClass="btn" />
          </div>
        </apex:outputpanel>
        </div>

      </form>
    </body>
  </apex:form>
</apex:page>
5
  • 2
    Can you edit this question down a bit? Maybe just one of the input sections, the button at the end, and a call to your CallFunction(...)? Commented Aug 8, 2016 at 20:04
  • You need to set the "onclick" attribute on the commandButton to call your actionFunction, i.e., onclick="CallNextPage()". I'm assuming you have a controller method already called changePageMethod
    – willard
    Commented Aug 8, 2016 at 20:57
  • 2
    Pro tip -- when faced with a large VF page that is not doing what you want, create a smaller page that is stripped to the barest of essentials to hone in on the issue. This is well covered at ssce.org
    – cropredy
    Commented Aug 8, 2016 at 22:10
  • @cropredy dead link? Commented Aug 9, 2016 at 1:05
  • Sorry, mistyped link - sscce; also referenced in How to Ask
    – cropredy
    Commented Aug 9, 2016 at 1:32

1 Answer 1

0

Can you try replacing this:

$('.btn').on('click',function()

To creating it as a new function and then calling directly in the commandbutton "onclick" like this:

function newFunction(){
    ....
}

<apex:commandButton value="Next" id="next" onclick="newFunction();" />

Hope this helps

1
  • The code which I wrote is similar to that right? So why isn't it working. I have placed return false at end of the page still it is refreshing. Commented Aug 9, 2016 at 5:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .