Click here to Skip to main content
15,895,799 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi
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.

JavaScript
<script type="text/javascript">
function manageapp(id,apcno)
    {
        /*alert(id);
        alert(apcno);*/
        //alert(dd);
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            req=new XMLHttpRequest();
        }
        else
        {// 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) 
                {
                    document.getElementById('show_details').innerHTML=req.responseText;
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }   
    }


 </script>

For Popup Panel Code : 


<script type="text/javascript">
//New Pop up
$(document).ready(function() {
    $('#inline').hide();
    $('.login-window').click(function() {

            $('#inline').addClass("login-popup");
            $('#inline').css({'visibility':'visible'});

        // Getting the variable's value from a link 
        var loginBox = $(this).attr('href');

        //Fade in the Popup and add close button
        $('#inline').fadeIn(300);

        //Set the center alignment padding + border
        var popMargTop = ($(loginBox).height() + 24) / 2; 
        var popMargLeft = ($(loginBox).width() + 24) / 2; 

        $('#loginBox').css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        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() {
        $('#mask').remove();  
    }); 
    return false;
    });
});
</script>


Fowolling PHP Code :

XML
<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"/>

</a>
Posted
Updated 27-Dec-12 5:56am
v2
Comments
[no name] 27-Dec-12 16:03pm    
Might be multiple jQuery files reference exists on your page

1 solution

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

http://jsfiddle.net/H3e6W/[^]
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900