I have many answer forms on a page with different classes for all the forms.
all the forms got 2 buttons to send the parent form.
I send the form if #avote_down or #avote_up is clicked, then got the parent form class of the button clicked and save the class inside the var clase, then add the . before the class name (I know is weird the dot thing but if I don't do it, this doesn't work), after this I save the class edited before on the var called answervotes so we can work with it.
//declare variables outside the functions to use them
//inside others
var answerdata;
var answervotes;
var clase;
var clasedot;
$('#avote_down, #avote_up').on("click",function(e) {
e.preventDefault();
clase = $(this).parents("form:first").attr('class');
clasedot = '.'+clase;
answervotes = $(clasedot);
answerdata = answervotes.serializeArray();
answerdata.push({name: encodeURI($(this).attr('name')), value: encodeURI($(this).attr('value'))});
answervotes.submit();
answerdata.pop();
});
if everything goes well I can send the form using the ajax function bellow, as you see the ajax function is using the vars declared before.
answervotes.bind('submit',function () {
$.ajax({
url: answervotes.attr('action'),
type: answervotes.attr('method'),
cache: false,
dataType: 'json',
data: answerdata,
success: function(data) {
if(data.message == "plus")
{
$("#avote_up").attr('class','options options-hover');
$("#avote_down").attr('class','options');
$("#atotal-votes").html(data.votes);
console.log(data.votes);
}
if(data.message == "sub")
{
$("#avote_down").attr('class','options options-hover');
$("#avote_up").attr('class','options');
$("#atotal-votes").html(data.votes);
console.log(data.votes);
}
if(data.name == "register")
{
$('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');
setTimeout(function() {
$('.should-login').fadeOut(300);
},4000);
setTimeout(function() {
$('.should-login').remove();
},4300);
}
if(data.name == "limited_votes")
{
$('.theme-actions').append('<div class="should-login"> <span>' + data.message + '</span><div id="close"></div></div>');
setTimeout(function() {
$('.should-login').fadeOut(300);
},4000);
setTimeout(function() {
$('.should-login').remove();
},4300);
}
if(data.name == "repeated_vote")
{
$('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');
setTimeout(function() {
$('.should-login').fadeOut(300);
},4000);
setTimeout(function() {
$('.should-login').remove();
},4300);
}
},
error: function(xhr, textStatus, thrownError) {
console.log(data.message);
alert("error");
}
});
return false;
});
The problem: When I try to send the form like this, it just send me to the form action page like if there is no e.preventDefault() method being used to prevent the normal action, but in fact it is there you see it.
important facts: When I assign the the value to the answervotes var outside the click function using a direct name like so var answervotes = $(".parent-form1"); it works perfectly, but if I assign the name directly inside the click function, it just doesn't work either (I need this to be dynamic depending of the parent form).
console error: Uncaught TypeError: Cannot read property 'bind' of undefined, probably because isn't getting the answervotes until the button is clicked, but I suppose this would be solved with the var problem.
here is a jsfiddle: https://jsfiddle.net/EnmanuelDuran/cyvpkvkk/22/
Solved.
I nested the submit function into the click function and execute the form submit and the following actions after executing the submit function:
$('#avote_down, #avote_up').on("click",function(e) {
e.preventDefault();
clase = $(this).parents("form:first").attr('class');
clasedot = '.'+clase;
answervotes = $(clasedot);
answerdata = answervotes.serializeArray();
answervotes.bind('submit',function () {
$.ajax({
url: answervotes.attr('action'),
type: answervotes.attr('method'),
cache: false,
dataType: 'json',
data: answerdata,
success: function(data) {
if(data.message == "plus")
{
$("#avote_up").attr('class','options options-hover');
$("#avote_down").attr('class','options');
$("#atotal-votes").html(data.votes);
console.log(data.votes);
}
if(data.message == "sub")
{
$("#avote_down").attr('class','options options-hover');
$("#avote_up").attr('class','options');
$("#atotal-votes").html(data.votes);
console.log(data.votes);
}
if(data.name == "register")
{
$('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');
setTimeout(function() {
$('.should-login').fadeOut(300);
},4000);
setTimeout(function() {
$('.should-login').remove();
},4300);
}
if(data.name == "limited_votes")
{
$('.theme-actions').append('<div class="should-login"> <span>' + data.message + '</span><div id="close"></div></div>');
setTimeout(function() {
$('.should-login').fadeOut(300);
},4000);
setTimeout(function() {
$('.should-login').remove();
},4300);
}
if(data.name == "repeated_vote")
{
$('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');
setTimeout(function() {
$('.should-login').fadeOut(300);
},4000);
setTimeout(function() {
$('.should-login').remove();
},4300);
}
},
error: function(xhr, textStatus, thrownError) {
console.log(data.message);
alert("error");
}
});
return false;
});
answerdata.push({name: encodeURI($(this).attr('name')), value: encodeURI($(this).attr('value'))});
answervotes.submit();
answerdata.pop();
});
it solved the basics problem, then I used unique forms classes and call the elements inside of it by using the form parent class so I can call just that element, even if they are some more ids called like that one it doesn't show problems because every form has an unique class to call the nested elements on it.
for the record: the variables stayed outside the functions, on the document.ready