+ Start a Discussion
sailersailer 

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..

bob_buzzardbob_buzzard

You've declared your jQuery alias to be j$ in this line:

 

j$ = jQuery.noConflict();

 

but then you use $j or just $ further down.  

sailersailer

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

bob_buzzardbob_buzzard

If you inspect the page using chrome, do you see any errors about the resources not being found?

bob_buzzardbob_buzzard

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.

sailersailer

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 .

 

 

Failed to load resource: the server responded with a status of 404 (Not Found) https://c.cs14.visual.force.com/resource/1386757033000/jQueryBeta/js/jquery-ui-1.10.3.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) https://c.cs14.visual.force.com/resource/1386757033000/jQueryBeta/css/ui-lightness/jquery-ui-1.10.3.custom.css
  1. Uncaught ReferenceError: jQuery is not defined
Failed to load resource: the server responded with a status of 404 (Not Found) https://c.cs14.visual.force.com/resource/1385100394000/JQuery/js/jquery-1.4.2.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) https://c.cs14.visual.force.com/resource/1385100394000/JQuery/js/jquery-ui-1.8.6.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) https://c.cs14.visual.force.com/resource/1385100394000/JQuery/css/ui-lightness/jquery-ui-1.8.6.custom.css
Uncaught ReferenceError: jQuery is not defined jquery1?core.apexpages.devmode
Suneel#8Suneel#8
Can you check below sample code.It might help
<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>