-3

動的に読み込まれたtextbox.ieにJquery datepickerを追加する方法、ボタンをクリックすると、外部ページからのテキストボックスを含むポップアップが現在のページに表示されます。そのテキストボックスで、日付ピッカーを使いたいです。

外部ページの読み込みに次のajaxを使用しました

    <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>

ポップアップのフォロー

 <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>

以下はポップアップページを呼び出すためのものです//phpコーディング

<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>

?> //php コーディング

誰でもこの問題を解決するのを手伝ってくれる

4

3 に答える 3

1 
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>


</body> 
</html>

詳細については、 http: //jqueryui.com/datepicker/ のリンクをたどってください。

于 2012-12-27T07:22:21.967 に答える
0

これを試して：

$(document).on('load', 'your_datepicker_class_or_id', function(){
   $(this).datepicker();
});

you have these to referencedそして、あなたのものの上にそれを仮定しますjs：

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
于 2012-12-27T07:37:01.080 に答える
0

私は解決策を見つけ、次のようにします.Ajaxの戻り関数にdatepicker関数を追加します.

<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;


                        $("#frompop").datepicker({
                            defaultDate: "+1w",
                            changeMonth: true,
                            changeYear: true,
                            numberOfMonths: 1,

                        });
                        $('#timepickerpop').timepicker({ 'timeFormat': 'g:i A','step':15,'minTime': '8:00am','maxTime': '8:00pm'  });



                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }   
    }
    </script>
于 2012-12-28T04:24:10.703 に答える