Диалогов прозорец на JQuery и проблем с div

Така че имам div "passage-content" и когато се щракне върху бутон, текстът на този div се поставя в диалогов прозорец на jquery. Съдържанието на div се променя постоянно, тъй като страницата е динамична. Когато се натисне бутон, съдържанието на div "passage-content" се променя.
Ето моят HTML:

<div id="passage-section">
 <!-- Title -->
 <div id="passage-title"></div>

 <!-- The panel that will display the content -->
 <div id="passage-content">THIS IS A DIV</div>

 <!-- Button that when clicked activates a dialog box for the passage. -->
 <button id="max-passage" class="max"></button>
</div>

Текстът на "passage-content" е това, което се опитвам да хвана и да вмъкна в диалогов прозорец.

Срещам два проблема.
1) Нищо не се появява в div на страницата, но когато щракна върху бутона на диалоговия прозорец, текстът се появява само в диалоговия прозорец.
Ето кода

  //Opens a dialog box when the button max-passage is clicked
  $('#passage-content').dialog({
   autoOpen: false,
   title: 'Passage'
  });
 $('#max-passage').click(function() {
   $('#passage-content').dialog('open');
  return false;
 });

2) Ако променя кода си малко, текстът се появява в div, но след това бутонът на диалоговия прозорец на JQuery не работи. Ето кода

  //Opens a dialog box when the button max-passage is clicked
 $('#passage').dialog({
   autoOpen: false,
   title: 'Passage'
 });
 $('#max-passage').click(function() {
   $('#passage').dialog('open');
   return false;
 });

Мисля, че проблемът ми е в начина, по който извиквам #passage/passage-content, но не мога да го разбера. Благодаря ви много за всяка помощ!


javascript html jquery jquery-ui
person RYDiiN    schedule 15.07.2015    source източник
comment
Кой браузър използвате?   -  person danleyb2    schedule 15.07.2015

Отговори (2)


arrow_upward
0
arrow_downward

Трябва да използвате div, различен от passage-content, за да използвате за диалоговия прозорец:

<div id="passage-section">
 <!-- Title -->
 <div id="passage-title"></div>
  <br/>
 <!-- The panel that will display the content -->
 <div id="passage-content">THIS IS A DIV</div>
  <br/>

  <div id="passage-dialog"></div>
 <!-- Button that when clicked activates a dialog box for the passage. -->
 <button id="max-passage" class="max" onclick="return false;"></button>

  <script>
    //Opens a dialog box when the button max-passage is clicked

    $('#max-passage').click(function() {

      $('#passage-dialog')
        .html($('#passage-content').html())
        .dialog({ title: 'passage' });
    });
    </script>
</div>
person HashPsi    schedule 15.07.2015

arrow_upward
0
arrow_downward

Доколкото разбирам, искате div#passage-content да се вижда на страницата и също да бъде в диалоговия прозорец.

Създайте div в движение, направете го диалогов компонент и задайте съдържанието на #passage-content на диалоговия прозорец

Нещо като това

var $dialog = $('<div></div>').dialog({
    autoOpen: false,
    title: 'Passage'
});
$('#max-passage').click(function () {
    $dialog
        .html($('#passage-content').html())
        .dialog('open');
});

Ето демонстрация http://jsfiddle.net/dhirajbodicherla/db5SX/5434/

person Dhiraj    schedule 15.07.2015