CODEWITHSUNDEEP
javascriptjquerycsshtml
AdiT
AdiT

Reputation: 549

Problems with adding input field to div

I tried to add an input field, and label to the Card (The user add Card via button). But it didn't succeed. Instead of adding these input field to the Card, it put them on the in-box list. Can any help me to solve the problem?

FIDDLE

$('document').ready(function () {

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

        var numberOfDiv = [100];

        with(document) {
            var newDiv = createElement('div');

            var div = getElementById('userAddedDiv').appendChild(newDiv);

            for (var i = 0; i < numberOfDiv; i++) {
                numberOfDiv[i] = div;
            }
        }
    });

    $(function () {

        $('#userAddedDiv').sortable({
            containment: 'document',
            cursor: 'crosshair',
            opacity: '0.70',
            connectWith: '#onHoldList',
            hoverClass: '.border'
        });

        $('#onHoldList').sortable({
            containment: 'document',
            cursor: 'crosshair',
            opacity: '0.70',
            connectWith: '#userAddedDiv',
            hoverClass: '.border'
        });
    });

});

UPDATE

I modified your code to set a string value, in the text field. The value comes form a dialog window. It works fine. Then my issue is, when I add a new card to the in-box list, and I want to set a new string value on it. It works well. But at the same time the same string value gets added to the first card. You can try to add to card, and test it. I have a Demo: http://jsfiddle.net/AdiT/xMK53/4/

Jquery:

$('document').ready(function () {
    // Click function to add a card
    $('#AddCardBtn').click(function () {
        // Array of Card
        var numberOfCards = [100];


            // Create a new card
            var $div = $('<div />').addClass('sortable-div');
            $('#userAddedCard').append($div);

            $('<label>Title</label>').appendTo($div);              
            $('#Getbtn').click(function () {
                $('<input/>', { "type": "text", "value": $("#customTextBox").val() }).appendTo($div);
                $('<input/>', { "type": "text", "value": $("#datepicker").val() }).appendTo($div);
            });    
            // Sort cards in array
            for (var i = 0; i < numberOfCards; i++) {
                numberOfCards[i] = $div.clone(true);
            }

    });

Upvotes: 1

Views: 140

Answers (1)

mplungjan
mplungjan

Reputation: 177960

Live Demo

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div'); 
    $('<label>Title</label><br/>').appendTo($div);              
    $('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
    $('<input/>', { "type": "text","class":"date"}).appendTo($div);
    var cnt =0,$currentTarget;
    $('#AddCardBtn').click(function () {
      var $newDiv = $div.clone(true);
      cnt++;  
      $newDiv.prop("id","div"+cnt);  
      $('#userAddedCard').append($newDiv);
//      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });
        return false;

    });
    $("#datepicker").datepicker({showWeek:true, firstDay:1});

    $("#Getbtn").on("click",function() {
      var val=$("#customTextBox").val(), 
         date=$("#datepicker").val();
      $currentTarget.find(".ctb").val(val);
      $currentTarget.find(".date").val(date);
      $('#modalDialog').dialog("close");
    });
});

Upvotes: 2

Related Questions