Apex Code Development You need to sign in to do that
Don't have an account?
devForce007 Rerender Issue
Hello Guys,
I have a requirement in which one tab having all account name by click on the accont name.next tab will automatically display all the Related contact name.My problem is in next tab is not rendering so contact name is not display.
My Vf page is
<apex:page controller="JqueryTab">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16380505-1");
pageTracker._trackPageview();
}
catch (err) {
}
</script>
<script>
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange(); });
</script>
<script>
function getAccId(AccId)
{
alert(AccId);
getRelateCon(AccId);
}
function getconId(ConId)
{
alert(ConId);
}
</script>
<style>
body
{
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
.wrapper
{
width: 960px;
margin: 0px auto;
padding-top: 20px;
min-height: 600px;
}
.wrapper h1, .wrapper h4, .wrapper p, .wrapper pre, .wrapper ul, .wrapper li
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
.wrapper li
{
outline: 0;
text-decoration: none;
-webkit-transition-property: background color;
-moz-transition-property: background color;
-o-transition-property: background color;
-ms-transition-property: background color;
transition-property: background color;
-webkit-transition-duration: 0.12s;
-moz-transition-duration: 0.12s;
-o-transition-duration: 0.12s;
-ms-transition-duration: 0.12s;
transition-duration: 0.12s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#v-nav
{
height: 100%;
margin: auto;
color: #333;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#v-nav >ul
{
float: left;
width: 210px;
display: block;
position: relative;
top: 0;
border: 1px solid #DDD;
border-right-width: 0;
margin: auto 0 !important;
padding:0;
border: 1px solid #ECECEC;
}
#v-nav > div.tab-content {
background-color: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0 0 35px 5px #FAFBFD inset;
display: none;
margin-left: 210px;
min-height: 400px;
padding: 25px;
position: relative;
z-index: 9;
}
#v-nav >ul >li
{
width: 180px;
list-style-type: none;
display: block;
text-shadow: 0px 1px 1px #F2F1F0;
font-size: 1.11em;
position: relative;
border-right-width: 0;
border-bottom: 1px solid #DDD;
margin: auto;
padding: 10px 15px !important;
background: whiteSmoke; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* W3C */
}
#v-nav >ul >li.current
{
color: black;
border-right: none;
z-index: 10;
background: white !important;
position: relative;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
}
#v-nav >ul >li.first.current
</style>
<!-- -->
<apex:form style="background-color: #f7f7f7" id="formId">
<apex:actionFunction action="{!getRelatedContact}" name="getRelateCon" rerender="">
<apex:param name="AccId" assignTo="{!strAccId}" value="AccId" />
</apex:actionFunction>
<div class="wrapper" id="mainDiv">
<h1 class="title">Relations</h1>
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Accounts</li>
<li tab="tab2">Related Contact</li>
<li tab="tab3">Related Opportunity</li>
<li tab="tab4" class="last">Realted Custom Object</li>
</ul>
<div class="tab-content" id="divCon">
<table>
<apex:repeat value="{!lstAccount}" var="row">
<tr>
<td>
<h4>
<u>
<apex:outputPanel id="thePanel" onclick="getAccId('{!row.Id}')">
<u><apex:outputText value="{!row.Name}" style="cursor:pointer;"/></u>
</apex:outputPanel>
</u>
</h4>
</td>
</tr>
</apex:repeat>
</table>
</div>
<div class="tab-content" id="div2Id">
<table id="tableId">
<apex:repeat value="{!lstContact}" var="con">
<tr>
<td>
<h4>
<u>
<apex:outputPanel id="thePanel1" onclick="getconId('{!con.Id}')">
<u><apex:outputText value="{!con.Name}" style="cursor:pointer;"/></u>
</apex:outputPanel>
</u>
</h4>
</td>
</tr>
</apex:repeat>
</table>
</div>
<div class="tab-content">
</div>
<div class="tab-content">
</div>
</div>
</div>
</apex:form>
</apex:page>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
and My controller is :-
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
and My controller is :-
public with sharing class JqueryTab
{
public list<Account> lstAccount {get; set;}
public list<Contact> lstContact {get; set;}
public Contact objContact {get; set;}
public Opportunity objOpportunity {get; set;}
public String strAccId {get; set;}
public boolean bRenderThePanel {get; set;}
public JqueryTab()
{
lstAccount = new List<Account>([Select Id,Name from Account]);
bRenderThePanel=false;
//lstContact = new List<Contact>([Select Id,Name from Contact]);
}
public void getRelatedContact()
{
system.debug('+++++++++++++++++++++++++++++'+strAccId);
lstContact = new List<Contact>([Select Id,Name from Contact where AccountId =:strAccId]);
system.debug('+++++++++++++++++++++++++++++'+lstContact);
bRenderThePanel=true;
}
}