search

Thomas89 / simplemodal

Automatically exported from code.google.com/p/simplemodal
0 stars 0 forks source link

SimpleModal does not work with JQuery-ui slider #26

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
SimpleModal or SimpleModal Contact Form (SMCF)?

SimpleModal

Version of SimpleModal of SMCF (indicate Demo or WordPress plugin)?

1.3

Version of jQuery?

1.3.2, jquery-ui 1.7.2

Browser/OS you are experiencing the problem with?

IE, Firefox (all versions)

If applicable, please provide a code snippet or link to a website
demonstrating the problem.

Cut and paste into a html document

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>UCLA Digital Collections</title>
 <link type="text/css" 
href="http://jqueryui.com/latest/themes/base/ui.all.css" 
rel="stylesheet" />
    <script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
type="text/javascript"></script>
    <script 
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" 
type="text/javascript"></script>
    <script 
src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js' 
type='text/javascript'></script>
    <script src='http://www.ericmmartin.com/simplemodal/js/basic.js' 
type='text/javascript'></script>

    <link type='text/css' 
href='http://www.ericmmartin.com/simplemodal/css/basic.css' 
rel='stylesheet' media='screen' />

<script type="text/javascript">
$().ready(function() {

    $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) 
{
        e.preventDefault();
        $('#basic-modal-content').modal();
    });

    $(function() {
        $("#slider-vertical").slider({
                                orientation: "vertical",
                range: "min",
                min: 50,
                max: 300,
                value: 100,
                slide: function(event, ui) {
                                    $("#amount").val(ui.value);
                                }
        });
    });

});

</script>
</head>

<body>

  <div id="basic-modal-content">
  <input type="text" id="amount" style="border:0; color:#ffffff; font-
weight:bold; width: 40px; background: #aaaaaa;" />
  <div id="slider-vertical" style="height:200px;"></div>
  </div>

  <div id='basic-modal'>
    <h2>Basic Modal Dialog</h2>
        <form action='download/' method='post'>
            <input type='button' name='basic' value='Show modal' 
class='basic demo'/>
        </form>
  </div>
</body>
</html>

If applicable, please list the other code/libraries/plugins you are trying
to integrate with.

Summary - Slider does not work in SimpleModal window after more than once.

Detail:

Step 1: Click to open modal window
Step 2: Observe slider working properly, with value being updated, close 
modal
Step 3: Click to open modal window
Step 4: Observe slider NOT working properly, NaN being returned

If you open the modal with the slider, then close the window, then re-open 
the modal and attempt to move the slider NaN errors occur. Attached is a 
simple html document that demonstrates the problem.

Thanks for all your hard work on SimpleModal, it's greatly appreciated!

Original issue reported on code.google.com by kjau...@gmail.com on 3 Sep 2009 at 10:29

Attachments:

GoogleCodeExporter commented 8 years ago 
Your test file doesn't seem to be working for me, however, I suggest moving the 
slider init code into the onShow callback. For example:

Something like:
$('#basic-modal-content').modal({onShow: function (d) {
    $("#slider-vertical", d.container[0]).slider({
        orientation: "vertical",
        range: "min",
        min: 50,
        max: 300,
        value: 100,
        slide: function(event, ui) {
            $("#amount", d.container[0]).val(ui.value);
        }
    });
}});

Original comment by emartin24 on 5 Mar 2010 at 10:42