SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically added fields not working with calendar field

    I am trying to attach a calendar field to a dynamically added html code. Initially, the code shows 3 input fields (as shown in the "p_scents" div). When the "Add Another Employer" is clicked, it should generate another 3 inputs( as the ones above). It is working fine for me to generate the first 2 fields (without the calendar field), but when I add the calendar field, it is not working.

    <h2><a href="#" id="addScnt">Add Another Employer</a></h2>
    <div id="p_scents">
    <p>
    <label>Employer Name</label><input class="dynamic" type="text" name="employern" id="employern" />
    <label>Job Title</label><input class="dynamic" type="text" name="jtitle" id="jtitle" />
    <label>Start Date </label>
    <input type="text" name="startd" class="textfield" />
    <script language="JavaScript">
    new tcal ({
    // form name
    'formname': 'form',
    // input name
    'controlname': 'startd'
    });
    </script>
    </p>
    </div>

    <script type="text/javascript">
    $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
    if( i <= 10 ) {
    $('<p><label>Employer Name</label><input class="dynamic" type="text" name="employern' + i +'" id="employern" /><label>Job Title</label><input class="dynamic" type="text" name="jtitle' + i +'" id="jtitle" /><label>Start Date </label>
    <input type="text" name="startd' + i +'" class="textfield" />
    <script language="JavaScript">
    new tcal ({'formname': 'form','controlname': 'startd' + i +''});</script><a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;}
    else{
    alert('Maximum Reached!');
    }
    });

    $('#remScnt').live('click', function() {
    if( i > 2 ) {
    $(this).parents('p').remove();
    i--;
    }
    return false;
    });
    });
    </script>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the variable I appears to be only valid in the $(function(){ context. You'd need to move it outside, just below the <script> tag.

    That said... I think you could do this a lot better.

    Code javascript:
    $(function()
                {
                    // unless your adding the addScnt button using javascript
                    // you shouldn't need to use the live event. Even if you
                    // are adding it using javascript, you could attach the 
                    // click event as below when you add it.
                    $('#addScnt').click(function(e)
                    {
                        // prevent the link/button from doing what it
                        // should do normally, i.e. following a link
                        // or submitting a form
                        e.preventDefault();
                        // get the amount of items already added
                        // to the form.
                        var index = $('#p_scents > p').length;
                        // check if there is less than or equal to 10
                        if(index <= 10)
                        {
                            // add the html, setting the name field.
                            $('#p_scents').append($('<p><label>Employer Name</label><input class="dynamic" type="text" name="employern' + index +'" id="employern" /><label>Job Title</label><input class="dynamic" type="text" name="jtitle' + index +'" id="jtitle" /><label>Start Date </label><input type="text" name="startd' + index +'" class="textfield" /><a href="#" class="remScnt">Remove</a></p>'));
                            // call the tcal method
                            new tcal ({'formname': 'form','controlname': 'startd' + index});
                        }
                        else
                        {
                            // oops, more than 10
                            alert('Maximum reached!');
                        }
                    });
                    // as we are adding the items programatically
                    // we need to use the live method.
                    // Also, note that it is no longer #remScnt, but
                    // .remScnt - You can only have one id per page,
                    // so I have changed it to a class.
                    $('.remScnt').live('click', function(e)
                    {
                        e.preventDefault();
                        // if we have more than 2 items
                        if($('#p_scents > p').length > 2)
                        {
                            // get the closest P tag and remove it
                            $(this).closest('p').remove();
                        }
                        else
                        {
                            // oops, only 2 items left
                            alert('A minimum of two x is required!');
                        }
                    });
                });

    Hope this helps?!



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •