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>
CallFunction(...)?onclick="CallNextPage()". I'm assuming you have a controller method already calledchangePageMethod