You are viewing limited content. For full access, please sign in.

Question

Question

Forms Pagination Javascript not working

asked on March 18, 2016

I am trying to implement pagination for several of my forms, and can't get any of the sections to hide.  When I click any of the navigation bar items or buttons, absolutely nothing at all happens.  I have checked the script in the browser console and am not receiving any errors.

If anyone can help me understand what I am doing wrong, I would really appreciate it.  I have even gone as far as to create a very simple new form to make sure that none of my field rules or collections were causing the issue, but to no avail.  

The simple form has three sections, Personal Information, Destination and Expenses.  CSS Classes set in the Advanced tab for these sections are as follows:

Personal Information:  sections info section1

Destination:  sections dest section2

Expenses:  sections exps section3

Here is the CSS for my simple form:

.navbar { text-align: center; }
.navbar div { cursor: pointer;
                       display: inline-block;
                     background-color: #e5e5e5;
                     padding: 5px 5px; }
.navbar div:hover { background-color: #c0c0c0;}
.navbar .selected { background-color: #c0c0c0;}

 

And here is the javascript:

//pagination
    //when a navigation item is clicked, hide all sections and the submit button

    $('.navitem').on('touchstart click', function () {

            $('.sections, .Submit').hide();
       //also looks through the navigation tabs and removes the selected class

        $('.navbar').find('.navitem').removeClass('selected');
      //then looks at the navigation item that was clicked, and shows or hides the other sections
      //based on the navigation item's class and adds the 'selected' class to the appropriate tab

        if ($(this).hasClass('info')) {

            $('.section1').show();

            $('.navbar').find('.info').addClass('selected');

        }

        else if ($(this).hasClass('dest')) {

            $('.section2').show();

            $('.navbar').find('.dest').addClass('selected');

        }

        else if ($(this).hasClass('exps')) {

            $('.section3').show();

            $('.navbar').find('.exps').addClass('selected');

        }

       
    })

    $('.navitem.info').trigger('click');

//end pagination

The navigation bar items appear clickable, as do the buttons; however, nothing happens when they are clicked.  The entire form displays on form load, and stays the same no matter what I click.  

I feel like this is probably something simple, but have searched this site for similar issues and been unable to find anything that tells me where I've gone awry.  I've wrestled with it way too long, and need some help in order to be able to implement pagination.

 

Thank you!!

0 0

Answer

SELECTED ANSWER
replied on March 21, 2016

Is that ALL of your javascript or just an excerpt that manages the pagination? My question is... did you wrap that whole block of code inside a ready function?

$(document).ready(function(){ 
.... your code here .... 
});

 

0 0

Replies

replied on March 21, 2016

Thank you, Scott!!!  It was all of my javascript, but being a newbie, I didn't realize that the ready function you mentioned above needed to be added.

It's working perfectly now.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.