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

Question

The scenario is that I have a TV listings html page, which contains a table of TV program titles, populated by XML data. 场景是我有一个电视列表html页面，其中包含一个由XML数据填充的电视节目标题表。 I want the user to be able to click on the program title and to be given a description of the title, which also comes from the same XML file. 我希望用户能够单击程序标题并获得标题的描述，该标题也来自同一XML文件。

I previously tried using .dialog but I could not get this to work. 我以前尝试使用.dialog但无法正常工作。 I am now opening a separate, smaller window which gives the title for one program and one program only. 我现在打开一个单独的较小的窗口，该窗口仅给出一个程序和一个程序的标题。 This is not what I want, I would like all titles to link to their own descriptions. 这不是我想要的，我希望所有标题都链接到他们自己的描述。

This is the JavaScript code that works for one program, (which I would rather have in jQuery ): 这是适用于一个程序的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);

I think I have to use .when and .then to use multiple XML files but I am unsure of how to implement this. 我想我必须使用.when和.then来使用多个XML文件，但是我不确定如何实现这一点。

Below is my HTML for the small description window: 以下是用于小说明窗口的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>

The desired output is a description for every program on the channel lists (each XML file is one channel). 期望的输出是通道列表上每个程序的描述（每个XML文件是一个通道）。 Any help would be much appreciated. 任何帮助将非常感激。 用户单击标题后，此JavaScript和HTML代码的输出图像。

EDIT 编辑

I have now been able to implement the .dialog feature for an unordred list although I cannot implement is in my actual html page. 尽管我无法在实际的html页面中实现，但现在我可以为不规则列表实现.dialog功能。 I am creating a HTML table from XML then trying to implement the .dialog feature this is the jQuery I have for the table: 我正在从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 );
            });

This is the jquery for the dialog: 这是对话框的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');

    });

    });

If anyone could help as the only thing that shows is the dialog pointer not the actual dialog box, that would be great! 如果任何人可以帮助显示的唯一内容是对话框指针而不是实际的对话框，那就太好了！

Answer 1

You can still use .dialog . 您仍然可以使用.dialog 。 I would approach like this: 我将这样处理：

Load and parse XML document (to whom we keep a reference) and append objects to document 加载和解析XML文档（我们为其提供参考）并将对象附加到文档
Attach 'onclick' listener for appended objects, so that we can later query the XML doc for required data 为附加的对象附加“ onclick”侦听器，以便以后可以在XML文档中查询所需的数据
Construct jQuery dialog for showing queried data from the XML doc 构造jQuery对话框以显示来自XML文档的查询数据

Something like http://pastebin.com/gYzdpSen for HTML and http://pastebin.com/JRd5mdNT for XML data. 像http://pastebin.com/gYzdpSen HTML和http://pastebin.com/JRd5mdNT XML数据。

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

问题描述

1 个解决方案

解决方案1
0 2014-12-17 20:40:49

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

问题描述

1 个解决方案

解决方案1 0 2014-12-17 20:40:49

解决方案1
0 2014-12-17 20:40:49