Я хочу, когда я дважды щелкаю карту и выбираю дату из календаря, поставлю строковое значение для ввода поля и создадим динамический флажок. Затем, после закрытия диалога и двойного щелчка снова на той же карточке, я хочу, чтобы в этом диалоговом окне были показаны одинаковые значения. Позже, когда я добавляю новую карту, я хочу, чтобы диалоговое окно было пустым.
Я попытался исправить это сам, но не смог.
Html:
<!--Wrapper div-->
<div id="wrapper">
<!--Inbox list and button to add a card-->
<div id="inboxList" class="cellContainer">
<p style="display: inline">Inbox</p>
<!--Button to add a Card-->
<input type="button" id="AddCardBtn" value="+ Add a Card..."/> <hr class="fancy-line"/> <br/>
<!--Card div-->
<div id="userAddedCard"> <br/>
<div>
</div>
</div>
</div>
</div>
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
<label>Add checkBox</label>
<br />
<div id="progressbar"></div>
<br />
<input type="text" id="checkBoxName" />
<input type="button" id="btnSaveCheckBox" value="_Ok" />
<br />
</form>
</div>
Jquery:
$(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();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val() );
document.getElementById('customTextBox').value="";
document.getElementById('datepicker').value="";
$('.allcheckbox').remove();
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name) {
var container = $('#modalDialog');
var inputs = container.find('input');
var id = inputs.length + 1;
$('<input />', { type: 'checkbox', class: 'allcheckbox', id: 'cb' + id, value: name }).appendTo(container);
$('<label />', { 'for': 'cb' + id, class: 'allcheckbox', text: name }).appendTo(container);
$('<br/>').appendTo(container);
}
});
Добавьте это в dblclick
вызов dblclick
, прежде чем показывать диалог:
$('#modalDialog #customTextBox').val($currentTarget.children('.ctb').val());
$('#modalDialog #datepicker').val($currentTarget.children('.date').val());
Этот код принимает значения входных полей из выбранной карты и помещает их в поля ввода диалогового окна.
Что касается флажков, вам нужно сохранить их как значения javascript и прикрепить их к элементу карты, но я считаю, что слишком сложно изменить ваш код (который, кстати, немного беспорядочен) и заставить его работать. Вы должны реализовать модель/шаблон представления, чтобы разделить представление (элементы карты html) на данные (входные значения и метки меток). Могу ли я предложить вам использовать магистраль для достижения этой цели?