Apex Code Development You need to sign in to do that
Don't have an account?
sailer JQuery In visual Force Page for adding the row by clicking the button
Hello Everyone,
I need to develop the Visualforce page.where i need to have button ,whenever i click the button new row should be inserted.
<apex:page standardController="Doctor__c" title="Prototype Account Edit">
<head>
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.4.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.6.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.6.custom.css')}" />
<script>
j$ = jQuery.noConflict();
// $.noConflict();
$j(document).ready(function() {
function () {
$('table').on('click', 'tr a', function (e) {
e.preventDefault();
$(this).parents('tr').remove();
});
$("#addTableRow").click(function() {
$("#mans").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
});
}
</script>
</head>
<apex:pageMessages />
<apex:form >
<apex:pageBlock mode="DoctorProfile" title="DoctorProfile">
<apex:pageBlockButtons >
<apex:commandButton action="{!cancel}" value="Cancel" />
<apex:commandButton action="{!save}" value="Save" />
</apex:pageBlockButtons>
<apex:pageBlockSection title="DoctorDetails" collapsible="false" id="mainRecord" columns="2" >
<apex:inputField value="{!Doctor__c.Name}" />
<apex:inputField value="{!Doctor__c.Specialization__c}"/>
<apex:inputField value="{!Doctor__c.Sub_Speciliast__c}"/>
</apex:pageBlockSection>
</apex:pageBlock>
<!--Licenses Details for the Doctor to Add it-->
<apex:outputPanel id="LicensesDetails">
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
<tr>
<td>LicensesNumber
<label for="11"></label>
<input type="text" name="11" id="11" />
</td>
<td>Comments
<label for="12"></label>
<input type="text" name="12" id="12" />
</td>
<td><a href="#">del</a>
</td>
</tr>
</table>
</form>
<button type="button" id="addTableRow">add row</button>
</apex:outputPanel>
</apex:form>
</apex:page>
when i have developed the code in html the jquery works ,when i added the code to the VF page its not working..
You've declared your jQuery alias to be j$ in this line:
but then you use $j or just $ further down.
Hi Bob,
I am using this zip file 'jquery-ui-1.10.3.custom' for uplaoding the static resources.
and Named the Jquery in the static resources.
And the sample code for the alert is not working.
<apex:page >
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.9.1.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.10.3.custom.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.10.3.custom.css')}"/>
<script type="text/javascript">
var j$ = jQuery.noConflict();
j$(document).ready(function(){
j$("#ninjaLink").click(function() {
alert("NINJA STAR TO FACE!!!!!");
});
});
</script>
<a id="ninjaLink" href="">NINJA ATTACK!</a>
</apex:page>
Can you please help about the scripts that have been included.
Thanks for Help
If you inspect the page using chrome, do you see any errors about the resources not being found?
Hi Bob ,
I am getting the following Error
I have package testvantage in the ORG
That smacks that the structure of the static resource isn't quite what you think it is. The fact that you have two testvantage__jQuery path elements seems a bit odd. Unfortunately I'm not familiar with that package so I don't think there's much I'm going to be able to do to help.
Hi Bob,
I have used another organtion and added the static resources with the QueryBeta, Even though i get 404 error.
Is the JS and CSS are not laoding .
<apex:page standardController="Account" id="thePage"> <apex:includeScript value="{!URLFOR($Resource.jQueryFiles, 'js/jquery-1.4.4.min.js')}" /> <script type="text/javascript"> var x1; $j = jQuery.noConflict(); $j(document).ready(function() { x1=$j('#mans').html(); }); function addRow(){ $j('#mans').append(x1); } </script> <apex:form id="theForm"> <table id="mans"> <tr> <td><apex:inputText /> </td> <td>Age </td> </tr> </table> <apex:commandButton id="myButton" value="Add Row" onclick="addRow();" reRender="thePage"/> </apex:form> </apex:page>