简体   繁体   中英

AJAX sending object with functions throws error at function

I have the following Ajax :

    $.ajax({
        type: 'POST',
        url: '/Jeopardy/saveCategoryData',
        dataType: 'json',
        data: {
            name: this.name,
            questions: this.question_array,
            sort_number: this.sort_number,
            game_id: game_id
        },
        success: function (data)
        {
            this.id = data;
        }
    });

Update This is the full class the ajax is apart of:

function Category(name, sort_number)
{
    this.name = name;
    this.sort_number = sort_number;
    this.question_array = [];
    this.id = 0;
    /*
        Functions
     */
}

Category.prototype.saveCategory = function()
{
    $.ajax({
        type: 'POST',
        url: '/Jeopardy/createCategory',
        dataType: 'json',
        data: {
            request: 'ajax',
            name: this.name,
            sort_number: this.sort_number,
            game_id: game_id
        },
        success: function (data)
        {
            this.id = data;
        }
    });
    $('.category_'+this.sort_number).each(function()
    {
        $(this).css('opacity', '1');
        $(this).addClass('question');
    })
}

Category.prototype.submitCategory = function()
{

        $.ajax({
            type: 'POST',
            url: '/Jeopardy/saveCategoryData',
            dataType: 'json',
            data: {
                request: 'ajax',
                name: this.name,
                questions: this.question_array,
                sort_number: this.sort_number,
                game_id: game_id
            },
            success: function (data)
            {
                this.id = data;
            }
        });
}

Category.prototype.addQuestion = function(question,index)
{
    this.question_array[index] = question
}

Where this.question_array is an array of question objects:

function Question(question, score)
{
    this.question = question;
    this.score = score;
    this.answer = [];

}

Question.prototype.getScore = function()
{
    return this.score;
}

Question.prototype.addAnswer = function(answer)
{
   this.answer.push(answer)
}

My answer object:

    function Answer(answer, is_correct)
{
    this.answer = answer;
    this.is_correct = is_correct;
}

When my Ajax submits i get an error at the function addAnswer saying: Cannot read property 'push' of undefined

Can anyone tell me why this might be happening (i am fairly new to OOP in JavaScript)

Update create.js (script that controls the objects)

save question function:

function saveQuestion() {
    var question = new Question($('#txt_question').val(), current_money);
    var array_index = (current_money / 100) - 1;
    $('.txt_answer').each(function ()
    {
        var answer = new Answer($(this).val(), $(this).prev().find('input').is(':checked'));
        question.addAnswer(answer); // <-- Add answer
    })
    if(current_element.find('.badge').length == 0)
    {
        current_element.prepend('<span class="badge badge-sm up bg-success m-l-n-sm count pull-right" style="top: 0.5px;"><i class="fa fa-check"></i></span>');
    }
    addQuestionToCategory(question, array_index);
    questionObject.fadeOutAnimation();

}

function addQuestionToCategory(question, index) {
switch (current_category_id) {
    case "1":
        category_1.addQuestion(question, index);
        break;
    case "2":
        category_2.addQuestion(question, index);
        break;
    case "3":
        category_3.addQuestion(question, index);
        break;
    case "4":
        category_4.addQuestion(question, index);
        break;
}

}

And the function that calls the ajax on each category object:

    function saveGame()
{
    category_1.submitCategory();
    category_2.submitCategory();
    category_3.submitCategory();
    category_4.submitCategory();
}

Debug callstack:

Question.addAnswer (question.js:25)
n.param.e (jquery-1.11.0.min.js:4)
Wc (jquery-1.11.0.min.js:4)
Wc (jquery-1.11.0.min.js:4)
(anonymous function) (jquery-1.11.0.min.js:4)
n.extend.each (jquery-1.11.0.min.js:2)
Wc (jquery-1.11.0.min.js:4)
n.param (jquery-1.11.0.min.js:4)
n.extend.ajax (jquery-1.11.0.min.js:4)
Category.submitCategory (category.js:47)
saveGame (create.js:116)
onclick (create?game_id=1:182)

*UPDATE

Okay something odd is going on if i change the addAnswer function to the following:

    Question.prototype.addAnswer = function(answer)
{
   if(this.answers != undefined)
   {
       this.answers.push(answer)
   }
}

It works fine?

Looks like Alexander deleted his response, here is what I would suggest:

function Question(question, score)
{
    this.question = question;
    this.score = score;
    this.answer = [];
}

Question.prototype.getScore = function()
{
    return this.score;
}

Question.prototype.submitQuestion = function()
{

}

Question.prototype.addAnswer = function(answer)
{
   this.answer.push(answer)
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM