on
the same page i'm using this plugin:
$g=jQuery.noConflict();
$g(function() {
/*
number of fieldsets
*/
var fieldsetCount = $g('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save
the widths of each one of
the fieldsets
set
the final sum as
the total width of
the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$g('#steps .step').each(function(i){
var $step = $g(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$g('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus
the first input of
the form
*/
$g('#formElem').children(':first').find(':input:first').focus();
/*
show
the navigation bar
*/
$g('#navigation_form').show();
/*
when clicking on a navigation link
the form slides to
the corresponding fieldset
*/
$g('#navigation_form a').bind('click',function(e){
var $this = $g(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store
the position of
the link
in
the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to
the next or to
the corresponding
fieldset.
The order of
the links in
the navigation
is
the order of
the fieldsets.
Also, after sliding, we trigger
the focus on
the first
input element of
the new fieldset
If we clicked on
the last link (confirmation), then we validate
all
the fieldsets, otherwise we validate
the previous one
before
the form slided
*/
$g('#steps').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$g('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on
the tab (on
the last input of each fieldset), makes
the form
slide to
the next step
*/
$g('#formElem > fieldset').each(function(){
var $fieldset = $g(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$g('#navigation_form li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force
the blur for validation */
$g(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all
the fieldsets
records if
the Form has errors in $('#formElem').data()
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){
var error = validateStep(i);
if(error == -1)
FormErrors = true;
}
$g('#formElem').data('errors',FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step){
if(step == fieldsetCount) return;
var error = 1;
var hasError = false;
$g('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
var $this = $g(this);
var valueLength = jQuery.trim($this.val()).length;
if(valueLength == ''){
hasError = true;
$this.css('background-color','#FFEDEF');
}
else
$this.css('background-color','#FFFFFF');
});
var $link = $g('#navigation_form li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if(hasError){
error = -1;
valclass = 'error';
}
$g('<span class="'+valclass+'"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow
the user to submit
*/
$g('#registerButton').bind('click',function(){
if($g('#formElem').data('errors')){
alert('Please correct
the errors in
the Form');
return false;
}
});
});
and this one:
(function($){
$countCursos = 1;
$countFormsA = 1;
$countFormsB = 1;
$.fn.addForms = function(idform){
var adicionar_curso = "<p>"+
" <label for='nome_curso'>Nome do Curso</label>"+
" <input id='nome_curso' name='nome_curso["+$countCursos+"]' type='text' />"+
" </p>";
var myform2 = "<table>"+
" <tr>"+
" <td>Field C</td>"+
" <td><input type='text' name='fieldc["+$countFormsA+"]'></td>"+
" <td>Field D ("+$countFormsA+"):</td>"+
" <td><textarea name='fieldd["+$countFormsA+"]'></textarea></td>"+
" <td><button>remove</button></td>"+
" </tr>"+
"</table>";
var myform3 = "<table>"+
" <tr>"+
" <td>Field C</td>"+
" <td><input type='text' name='fieldc["+$countFormsB+"]'></td>"+
" <td>Field D ("+$countFormsB+"):</td>"+
" <td><textarea name='fieldd["+$countFormsB+"]'></textarea></td>"+
" <td><button>remove</button></td>"+
" </tr>"+
"</table>";
if(idform=='novo_curso'){
alert(idform);
adicionar_curso = $("<div>"+adicionar_curso+"</div>");
$("button", $(adicionar_curso)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(adicionar_curso);
$countCursos++;
}
if(idform=='mybutton1'){
alert(idform);
myform2 = $("<div>"+myform2+"</div>");
$("button", $(myform2)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(myform2);
$countFormsA++;
}
if(idform=='mybutton2'){
alert(idform);
myform3 = $("<div>"+myform3+"</div>");
$("button", $(myform3)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(myform3);
$countFormsB++;
}
};
})(jQuery);
$(function(){
$("#mybutton1").bind("click", function(e){
e.preventDefault();
var idform=this.id;
if($countFormsA<3){
$("#container1").addForms(idform);
}
});
});
$(function(){
$("#novo_curso").bind("click", function(e){
e.preventDefault();
var idform=this.id;
alert(idform);
if($countCursos<3){
$("#outro_curso").addForms(idform);
}
});
});
$(function(){
$("#mybutton2").bind("click", function(e){
e.preventDefault();
var idform=this.id;
if($countFormsB<3){
$("#container2").addForms(idform);
}
});
});
My problem is
the two are making conflict:
I added previously
the $g on
the first to avoid conflict, but
the truth is they don't work together, any hint how can i configure
the second one to avoid this?
Thanks in advance!
