When I close and reopen a simplemodal the selectmenu no longer works.
Anyone had any experiences with this or know how to fix it?
<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>
There is no need to modify either plugin. You just need to move the binding to the onShow callback. The following should do the trick:
<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>
The option persist: true might also be required. If that does not work, let me know.