The problem is that you are including the basic.js file from my site,
which is causing a conflict. Remove that script and use the following
code:
$(document).ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e) {
e.preventDefault();
$('#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").val(ui.value);
}
});
}});
});
});
-Eric
On Sep 11, 7:54 pm, folder123 <kjau...@gmail.com> wrote:
> The behavior i'm seeing is the onShow only seems to run once. On
> subsequent modal window opens the contents in onShow don't seem to
> execute.
>
> -k
>
> On Sep 11, 7:31 pm, folder123 <kjau...@gmail.com> wrote:
>
> > I'm still having issues with the code below, the slider now doesn't
> > even show up on a 2nd window open.
>
> > Any thoughts greatly appreciated, I'm sure i'm missing something
> > simple.
>
> > -k
>
> > On Sep 11, 2:52 pm, Eric Martin <emarti...@gmail.com> wrote:
>
> > > Use the onShow callback inSimpleModalto call the slider init code:
>
> > > $('#basic-modal-content').modal({onShow: function (dialog) {
> > > $("#slider-vertical", dialog.container[0]).slider({
> > > orientation: "vertical",
> > > range: "min",
> > > min: 50,
> > > max: 300,
> > > value: 100,
> > > slide: function(event, ui) {
> > > $("#amount").val(ui.value);
> > > }
> > > });
>
> > > }});
>
> > > -Eric
>
> > > On Sep 10, 2:30 pm, folder123 <kjau...@gmail.com> wrote:
>
> > > > Summary - Slider does not work inSimpleModalwindow 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.
>
> > > > This has also been posted to theSimpleModalgoogle code group.
>
> > > > Any thoughts would be greatly appreciated, thanks for all the hard
> > > > work on jquery.
>
> > > > To replicate, please cut and paste the following into a html document.
>
> > > > <html xmlns="http://www.w3.org/1999/xhtml";>
> > > > <head>
>
> > > > <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>- Hide quoted text -
>
> > > - Show quoted text -- Hide quoted text -
>
> > - Show quoted text -
