Question

场景是我有一个电视节目单html页面，其中包含一个由XML数据填充的电视节目标题表。我希望用户能够单击程序标题并获得标题的描述，该标题也来自同一XML文件。

我之前尝试使用.dialog，但我无法使用此功能。我现在打开一个单独的小窗口，它只给出一个程序和一个程序的标题。这不是我想要的，我希望所有标题都链接到他们自己的描述。

这是适用于一个程序的JavaScript代码（我更愿意在jQuery中使用）：

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
//the next 4 lines retrieves the elements title, description and times of the programme from the sky one xml file
title=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
desc=xmlDoc.getElementsByTagName("desc")[0].childNodes[0].nodeValue;
start=xmlDoc.getElementsByTagName("start")[0].childNodes[0].nodeValue;
end=xmlDoc.getElementsByTagName("end")[0].childNodes[0].nodeValue;
//formatting with HTML for the output
document.write("<h1>"+title+"</h1>"+"<br><p>Programmme description:</p>"+desc+"<br>"+"<p>Start time:</p>"+start+"-"+end);

我认为我必须使用.when和.then来使用多个XML文件，但我不确定如何实现它。

以下是我的小描述窗口的HTML：

<html>
<head>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

</head>
<body>
  <div>
</div>
</body>
<script src="js/descriptionGET.js"></script>
</html>

所需的输出是通道列表上每个程序的描述（每个XML文件是一个通道）。任何帮助将非常感激。 Image of the Output for this JavaScript and HTML code once the user has clicked on a title.

修改

我现在已经能够为无标题列表实现.dialog功能，尽管我无法在我的实际html页面中实现。我正在从XML创建一个HTML表，然后尝试实现.dialog功能，这是我对表的jQuery：

//sky one
            sky1p.each(function(k, v) {
                tr.clone().html( td.clone().html( $(this).find('start').text() ) )
                .append( td.clone().html('<div data-xml-id="' + k + '">' + '<div id="tvlistingssky1">' + $(v).find('title').text() + '</div> </div>') )
                .data( 'time', $(this).find('start').text() )
                .appendTo( tbody );
            });

这是对话框的jquery：

 var xml;

    $(document).ready(function() {

      // init dialog
      $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        show: "blind",
        hide: "blind",
        open: function() {
              $('.ui-widget-overlay').on('click', function() {
                  $('#dialog').dialog('close');
              });
          }
      });

      // load xml doc and append parsed plant names to html document
    $.ajax({
      type: "GET",
      url: "https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",
      dataType: "xml"
    }).done($('#tvlistingssky1').on('click', 'div', function() { // show dialog on click

    })

      var programme = $(this),
        progId = programme.data('xmlId'),
        title = xml.find('programme').eq(progId).find('title').text(),
        description = xml.find('programme').eq(progId).find('desc').text();

      $('#dialog').html('<h1>' + title + '</h1> <br />' + "Description: '" + programme.text() + "' is " + description)
            .dialog('open');

    });

    });

如果有人可以提供帮助，因为唯一显示的是对话框指针而不是实际的对话框，那就太棒了！

Answer 1

您仍然可以使用.dialog。我会这样做：

加载并解析XML文档（我们保留引用的对象）并将对象附加到文档
附上＆＃39; onclick＆＃39;附加对象的监听器，以便我们以后可以在XML文档中查询所需的数据
构建jQuery对话框，用于显示XML文档中的查询数据

类似于HTML的http://pastebin.com/gYzdpSen和XML数据的http://pastebin.com/JRd5mdNT。

从多个xml文件中检索特定信息并输出到html页面

1 个答案: