Add jquery link to returned text...

Question

Hi all I am trying to add two jquery plugins files to my application. When a user triggers my ajax event, the server will return text with a form button. The plugins (a jquery calendar) will work when the user clicks the form button inside the returned text . I believe I have to add the link inside the return text instead of the main page to let the code work, but not sure how to do this. I am giving out my code and need you experts' opinions. Thanks.

My main page html

//required jquery plugins ...didn't work if I add them in the main application.

 <script type="text/javascript" src="JS/date.js"></script>
 <script type="text/javascript" src="JS/datePicker.js"></script>
 <script type="text/javascript" src="JS/selectWeek.js"></script>

<div id="gameInfo"> 

//return text will be displayed here.

</div>

My returned text ...part of it....

<form>
<div id=returnDiv>

// the form input will be added here when a user clicks #addMatch button...

</div>

<tr> 
<td><input type="button" id="addMatch" name="addMatch" value="Add Match"/> </td>
</tr>
</form>                     

My jquery

$("#addMatch").live('click', function(){

//the code below will create a calendar when a user click the link...I am not sure //where I should add my two jquery plugins link...
   $("#returnDiv").html("<td><input type='text' size='6' class='date-pick dp-applied'"+ "name='date'><a style='color:white;' class='dp-choose-date' title='Choose Date'"+ "href='#'>Date</a></td>";     

    return false;
});

I hope I explained my question well. +1 to any reply...:D

Answer 1

Jerry use the Jquery UI datepicker. It is well documentent and easy to use.

Answer 2

Sounds like you have a div getting populated by Ajax with an input that will fire a calendar? You could setup the calendar plugin on the Ajax callback. .live works for events, but more is requires for setting up the datepickers. If you make your inputs a particular class ( like 'datepicker' ) in your Ajax call back you could do: $('.datepicker').datepicker(); - eh?