1

I have trouble to active the datepicker() in a dynamically created jQuery UI dialog():

index.html 

$(document).ready(function() {

    var $loading = $('<img src="./images/loading.gif" alt="loading">');

    $('.page-popup').each(function() {

        var $dialog = $('<div></div>')
                .append($loading.clone());
        var $link = $(this).one('click', function() {
                $dialog
                        .load($link.attr('href'))
                        .dialog({
                                title: $link.attr('title'),
                                width: 600,
                                height: 300
                        });

                $link.click(function() {                
                        $dialog.dialog('open');

                        return false;
                });

                return false;
        });

    });

    $( ".datepicker" ).datepicker({         
            dateFormat: "yy-mm-dd"      
    });

});

The external page which gets loaded by a link like that:

<a href="input.html" title="Input" class="page-popup">Input</a>

it has just a form to select or correct the date:

input.html 

<form method="post" action="?">
    <input type="text" name="date" value="2000-01-01" class="datepicker">
    <input type="submit">
</form>

How can I activate the datepicker for the different dialogs?

Improve this question
2
  • Instantiate the datepicker on the success of the load() call.
    – j08691
    Commented May 31, 2015 at 22:58
  • Thx, basically that would work too, but my mistake was that I reload jquery and jquery-ui on the subpage... That blocked the somehow the datepicker().
    – wittich
    Commented Jun 1, 2015 at 20:43

2 Answers 2

Reset to default
0

Render the datepicker in the open event of the dialog as follows.

                   $dialog
                    .load($link.attr('href'))
                    .dialog({
                            title: $link.attr('title'),
                            width: 600,
                            height: 300,
                            open: function(){
                             $( ".datepicker" ).datepicker({         
                                     dateFormat: "yy-mm-dd"      
                                  });
                             }
                    });
Improve this answer
1
  • Actually I tried that before and that wasn't the problem. The problem was, that the subpage also loaded the jquery.js and jquery-ui.js somehow that blocked the datepicker.
    – wittich
    Commented Jun 1, 2015 at 20:30
0

The problem was that the subpage can not reload jquery.js and jquery-ui.js. So here my solution:

index.html 

<html>
    <head>
    <script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {              
        var $loading = $('<img src="./images/loading.gif" alt="loading">');        
        $('.page-popup').each(function() {                    
            var $dialog = $('<div></div>').append($loading.clone());
            var $link = $(this).one('click', function() {
                    $dialog
                            .load($link.attr('href'))
                            .dialog({
                                    title: $link.attr('title'),
                                    width: 600,
                                    height: 300
                            });        
                    $link.click(function() {                
                            $dialog.dialog('open');        
                            return false;
                    });        
                    return false;
            });                
        });            
        $( ".datepicker" ).datepicker({         
                dateFormat: "yy-mm-dd"      
        });            
    });
    </script>
  </head>
<body>

   <a href="input.html" title="Input" class="page-popup">Input</a>

</body>
</html>

input.html 

<html>
    <head>
    <!-- Don't load jquery and jquery-ui again!!! -->
    <script type="text/javascript">
       $( ".datepicker" ).datepicker({            
            dateFormat: "yy-mm-dd"      
       });
    </script>
</head>
<body>

    <form method="post" action="?">
        <input type="text" name="date" value="2000-01-01" class="datepicker">
        <input type="submit">
    </form>

</body>
</html>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.