Блог

Я пытаюсь создать рекурсивные данные в объекте Jquery. Я почти полностью открыл форму внутри всплывающего окна, получая данные и сохраняя их в объекте jquery, но столкнулся с проблемой в подвопросе внутри опции, которая дублирует основной вопрос. его опция добавления внутри вопроса правильно, но я добавляю дополнительный вопрос с той же функцией, просто получая родительский идентификатор, но его добавление дополнительного вопроса дважды дублирует основной вопрос

 var ParentIndex = 0;
var QuestionIndex = 0;
var OptionIndex = 0;
var Question = [];
var Model = null;

$(function(){
    // Create Question
    var ParentIDX = parseInt($('[data-type=OQ]').attr('data-parent'));
    ParentIDX = isNaN(ParentIDX) ? 0 : ParentIDX;

    // Create Question
    CreateQuestion('[data-type=OQ]',ParentIDX);

    // 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();
    });
    */

});

function CreateQuestion(Trigger,Parent){
    Model = $(Trigger).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>amp;nbsp;</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.push(Data);
     // Increasing Index
     QuestionIndex  ;
     // Appending Question
     if(parseInt(Question[Question.length - 1].Parent) == 0){
         // Finding Entry Index
         var Index = parseInt(Question.length - 1);
         // Defining Title
         var QuestionTitle = Question[Question.length - 1].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>'
         // Append Question
        $('[data-type=Questions]').append(HTML);
        $('.avgrund-close').click();
        // Create Option
        CreateOption('[data-type=OPO]',Index);
    } else {
        var Index = parseInt(Question.length - 1);
        // Defining Title
        var QuestionTitle = Question[Question.length - 1].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>'
        // Append Question
       $('[data-type=QUNO][data-parent=' Parent ']').append(HTML);
       $('.avgrund-close').click();
       // Create Option
       CreateOption('[data-type=OPO]',Index);
   }
  });
}

function CreateOption(Trigger,Parent){

    Model = $(Trigger).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
        var Options = Question[Parent].Options;
        Options.push(Data);
        // Increasing Index
        OptionIndex  ;
        // Appending Option
        var Index = parseInt(Options.length - 1);
        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();

       // Create Question
       CreateQuestion('[data-type=OQ]',Parent);
   });
}