JQuery Mobile, как динамически добавлять HTML в диалоговое окно - PullRequest
Новая
       32

JQuery Mobile, как динамически добавлять HTML в диалоговое окно

0 голосов
/ 02 июля 2011

Я хочу открыть диалоговое окно с определенной страницы и загрузить в него динамические данные.

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

Я пробовал что-то вроде этого: 

  <?php foreach($offers as $offer) : ?>
    <a href="#" data-rel="dialog" data-icon="info" data-role="button" data-desc="<?php echo $offer->{'offer_description'}; ?>" class="offer" id="offer-<?php echo $offer->{'offer_id'}; ?>"><?php echo $offer->{'offer_name'}; ?></a>
  <?php endforeach; ?>

Затем у меня есть перехватчик событий, чтобы поймать щелчок по ссылке, а затем загрузить метаданные «data-desc» в диалоговое окно, но это не работает. 

$('.offer').live('click', function(){
  var data = $(this).attr('data-desc');
  $("#data-desc").html(data);
  $("#dialog-offer").dialog("open");
  return false;
});


<div data-role="content" id="dialog-offer">
<p class="data-desc"></p>
</div>

Я искал пример того, как это сделать в jQM. Это так необходимо для jQM в целом, что я удивлен, что не могу найти никаких примеров. Может ли кто-то указать мне в правильном направлении. Спасибо за помощь.

1 Ответ

2 голосов
/ 04 июля 2011

В вашем коде есть несколько ошибок:

  1. Вы дали id="dialog-offer" <div> с data-role="content". Вы должны обернуть это div в другое div с data-role=page

  2. Вам не обязательно использовать $("#dialog-offer").dialog("open");. Просто установите <a href='#dialog-offer'>

  3. У вас неправильный селектор для вызова html(). Имя класса <p> - это то, что вы используете с селектором в стиле id

Я переписал код и разместил его здесь: http://jsfiddle.net/PBb3h/

Не совсем как у вас, но он делает то, что вы хотите.

...