function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
intern24intern24 

help with jquery in my visualforce page

i have been trying to get datepicker to work with my visualforce page. I set it up but i can not get the calendar to pop up. 

Here is my code:

 

 

<apex:page controller="testController">
<link type="text/css" href="{!URLFOR($Resource.css)}" rel="stylesheet" />
<script type="text/javascript" src="{!URLFOR($Resource.Jquery)}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.core)}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.Datepicker)}"></script>
 
<input id="datepicker" type="textbox" />
<script type="text/javascript">
    $(function() {
        $(“#datepicker”).datepicker();
    });
    </script>
 
<apex:form >
 <apex:inputText value="{!inputValue}" id="datepicker"/><br/>
 <apex:commandButton action="{!testAction}" value="testButton"/>
 </apex:form>
</apex:page>

 

 

Thanks for any help you can give.

dke01dke01

View the HTML source of your website, I think that you will find your textbox with an ID="datepicker"  does not really have a HTML ID ="datepicker"   Visual force like to mess with your HTML and add its own junk into it.

 

I would recommend using CSS class="datepicket" instead of an ID.  Then use jQuery     $(“.datepicker”).datepicker(); 

 

But if you want to use ID you can do a search in the forum on how to get IDs  the syntax is something like 

{!$Component.itemName}

so your code would be

  $(“{!$Component.datePicket”).datepicker();

 

 

 
intern24intern24

sorry, I do not understand.
dke01dke01

 

<apex:page controller="testController">
<link type="text/css" href="{!URLFOR($Resource.css)}" rel="stylesheet" />
<script type="text/javascript" src="{!URLFOR($Resource.Jquery)}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.core)}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.Datepicker)}"></script>
 
<input id="datepicker" type="textbox" />
<script type="text/javascript">
    $(function() {
        $(“.datepicker”).datepicker();
    });
    </script>
 
<apex:form >
 <apex:inputText value="{!inputValue}" styleClass="datepicker"/><br/>
 <apex:commandButton action="{!testAction}" value="testButton"/>
 </apex:form>
</apex:page>

 

Try this

 
intern24intern24

It is still not working. Nothing happens when you click on the textbox
intern24intern24

Could it be my static resources? I keep looking looking at the jquery website to see if i have the correct stuff and I do.
dke01dke01

do some small steps see if you can do some simple jQuery commands like

 

alert( $('#datepicker').val() );

 

could be jQuery is not loaded,  use firebug addin to firefox and run JavaScript commands using the console to test/debug

 
incuGuSincuGuS

Remember to include all Jquery initializing scripts in

$(document).ready(function(){

// Here , so they are executed when the page finishes loading, and all dom elements exist. if you try to get a dom element that hasnt been loaded the script will not work.

});

 

 
intern24intern24

I thought maybe it was the $ operator so i did this:

 

 

<apex:page >
    <apex:includeScript value="{!URLFOR($Resource.Jquery_Zip, 'js/jquery-1.4.2.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery_Zip, 'js/jquery-ui-1.8.1.custom.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Jquery_Zip, 'css/ui-lightness/jquery-ui-1.8.1.custom.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery_Zip, 'development-bundle/ui/jquery.ui.core.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Jquery_Zip, 'development-bundle/ui/jquery.ui.datepicker.js')}"/>       
 
<input id="datepicker1" type="textbox" />
<script type="text/javascript">
 var j$ = jQuery.noConflict();
 
    j$(document).ready(function(){
        j$(“#datepicker1”).datepicker();
    });
    </script>
    
<input id="datepicker2" type="textbox" />
<script type="text/javascript">
 var j$ = jQuery.noConflict();
 
    j$(document).ready(function(){
        j$(“#datepicker2”).datepicker();
    });
    </script>
 
</apex:page>

 

Still no change. 

 
AidenAiden

An alternative is to use the VisualForce date picker, e.g

<apex:inputField value="{!ActiveItinerary.myMaster.Date__c}"></apex:inputField>
Thys MichelsThys Michels

Your Visualforce page will look like this:

 

<head>
<apex:includeScript value="{!URLFOR($Resource.JQuery1_8, '/js/jquery-1.8.0.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.JQuery1_8, '/js/jquery-ui-1.8.23.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.JQuery1_8, '/css/ui-lightness/jquery-ui-1.8.23.custom.css')}" />
<script>

$(function() {
$('[id$=datepicker]').datepicker({dateFormat: 'yy-mm-dd'})
});
</script>

 

And your apex:inputText will look like this:

<apex:inputText value="{!FromDate}" id="datepicker"/>

 

Make sure that the id specified in your apex:inputText is the same as the [id$=] specified in your JQuery expression