Jquery datepicker cloning issue

Question

The problem is here i can't add datepick(); functionality to newly created items.

Everythig works fine except that.

The first elements which named as date1 and datep1 are has datepick and works so good.

I got the plugin there: http://keith-wood.name/datepick.html What is wrong?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="../../../includes/my_app/js/datepick/humanity.datepick.css" /> 
        <script type="text/javascript" src="../../../includes/my_app/js/datepick/jquery.datepick.js"></script>
        <script type="text/javascript" src="../../../includes/my_app/js/datepick/jquery.datepick-tr.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="../../../includes/my_app/js/datepick/ui-ui-lightness.datepick.css" /> 
        <script>
            $(function() {
                $('#date1').datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                });
            });
            $(function() {
                $('#datep1').datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                });
            });
        </script>
    </head>

    <body>
        <form name="stad_alt" id="myForm">
            <h1></h1>

            <div id="first">
                Please Select:
                <select name="myoption">
        <option value="1">First Option</option> 
                </select><br /><br /></div>
            <div id="container">
                <div id="input1" style="margin-bottom:4px;" class="alternate">
                    Name 1: <input type="text" name="the_name1" id="name1" class="textbox" />
                    From :<input type="text" id="date1" name="from1" class="textbox" />
                    To :<input type="text" id="datep1" name="to1" class="textbox" />
                        Photo: <input type="file" id="photo1" name="photo1" class="textbox" />
                </div>

            </div>

            <div>
                <input type="button" id="add" value="Add New" />
                <input type="button" id="delete" value="Delete This" />
            </div>
        </form>

        <script type="text/javascript">
            $(function(){
                var num = 1; //default 1 
                if (num == 1)
                    $('#delete').prop('disabled','disabled');
                $('#add').live('click',function(e) {
                    e.preventDefault();
                    num = num+1;
                    $('#delete').prop('disabled','');
                    $('#date' + num).datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                    });
                    $('#datep' + num).datepick({
                    dateFormat: 'yyyy-mm-dd',
                    yearRange: '1800:2053'
                    });                    
                    var html = '<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">Name '+num+': <input type="text" name="the_name'+num+'" id="name'+num+'" class="textbox" /> From :<input type="text" id="date'+num+'" name="from'+num+'" class="textbox" /> To :<input type="text" id="datep'+num+'" name="to'+num+'" class="textbox" /> Photo: <input type="file" id="photo'+num+'" name="photo'+num+'" class="textbox" /></div>';

                    $('#container').append('<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">'+html+'</div>');
                    if (num == 10)
                        $('#add').prop('disabled','disabled');
                });

                $('#delete').click(function() {

                    $('#input' + num).remove();
                    num = num -1;
                    if (num == 1)
                        $('#delete').prop('disabled','disabled');
                    $('#add').prop('disabled','');
                });
            });
        </script>

    </body>
</html>

add console.log(num) in the function you pass to live(). I suspect this is a scope issue and num is being reset each time so will always equal 1 (and you already have the elements #date1 and #datep1 so the date picker will simply be re-attached to those). — Clive
– Clive, Commented Nov 2, 2011 at 19:02
Try moving num into the global scope (put it immediately after <script type="text/javascript">, before $(function(){) — Clive
– Clive, Commented Nov 2, 2011 at 19:28
Move var num = 1; to before $(function(){, at the moment it's after it. — Clive
– Clive, Commented Nov 2, 2011 at 19:45
<script type="text/javascript"> var num = 1; $(function(){ ... still no error no working... — dr.linux
– dr.linux, Commented Nov 2, 2011 at 20:07

Chris Baker · Accepted Answer · 2011-11-02 21:26:44Z

1

You've got a lot of structural problems there, making the document a mess; this makes troubleshooting more difficult.

First things first, get rid of those numerous $(function() { blocks - condense your javascript into one block, at the bottom of the page. CSS in the head, javascript includes at the very end of the body, followed by page script.

Your immediate problem is called because when you do this:

$('#date' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});
$('#datep' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});

var html = '<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">Name '+num+': <input type="text" name="the_name'+num+'" id="name'+num+'" class="textbox" /> From :<input type="text" id="date'+num+'" name="from'+num+'" class="textbox" /> To :<input type="text" id="datep'+num+'" name="to'+num+'" class="textbox" /> Photo: <input type="file" id="photo'+num+'" name="photo'+num+'" class="textbox" /></div>';

... putting aside the messy long HTML string (use DOM objects to add content to the page), the problem here is that you are calling the datepick method on an element that does not yet exist on the page. The big line of HTML creation should go BEFORE you try to interact with it. Thus:

var html = '<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">Name '+num+': <input type="text" name="the_name'+num+'" id="name'+num+'" class="textbox" /> From :<input type="text" id="date'+num+'" name="from'+num+'" class="textbox" /> To :<input type="text" id="datep'+num+'" name="to'+num+'" class="textbox" /> Photo: <input type="file" id="photo'+num+'" name="photo'+num+'" class="textbox" /></div>';
$('#container').append('<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">'+html+'</div>');

$('#date' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});
$('#datep' + num).datepick({
    dateFormat: 'yyyy-mm-dd',
    yearRange: '1800:2053'
});

Now some homework:

document.createElement - Use this instead of big messy HTML strings

Script position - The article is related to performance, but being organized will help YOUR performance as a developer

Divitis - You've got DIVs coming out the wazoo and this is a pretty short page. Take better advantage of CSS

Avoid inline styles - You've got stylesheets attached... use em!

Use Jquery's document.ready - those $(function() { things... yuck!

edited Nov 2, 2011 at 21:26

answered Nov 2, 2011 at 20:55

Chris Baker

50.8k13 gold badges99 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dr.linux Over a year ago

but nothing changed when i change position of html variable... I think thereis a problem with plug-in... pastebin.com/b9HC8sCR

Chris Baker Over a year ago

Make sure you also moved this line above the datepicker attachment: $('#container').append('<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">'+html+'</div>');... in my original post, I neglected to put that in there, edited to fix.

Collectives™ on Stack Overflow

Jquery datepicker cloning issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related