Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
177
rated 0 times [  180] [ 3]  / answers: 1 / hits: 45396  / 10 Years ago, sat, march 29, 2014, 12:00:00

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!


More From » jquery

 Answers
15

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));

[#71710] Friday, March 28, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
harleew

Total Points: 70
Total Questions: 87
Total Answers: 117

Location: Namibia
Member since Mon, Feb 21, 2022
2 Years ago
;