Проблема с всплывающим диалоговым окном jquery для мобильных устройств, когда диалоговая ссылка генерируется динамически - PullRequest
Новая
       8

Проблема с всплывающим диалоговым окном jquery для мобильных устройств, когда диалоговая ссылка генерируется динамически

1 голос
/ 19 августа 2011

Я использую JQuery Mobile и динамически настраиваю ссылку в диалоговом окне.После того, как пользователь щелкнет ссылку, диалоговое окно откроется на отдельной странице, а НЕ во всплывающем окне.У меня есть рабочий код ниже.Может кто-нибудь сказать, пожалуйста, что я делаю не так?

Заранее спасибо,

Vish

Вот ссылка на этот образец на jsfiddle http://jsfiddle.net/vishr/ekLWd/

Когда пользователь нажимает на Добавить элемент, я динамическиизмените текст на «Удалить элемент», и когда пользователь нажимает кнопку «Удалить элемент», я открываю диалоговое окно, которое в этом случае открывается на отдельной странице, а не всплывающее диалоговое окно 

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">    </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">

(function(){
$(document).ready(function() {
    $("#del-item").live('click', function(){  
    $.mobile.changePage($('#del-dialog'), 'pop');
    });    
    $("#add-item").live('click', function(){  
        $('#add-item .ui-btn-text').text('Remove Item');
        $('.item').attr('id', 'del-item');
        $('.item').attr('href', '#del-dialog');
        $('.item').attr('data-rel', 'dialog');
    });    
    $("#close-dialog").click(function(){      
        $('.ui-dialog').dialog('close');
    });
 });
})();
</script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">
      <div id="dialog-container" data-inline="true">
        <a href="#" class="item" id="add-item" data-role="button" data-inline="true">Add Item</a>  
      </div>   
</div><!-- /content -->

<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
  <div data-role="dialog" role="dialog" id="del-dialog">
  <div data-role="content">
           <div style="text-align:center;"><strong>Remove Item?</strong></div>
            <form id="myForm">
                <div data-role="fieldcontain">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a href="#" id="close-dialog" data-theme="a" data-rel="back" data-role="button">Cancel</a></div>
                        <div class="ui-block-b"><a href="#" id="close-dialog" data-theme="a" type="submit" data-role="button">OK</a></div>

                    </fieldset>
                </div>
            </form>
        </div>
  </div>

 </body>
 </html>

1 Ответ

0 голосов
/ 21 марта 2012

Если вы хотите, чтобы диалоговое окно открывалось на той же странице, вам следует использовать плагин SimpleDialog, доступный для jquery mobile.

Ниже приведен код, который я настроил с помощью плагина SimpleDialog, чтобы диалоговое окно отображалось вта же страница 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript">

 (function(){
     $(document).ready(function() {
         $("#del-item").live('click', function(){  
         //$.mobile.changePage($('#del-dialog'), 'pop');

                     $(this).simpledialog({

                        'prompt' : 'What do you say?',
                        'cleanOnClose': true,
                        'buttons' : {
                            'OK': {
                                click: function () {
                                    $('#simplestringout').text($('#simplestring').attr('data-string'));
                                }
                            },
                            'Cancel': {
                                click: function () { console.log(this); },
                                icon: "delete",
                                theme: "c"
                            }
                        }
                    })
            });    
         $("#add-item").live('click', function(){  
             $('#add-item .ui-btn-text').text('Remove Item');
             $('.item').attr('id', 'del-item');
             $('.item').attr('href', '#del-dialog');
             $('.item').attr('data-rel', 'dialog');
         });    
         $("#close-dialog").click(function(){      
             $('.ui-dialog').dialog('close');
         });
      });
     })();
 </script>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
      <div id="dialog-container" data-inline="true">
        <a href="#" class="item" id="add-item" data-role="button" data-inline="true">Add Item</a>  
      </div>   
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
 </body>
 </html>
...