Question

我上一期问题的延伸，getDate with Jquery Datepicker，

我正在尝试使用jquery datepicker从xml文件加载特定信息，具体取决于用户选择的日期。类似的代码，但我试图加载和解析一个xml文件来读取特定日期的文件内容。

在一个完美的世界中，用户可以点击日期，而在datepicker html输出下面会为用户提供所选日期的特定时间，而不是我上一个图像项目。

我的问题是什么都没有加载，所以我的问题是我做错了什么？

我的代码如下

<!DOCTYPE html>

    <link type="text/css" href="css/ui-darkness/jquery-ui-1.8.custom.css" rel="stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // Datepicker
            $('#datepicker').datepicker({
                dateFormat: 'yy-mm-dd',
                inline: true,
                minDate: new Date(2010, 1 - 1, 1),
                maxDate:new Date(2010, 12 - 1, 31),
                altField: '#datepicker_value',
                onSelect: function(){
                    var day1 = $("#datepicker").datepicker('getDate').getDate();                 
                    var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
                    var year1 = $("#datepicker").datepicker('getDate').getFullYear();
                    var fullDate = year1 + "" + month1 + "" + day1;
                    //var str_output ="<img src=\"http://website/images/a" + fullDate +".png\" width=\"100%\"/>";
                    //"<h1>"+fullDate+"</h1>";
                    //"<img src=\"http://website/images/a" + fullDate +".png\"/>";
                    //$('#page_output').html(str_output);
                        var doc = loadXMLDoc('date.xml'); // loading the XML file
                        var el = doc.getElementsByTagName('_'+date); // retrieving the elements corrsponding to a date, eg: _20100103
                        var page_output = document.getElementById('page_output');   

                        if(el.length >= 1)
                        {
                            // matched XML data found for the specified date    
                            var dt = el[0].getElementsByTagName('date');
                            var great_times = el[0].getElementsByTagName('great_times');
                            var good_times = el[0].getElementsByTagName('good_times');      
                            var str_output = "<h1><center>" + dt[0].childNodes[0].nodeValue + "</center></h1><br/><br>";
                            str_output += "<b>Excellent Times:</b><br> " + great_times[0].childNodes[0].nodeValue + "<br/><br>";
                            str_output += "<b>Good Times:</b><br> " + good_times[0].childNodes[0].nodeValue + "<br/><br>";
                            $('#page_output').html(str_output);// writing the results to the div element (page_out)
                        }
                        else
                        {
                            alert("Sorry","Action not allowed on this page");
                            page_output.innerHTML = ''; // No XML data found for the selected date
                            reloadmainwDate();      
                            return false;
                        }   
                        return true;    
                }
            });             
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); }, 
                function() { $(this).removeClass('ui-state-hover'); }
            );          
        });
        //var img_date = .datepicker('getDate');
            //var day1 = $("#datepicker").datepicker('getDate').getDate();               
            //var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;               
            //var year1 = $("#datepicker").datepicker('getDate').getFullYear();
            //var fullDate = year1 + "-" + month1 + "-" + day1;
            //var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
            //var str_output = "<h1><center><p>"+ date + "</p></center></h1>";
            //$('#page_output')[0].innerHTML = str_output;



    // writing the results to the div element (page_out)
    </script>
    <script>

function loadXMLDoc（dname） { var xmlDoc;

// IE 5 and IE 6
if(typeof ActiveXObject != 'undefined') 
{   
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.load(dname);
    return xmlDoc;
}
else if (window.XMLHttpRequest) // firefox
{
    xmlDoc=new window.XMLHttpRequest();
    xmlDoc.open("GET",dname,false);
    xmlDoc.send("");
    return xmlDoc.responseXML;
}
alert("Error loading document");
return null;

}

    <!-- Datepicker -->

    <div id="datepicker"></div>

    <!-- Highlight / Error -->

    <div id="page_output"></div>


</body>

Answer 1

不久前纠正了我的代码，如果有人遇到类似的问题，我会回答我自己的问题。

<!DOCTYPE html>

    <link type="text/css" href="css/ui-darkness/jquery-ui-1.8.custom.css" rel="stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // Datepicker
            $('#datepicker').datepicker({
                dateFormat: 'yy-mm-dd',
                inline: true,
                minDate: new Date(2010, 1 - 1, 1),
                maxDate:new Date(2010, 12 - 1, 31),
                altField: '#datepicker_value',
                onSelect: function(){
                    var day1 = $("#datepicker").datepicker('getDate').getDate();                 
                    var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
                    var year1 = $("#datepicker").datepicker('getDate').getFullYear();
                    // code added  
                    // this is to convert the month '3' to '03'
                    month1 = addZero(month1, 2);
                    day1 = addZero(day1, 2);
                    var fullDate = year1 + month1 + day1;

                    parseXML(fullDate);//move function outside of this function
                    //var str_output ="<img src=\"http://69.*.*.*/images/a" + fullDate +".png\" width=\"100%\"/>";
                    //"<h1>"+fullDate+"</h1>";
                    //"<img src=\"http://69.*.*.*/images/a" + fullDate +".png\"/>";
                    //$('#page_output').html(str_output);

                }
            });             
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); }, 
                function() { $(this).removeClass('ui-state-hover'); }
            );          
        });
        //var img_date = .datepicker('getDate');
            //var day1 = $("#datepicker").datepicker('getDate').getDate();               
            //var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;               
            //var year1 = $("#datepicker").datepicker('getDate').getFullYear();
            //var fullDate = year1 + month1 + day1;
            //var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
            //var str_output = "<h1><center><p>"+ date + "</p></center></h1>";
            //$('#page_output')[0].innerHTML = str_output;



    // writing the results to the div element (page_out)
    </script>
    <script>

带有XML文件的Jquery Datepicker

1 个答案: