Jquery Mobile - добавить вывод переменной в другой div на другой html-странице - PullRequest
Новая
       3

Jquery Mobile - добавить вывод переменной в другой div на другой html-странице

0 голосов
/ 20 мая 2011

Нуб здесь.Я пытаюсь создать небольшую программу, которая в основном просто показывает вложенный список и имеет кнопку в конце, которая должна ссылаться на другую страницу.На той другой странице должен был быть сделан вывод, прежде чем что-то добавлять.Этот список является, например, списком отелей, и в деталях одного отеля будет кнопка.Эта кнопка приводит вас на другую страницу, где адрес был добавлен ранее, чтобы иметь простой способ показать водителя такси.Я пытаюсь в течение многих дней, но как-то не могу заставить его работать.

Вот мой код в HTML: 

<div data-role="page" id="taxi" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Taxi instructions</h1>
</div>

 <div data-role="content">
 <h3>I would like to go to...</h3>
 <h1 id="taxitaxi">
 </h1>

 </div>

<div data-role="footer" data-position="fixed">
<h4>address</h4>
</div>
</div>

Эта часть должна быть в порядке.Ее теперь моя готовая к работе функция.Я читаю материал из XML, чтобы создать список.это все прекрасно работает.Затем я хотел бы использовать одну из прочитанных мной вещей (адрес) для динамического добавления в div с идентификатором #taxitaxi.Вот (очень грязный) код: 

$(document).ready(function()
{
$.ajax({
 type: "GET",
   url: "xml/hotels.xml",
    dataType: "xml",
     success: manipulateXml
  });
});

function popup() {

alert("Hello World");
}


function  manipulateXml(data){

 $(data).find("hotel").each(function() {

 var hotelname = $(this).find("name").text();
 var eaddress = $(this).find("eaddress").text();
 var caddress = $(this).find("caddress").text();
 var theme = $(this).find("theme").text();


    var output = "<li>" + hotelname;     




 output += "<ul " + theme;
 output += ">";

 output += "<br>";
 output += "<br>";
 output += "<h2>";
 output += "Address (english)";
 output += "</h2>";
 output += "<li>" + eaddress;
 output += "</li>";

 output += "<p>";
 output += "<br>";
 output += "<h2>";
 output += "Address (chinese)";
 output += "</h2>";
 output += "<li>" + caddress;
 output += "</li>";


 //show taxi driver
 output += "<a href=";
 output += "#taxi";
 output += " data-role=";
 output += "button";
 output += " data-inline=false onclick=",
 output += "popup()";
 output += ">SHOW TAXI</a>";
 output += "<br>";
 output += "<br>";
 output += "<br>";
 output += "<br>";
 output += "<br>";
 output += "<br>";
 output += "<br>";
 output += "<br>";
 output += "<script>";
 output += "$('#taxitaxi')";
 output += ".append(" +caddress;
 output += ")";
 output += "</script>";

 output += "</ul>";

 output += "</li>";

    $("#hotellist").append(output);

 $("#hotellist").listview('refresh');
 $("#hoteldata").listview('refresh');

 sortUnorderedList("hotellist");



  });
}

Я также пытался сделать это как-то с помощью функции onclick, которую я вставил, чтобы попробовать, и она показывает предупреждение.Попытка сделать это реальным, хотя и не удалась.Хотя я думаю, что функция onclick будет наиболее полезной.

Пожалуйста, помогите

большое спасибо заранее!

1 Ответ

0 голосов
/ 20 мая 2011

ОК - пара мыслей: в качестве идентификатора посмотрите jTemplates для подготовки HTML для списка

. После создания списка используйте jQuery для добавления функции onclick:

измените свой код следующим образом: 

var output = "<li class="listItem">" + hotelname;

и запустите его после создания списка: 

$('.listItem').each(function() {
   $(this).click(function() {
     popup();
   });

});

...