I'm creating recursive data set. I have almost completed it but facing one issue in nested child when i add question inside option so its adding two time suppose if i add Index 3 so its add automatically two more Index 4 and 5. Same issue i was facing while adding nested question and nested option. I'm using avgrund plugin for popup.
var ParentIndex = 1;
var QuestionIndex = 1;
var OptionIndex = 1;
var Question = {};
var Model = null;
$(function(){
var Parent = parseInt($(this).attr('data-parent'));
Parent = isNaN(Parent) ? null : Parent;
//console.log(Parent);
$('[data-type=OQ]').CreateQuestion(Parent);
// Create Question
/*$('body').on('click','[data-type=OQ]',function(){
// Create Question
//CreateQuestion($(this),Parent);
});
*/
// Remove Question
$('body').on('click','a[data-type=RQ]',function(){
var Parent = parseInt($(this).attr('data-parent'));
delete Question[Index];
$('[data-type=QRow][data-index='+Index+']').remove();
});
// Remove Options
// Remove Question
/*
$('body').on('click','a[data-type=RO]',function(){
var Index = parseInt($(this).attr('data-index'));
delete Question[Index];
$('[data-type=QRow][data-index='+Index+']').remove();
});
*/
});
$.fn.extend({
CreateQuestion: function(Parent){
Model = $(this).avgrund({
height: 500,
holderClass: 'custom',
closeByEscape: true,
closeByDocument: true,
showClose: true,
showCloseText: 'x',
onBlurContainer: '.container-scroller',
template: '<form name="AddQuestion"> <div class="row"> <div class="col-sm-12"> <div class="form-group"><label>Title</label><input type="text" class="form-control" name="Title"/></div></div><div class="col-sm-12"> <div class="form-group"><label>Role</label><select name="Role" class="form-control">'+(Roles)+'</select></div></div><div class="col-sm-6"> <div class="form-group"> <label>Weight</label> <div class="input-group"><input class="form-control" placeholder="Weight" name="Weight" type="text"/><span class="input-group-append"><a class="btn btn-info text-white">%</a></span></div></div></div><div class="col-sm-6"><label> </label><div class="form-check form-check-flat mt-0"><input name="NotNA" type="checkbox" class="form-check-input"/> N/A</div> </div><div class="col-sm-12"> <div class="form-group"><a href="javascript:;" class="btn btn-success col-12" data-type="ADQ" data-index="'+QuestionIndex+'" data-parent="'+Parent+'"><i class="fa fa-plus"></i> Add Question </a></div></div></div></form>'
});
$('body').on('click','a[data-type=ADQ]',function(){
var Data = {
'Question' : $('input[name=Title]').val(),
'Role' : $('select[name=Role]').val(),
'Weight' : $('input[name=Weight]').val(),
'NotNa' : $('input[name=NotNA]').prop("checked") ? 1 : 0,
'Options' : {},
'Parent' : $(this).attr('data-parent')
};
// Pushing Data to Object
Question[QuestionIndex] = Data;
// Finding Entry Index
var Index = parseInt(Object.keys(Question).length);
// Defining Title
var QuestionTitle = Question[Index].Question;
// HTML
var HTML = '<div class="mb-3" data-type="QRow" data-index="'+Index+'"><div class="card border-success rounded"> <div class="card-header"> <div class="row"> <div class="col-sm-8 pt-1">'+QuestionTitle+'</div><div class="col-sm-4 text-right"> <a href="javascript:;" class="btn btn-info mr-1" data-type="OPO" data-parent="'+Index+'"><i class="fa fa-plus"></i> Add Option</a><a href="javascript:;" class="btn btn-danger" data-type="RQ" data-index="'+Index+'"><i class="fa fa-close"></i></a></div></div></div><div class="card-body bg-light" data-type="OUNQ" data-parent="'+Index+'"></div></div></div>';
// Appending Question
switch(Question[Object.keys(Question).length].Parent){
case "null":
// Append Question
$('[data-type=Questions]').append(HTML);
$('.avgrund-close').click();
$('[data-type=OPO]').CreateOption(Index);
break;
default:
// Append Question
$('[data-type=QUNO][data-parent='+Parent+']').append(HTML);
$('.avgrund-close').click();
$('[data-type=OPO]').CreateOption(Index);
}
// Increasing Index
QuestionIndex++;
});
},
CreateOption: function(Parent){
Model = $(this).avgrund({
height: 500,
holderClass: 'custom',
closeByEscape: true,
closeByDocument: true,
showClose: true,
showCloseText: 'x',
onBlurContainer: '.container-scroller',
template: '<form name="AddOption"><div class="row"><div class="col-sm-12"><div class="form-group"><label>Name</label><input type="text" class="form-control" name="Name"></div></div><div class="col-sm-12"><div class="form-group"><label>Type</label><select name="Type" class="form-control"><option value="checkbox">Checkbox</option><option value="radio">Radio</option></select></div></div><div class="col-sm-6"><div class="form-group"><label>Effect</label><input type="text" class="form-control" name="Effect"></div></div><div class="col-sm-6"><div class="form-group"><label>Point</label><input type="text" class="form-control" name="Point"></div></div><div class="col-sm-12"><div class="form-check form-check-flat mt-0"><input name="FatalError" type="checkbox" class="form-check-input"> FatalError</div></div><div class="col-sm-12"><div class="form-group"><a href="javascript:;" class="btn btn-success col-12" data-type="ADO" data-index="'+OptionIndex+'" data-parent="'+Parent+'"><i class="fa fa-plus"></i> Add Option </a></div></div></div></form>'
});
$('body').on('click','a[data-type=ADO]',function(){
var Data = {
'Option' : $('input[name=Name]').val(),
'Type' : $('select[name=Type]').val(),
'Effect' : $('input[name=Effect]').val(),
'Point' : $('input[name=Point]').val(),
'FatalError' : $('input[name=FatalError]').prop("checked") ? 1 : 0,
'Parent' : $(this).attr('data-parent')
};
// Pushing Data to Object
Question[Parent].Options[OptionIndex] = Data;
var Options = Question[Parent].Options;
// Appending Option
var Index = parseInt(Object.keys(Options).length);
var Name = Options[Index].Option;
// Creating Option HTML
var HTML = '<div class="mb-3" data-type="ORow" data-index="'+Index+'"> <div class="card border-success rounded"> <div class="card-header"> <div class="row"> <div class="col-sm-8 pt-1">'+Name+'</div> <div class="col-sm-4 text-right"> <a href="javascript:;" class="btn btn-success mr-1" data-type="OQ" data-parent="'+Index+'"><i class="fa fa-plus"></i> Add Question</a><a href="javascript:;" class="btn btn-danger" data-type="RO" data-index="'+Index+'" data-parent="'+Parent+'"><i class="fa fa-close"></i></a></div> </div> </div> <div class="card-body bg-light" data-type="QUNO" data-parent="'+Index+'"></div> </div></div>';
// Append Question
$('[data-type=OUNQ][data-parent='+Parent+']').append(HTML);
$('.avgrund-close').click();
// Increasing Index
OptionIndex++;
$('[data-type=OQ]').CreateQuestion(Index);
});
}
});
from Data append two time just calling single event
No comments:
Post a Comment