Click here to Skip to main content
13,048,788 members (66,185 online)
Rate this:
Please Sign up or sign in to vote.
See more:

How to add Jquery for datepicker in dynamically data loaded textbox.i.e., When i am click a button , the popup containing textboxes from external page will shows in the present page. in that textbox i need to use datepicker.

<script type="text/javascript">
function manageapp(id,apcno)
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            req=new XMLHttpRequest();
        {// code for IE6, IE5
            req=new ActiveXObject("Microsoft.XMLHTTP");
        var strURL="manage_ajx.php?id="+id+"&acpno="+apcno;
        if (req) 
            req.onreadystatechange = function() {
            if (req.readyState == 4) {
             // only if "OK"
                if (req.status == 200) 
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
  "GET", strURL, true);

For Popup Panel Code : 

<script type="text/javascript">
//New Pop up
$(document).ready(function() {
    $('.login-window').click(function() {
        // Getting the variable's value from a link 
        var loginBox = $(this).attr('href');
        //Fade in the Popup and add close button
        //Set the center alignment padding + border
        var popMargTop = ($(loginBox).height() + 24) / 2; 
        var popMargLeft = ($(loginBox).width() + 24) / 2; 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        return false;
    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() { 
      $('#mask , .login-popup').fadeOut(300 , function() {
    return false;

Fowolling PHP Code :

<a class="login-window" href="#inline"  title="Business Details" onclick="javascript:manageapp('<?php echo $patientlist[$i]['ap_id']; ?>','<?php echo $patientlist[$i]['apc'];?>')">
<img src="images/calendar-icon.png" title="manage appointment"/>
Posted 27-Dec-12 2:17am
Updated 27-Dec-12 5:56am
Sheikh Muhammad Haris 27-Dec-12 16:03pm
Might be multiple jQuery files reference exists on your page

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

You will have to use .live ([^]) method to bind events / actions to elements that could added dynamically. Refer to this fiddle:[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170713.1 | Last Updated 28 Dec 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100