Primefaces commandButton and ajax

Question

I use a tabView component with many tabs. In many of them, I have form which are submitted by primefaces commandButton component.

By default, PF commandButton using ajax mode but when I submit my form, my page seems to be fully loaded and my tabView component lost its index view (index 0 is rendered).

Is that normal behaviour please ?

I though that I would stay in the same index because it's ajax...

Answer 1

Looks like there is some naming container ( p:tabView maybe) that you better assign an id to it , so instead of getting prefix like j_idt16 (which could vary from time to time) you will get myTab0 , myTab1 etc prefix...

for example <p:tabView id="myTab"

Another thing you could do to be on the safe side is checking if the element exists before trying to select it with jquery and access its value, like this

if($('#j_idt16\\:register_location_choice_2_input').length > 0){
    //some code here
}

Answer 2

Ok, my problem is the JS validateRegisterForm function. When I remove it, it works but I need it...

I use it to check if validation form can be launched.

function validateRegisterForm(){    

if($('#j_idt16\\:register_location_choice_2_input').attr('checked')){

    if($('#j_idt16\\:register_galaxies_input').val() == 0){
        var galaxie = MUST_CHOOSE_GALAXY;
        alert(galaxie.charAt(0).toUpperCase() + galaxie.slice(1));
        return false;
    }

    if($('#j_idt16\\:register_solar_systems_input').val() == 0){
        var ss = MUST_CHOOSE_SOLAR_SYSTEM;
        alert(ss.charAt(0).toUpperCase() + ss.slice(1));
        return false;
    }

    if($('#j_idt16\\:register_positions_input').val() == 0){
        var position = MUST_CHOOSE_POSITION;
        alert(position.charAt(0).toUpperCase() + position.slice(1));
        return false;
    }

}


return true;    

}

So how can I check fields values before sending and allowing or not validation form with ajax please ?

EDIT :

Ok, I solved my problem by launching validation inside my JS function with button type passed to button not submit and using remoteCommand component :

My JS function :

function validateRegisterForm(){    

if(...)
      validateForm();

}

And my remoteCommand :

<p:remoteCommand name="validateForm" actionListener="#{login.registerAccount()}"/>