Hi i have following code where every thing is working fine... but when i try to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> this library it is blocking all tabclicking and command button click functionlities...
<apex:page standardController="case" extensions="RUnclaimedTicket" sidebar="false" tabStyle="case" recordSetVar="search" >
<head>
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/js/jquery.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/js/advancedtable_v2.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/jQuery/css/advancedtable.css')}" />
</head>
<! ----------when i add this jquery functionality all below tabs and command buttons stopped working --- >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>
function checkedfield(nm, txt,field){
if(document.getElementById(nm) != null){
if(document.getElementById(nm).disabled == true){
document.getElementById(nm).disabled = false;
var check = $("input[id$=Checked_Item]").val();
$("input[id$=Checked_Item]").val(field + check);
check = $("input[id$=Checked_Item]").val();
}else{
document.getElementById(nm).disabled = true;
var check = $("input[id$=Checked_Item]").val();
if(check.indexOf(field) != -1)
check = check.replace(field,'');
$("input[id$=Checked_Item]").val(check);
}
}
if(document.getElementById(txt) != null){
if(document.getElementById(txt).disabled == true){
document.getElementById(txt).disabled = false;
var check = $("input[id$=Checked_Item]").val();
$("input[id$=Checked_Item]").val(field + check);
check = $("input[id$=Checked_Item]").val();
}else{
document.getElementById(txt).disabled = true;
var check = $("input[id$=Checked_Item]").val();
if(check.indexOf(field) != -1)
check = check.replace(field,'');
$("input[id$=Checked_Item]").val(check);
}
}
return true;
}
</script>
<!----when i remove this above section everyting is working fine------------------->
<!---But i need above functionality for further extension of my page functionality which will come here.
<apex:form >
<apex:outputPanel rendered="{!updateselected}">
<apex:pageMessages />
<apex:inputHidden id="Checked_Item" value="{!Checked_Item}"/>
<apex:pageBlock title="Bulk Change" mode="edit">
<apex:pageBlockButtons location="both">
<apex:commandButton value="Save" action="{!save}"/>
<apex:commandButton value="Cancel" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection id="mus1" columns="1">
<apex:pageblocktable columns="3" value="{!$ObjectType.case.FieldSets.Assignto}" var="f">
<apex:column headerValue="Update ">
<input type="checkbox" id="dis_{!f}" onclick="checkedfield('{!$Component.ipField}', '{!$Component.txtField}','{!f.fieldpath}')" />
</apex:column>
<apex:column headerValue="Fields">
<apex:outputLabel value="{!f.Label}" />
</apex:column>
<apex:column headerValue="Value">
<apex:inputField value="{!SMTPnew[f]}" id="ipField" styleclass="ipField{!f}" rendered="{!IF(f.Type != 'string', true, false)}" required="false"/>
<script>
document.getElementById('{!$Component.ipField}').disabled = true;
</script>
<apex:inputText value="{!SMTPnew[f]}" id="txtField" styleclass="txtField{!f}" rendered="{!IF(f.Type == 'string', true, false)}"/> <!--- disabled="true" --->
<script>
document.getElementById('{!$Component.txtField}').disabled = true;
</script>
</apex:column>
</apex:pageblocktable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:outputpanel>
</apex:form>
..--->
<apex:form >
<apex:pageMessages ></apex:pageMessages>
<apex:outputPanel id="SearchOverridePanelId">
<apex:pageBlock title="Unclaimed Ticket">
<style>
.activeTab {background-color: #B0E2FF; color:black;font-size:17px;
background-image:none}
.inactiveTab { background-color: lightgrey; color:black;font-size:17px;
background-image:none}
.background { background-color: lightgrey; font-size:12px; color:black}
</style>
<apex:tabPanel id="theTabPanel" selectedTab="ONE1" tabclass="activeTab" inactivetabclass="inactiveTab" contentStyle="font-size: .01px;">
<apex:tab label="Unclaimed Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/UnclaimedTicketPage');" name="One1" id="One1" >
</apex:tab>
<apex:tab label="Claimed Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/R_ClaimedTicketPage');" name="OpenActivities2" id="tabOpenAct2" >
</apex:tab>
</apex:tabPanel>
<BR/>
</apex:pageBlock>
</apex:outputPanel>
<apex:pageBlock >
/*
.
.
. i will display data in a table here.
.
.. /*
</apex:pageBlock>
</apex:form>
<script>
function testclick() {
$('input[id$=search_val]').val('');
}
$(document).ready(function() {
});
</script>
<script type="text/javascript" language="javascript">
if(jQuery) {
jQuery.noConflict();
}
var $jq = jQuery.noConflict();
function testrun() {
cler();
}
$jq(document).ready(function() {
$jq('[id$=claim_id]').click(function() {
//$jq('window').location.reload(true);
//
});
});
</script>
</apex:page>
can some one help me with reason for this.... when i remove above library and that block of code every thing is working fine but i cannot achieve further functionalities...
jQuery.noConflict();immediately after you include the jQuery script file so the$reference is restored to the value that existed before the script was included. But I didn't look at your page in detail so there may also be other problems. – Keith C May 23 '15 at 11:15