Jquery SelectMenu разрывается после закрытия SimpleModal - PullRequest
Новая
       16

Jquery SelectMenu разрывается после закрытия SimpleModal

1 голос
/ 25 января 2012

Когда я закрываю и снова открываю simplemodal , selectmenu больше не работает.

Кто-нибудь сталкивался с этим или знает, как это исправить? 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style>
        #simplemodal-overlay{background-color: #000;}
        #simplemodal-container { background-color:#333;border:8px solid#444;padding: 12px;color:white;}
        form { margin: 100px 0 0 0 }
        fieldset { border: 0; }
        label { display: block; }
        select { width: 200px; }
        .overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
    </style>
    <link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css"></link>
</head>
  <body>
    <div id="modal" style="display: none">
        <label>This dropdown works</label>
        <select>
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
        </select>
        <p>Now hit esc key</p>
    </div>
    <a id="link" href="javascript:OpenModal('#modal', 200, 300)">Start By Clicking Here!</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/plugins/simplemodal-login/js/jquery.simplemodal.js?ver=1.4.1'></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.button.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
    <script type="text/javascript">
        function OpenModal(selector, h, w, reposition) {
            $(selector).modal({
                onClose: function (dialog) {
                    $.modal.close();
                    $('#link').html("Click me again");
                    $('#modal label').html("This dropdown doesn't work");                    
                }
            });
        }
        $(function () {
            $('select').selectmenu();
        });
    </script>
</body>
    </html>

Ответы [ 2 ]

2 голосов
/ 03 февраля 2012

Нет необходимости изменять любой плагин. Вам просто нужно переместить привязку к обратному вызову onShow. Следующее должно сделать трюк: 

    <script type="text/javascript">
    function OpenModal(selector, h, w, reposition) {
        $(selector).modal({
            onShow: function (dialog) {
                $('select', dialog.data[0]).selectmenu();
            },
            onClose: function (dialog) {
                $.modal.close();
                $('#link').html("Click me again");
                $('#modal label').html("This dropdown doesn't work");                    
            }
        });
    }
</script>

Также может потребоваться опция persist: true. Если это не сработает, дайте мне знать.

0 голосов
/ 25 января 2012

Похоже, это вызывает плагин simplemodal dialog.

Короче говоря, когда он закрывается, он выполняет этот бит кода: 

if (s.o.persist) {
  // insert the (possibly) modified data back into the DOM
  ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
}
else {
  // remove the current and insert the original,
  // unmodified data back into the DOM
  s.d.data.hide().remove();
  ph.replaceWith(s.d.orig);
}

replaceWith удаляет исходный элемент DOMи вставляет тот, который был скопирован для создания диалога.Ваше selectmenu () привязано к исходному объекту, который теперь исчез.Таким образом, хотя CSS сохраняется (так как simpleModal клонировал оригинал), привязки событий уничтожаются.

В качестве альтернативы использованию плагина simplemodal, вы можете рассмотреть возможность использования диалога jquery-ui.Если вы действительно не хотите, чтобы отображалась строка заголовка, просто добавьте .ui-dialog-titlebar { display: none; } в ваш селектор CSS.

Вот базовый пример: http://jsfiddle.net/fordlover49/nfngy/

...