Uncaught ReferenceError: function is not defined jQuery

Question

I am trying to call jQuery function when button is clicked. But I am getting the error as follows:

Uncaught ReferenceError: update_question_ajax is not defined

HTML:

<button type="button" class="update-question-<?php echo $i; ?> button" onclick="update_question_ajax(<?php echo $i; ?>)" style="outline: 0 none;"><?php _e('Update') ?></button>

jQuery:

$(function(){
    function update_question_ajax(id)
    {
        var test = $('.edit-question-' + id + ' input[name="translated"]');
        var editedQuestionId = $('#question-id-'+id).val();
        var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val();
        var modalObj = $('#myQuestionModal');

        $.ajax({
            type: "POST",
            url: "<?php echo base_url('admin/question/admin_edit_question'); ?>",
            data:{
                edited_question: editedQuestionObj,
                question: editedQuestionId
            },
            success: function(){
                modalObj.dialog('close');
                modalObj.html('');
            },
            complete: function(){
                //window.location.reload(true);
            }
        });
        return false;
    }
});

I appreciate if you guys help me out about this.

Thank you!

Answer 1

Seems to be a scope issue. You've defined the function essentially inside another function. You should also try to avoid placing php inside javascript. Technically it works, but isn't really good form.

Removed the inline click handler.

<button type="button" class="update-question button" data-id="<?php echo $i; ?>" style="outline: 0 none;"><?php _e('Update') ?></button>

Then we create a self executing function, pass jQuery in as $ which gives everything inside the ability to use "$" as jQuery. Then define your click handler for the button and use a data attribute to pass the id rather than using PHP mixed in your JS and placing it in the DOM. Just feels a little cleaner. Also, make sure you are loading jquery / other scripts at the bottom of your document, just before the close body. This way you don't need a .ready because your document will already be loaded.

(function($){
    // Define click handler. 
    $('button.update-question').on('click', function(e){
        e.preventDefault();
        var id = $(this).data('id');

        update_question_ajax(id);
    });

    function update_question_ajax(id) {
        var test = $('.edit-question-' + id + ' input[name="translated"]'),
            editedQuestionId = $('#question-id-'+id).val(),
            editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(),
            modalObj = $('#myQuestionModal');

        $.ajax({
            type: "POST",
            url: "YOURURL",
            data:{
                edited_question: editedQuestionObj,
                question: editedQuestionId
            },
            success: function(){
                modalObj.dialog('close');
                modalObj.html('');
            },
            complete: function(){
                //window.location.reload(true);
            }
        });
    }

}(jQuery));

Answer 2

You should move the function definition outside of the document.ready callback ($(function() { ... } ):

function update_question_ajax(id) {
    var test = $('.edit-question-' + id + ' input[name="translated"]');
    var editedQuestionId = $('#question-id-'+id).val();
    var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val();
    var modalObj = $('#myQuestionModal');

    $.ajax({
        type: "POST",
        url: "<?php echo base_url('admin/question/admin_edit_question'); ?>",
        data:{
            edited_question: editedQuestionObj,
            question: editedQuestionId
        },
        success: function(){
            modalObj.dialog('close');
            modalObj.html('');
        },
        complete: function(){
            //window.location.reload(true);
        }
    });
    return false;
}

Everything you put inside the $(function() {} is executed when the DOM is ready but is private to its scope.

If on the other hand you want to use unobtrusive javascript, then get rid of this onclick attribute from your markup:

<button type="button" class="button update-question-<?php echo $i; ?>" dtaa-id="<?php echo $i; ?>" style="outline: 0 none;"><?php _e('Update') ?></button>

and then use the document ready callback to unobtrusively subscribe to the .click event of those buttons:

$(function() {
    function update_question_ajax(id) {
        var test = $('.edit-question-' + id + ' input[name="translated"]');
        var editedQuestionId = $('#question-id-'+id).val();
        var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val();
        var modalObj = $('#myQuestionModal');

        $.ajax({
            type: "POST",
            url: "<?php echo base_url('admin/question/admin_edit_question'); ?>",
            data:{
                edited_question: editedQuestionObj,
                question: editedQuestionId
            },
            success: function(){
                modalObj.dialog('close');
                modalObj.html('');
            },
            complete: function(){
                //window.location.reload(true);
            }
        });
        return false;
    }


    $('.button').click(function() { 
        var id = $(this).data('id');
        return update_question_ajax(id);
    });
});