I am currently working on integrating two jquery plugins into my application. The goal is to have the server return text containing a form button when a user triggers an ajax event, and then have the plugins (specifically a jquery calendar) become operational when the user clicks that form button within the returned text. I believe that in order for the code to function properly, I need to include the necessary links inside the returned text rather than on the main page, but I am unsure of how to accomplish this. I have included my code below and would greatly appreciate any expert opinions or guidance. Thank you.
Code snippet from my main HTML page:
// These are the required jquery plugins which did not work when added directly to 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">
// Text returned by the server will be displayed here.
</div>
Snippet of the returned text with the form button:
<form>
<div id=returnDiv>
// Form input will be dynamically added here when the user clicks the #addMatch button...
</div>
<tr>
<td><input type="button" id="addMatch" name="addMatch" value="Add Match"/></td>
</tr>
</form>
The relevant jQuery code:
$("#addMatch").live('click', function(){
// The following code snippet will generate a calendar when the user clicks the link, however, it is unclear where exactly my two jquery plugins should be linked...
$("#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 have clearly explained my question. Any help or suggestions are appreciated! +1 to any reply...:D