1

I have a page that "fakes" going to another page by means of conditionally showing/hiding certain elements. When either of the two images that are shown by default are clicked, they are both hidden and, based on which one was clicked, other elements are displayed.

Among the elements then displayed is a "go back" button. When that button is clicked, it hides what is currently being displayed (including itself), and shows the original two images.

It works, except the page, after a brief delay, "blinks" (is refreshed). Why, and how can I avoid this refresh?

Here's the jQuery behind the button click:

$('#backToMain').on( "click", function() {
    $('#preTravelImages').addClass('finaff-form-help-hide');
    $('#postTravelImages').addClass('finaff-form-help-hide');
    $('#preTravel').removeClass('finaff-form-help-hide');
    $('#postTravel').removeClass('finaff-form-help-hide');
    $('#backToMain').addClass('finaff-form-help-hide');
});

Note: "preTravelImages" is a div that contains several images; the same goes for "postTravelImages". "preTravel" and "postTravel" both contain one image only (clicking the preTravel image makes the images in preTravelImages visible, and likewise clicking the postTravelImage makes the images in postTravelImages visible).

The "hide" class is:

.finaff-form-help-hide {
    visibility: hidden;
    display: none;
}

Here is the button that is clicked:

<button class="finaff-form-help-hide" id="backToMain" name="backToMain">Back to Form Help</button>

Does the order of these add/remove Class calls matter? Or what do I need to do?

B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
  • 3
    Clicking on a link normally results in going to the href= right? is #backToMain an anchor tag with an href? Could it be doing what all anchors with an href do by default? – Kevin B Oct 05 '15 at 18:17
  • 2
    You can use `preventDefault()` to cancel default action of the link. Add `e` parameter: `$('#backToMain').on( "click", function(e) {` and write `e.preventDefault()` inside. – Victor Levin Oct 05 '15 at 18:19
  • 1
    do you see any network traffic on the debugging tools/console? the page may be 'blinking' but that does not mean it is getting 'refreshed'... can you confirm this? – blurfus Oct 05 '15 at 18:20
  • @KevinB: "backToMain" is a button; I updated the question to show the HTML for it. – B. Clay Shannon-B. Crow Raven Oct 05 '15 at 18:20
  • 1
    @KevinB the clicking may (or may not) be done on an `href`... – blurfus Oct 05 '15 at 18:20
  • 2
    And, is that button in a form? If a button doesn't have a type, and there are no other buttons in the form of type submit, it will act as if it were a submit button, so, basically the same scenario (and similar solution) – Kevin B Oct 05 '15 at 18:21
  • 1
    Possible duplicate of [How to stop default link click behavior with jQuery](http://stackoverflow.com/questions/5632031/how-to-stop-default-link-click-behavior-with-jquery) – Patrick M Oct 05 '15 at 18:21

1 Answers1

1

Add a return false to prevent default link action:

$('#backToMain').on("click", function() {
    $('#preTravelImages').addClass('finaff-form-help-hide');
    $('#postTravelImages').addClass('finaff-form-help-hide');
    $('#preTravel').removeClass('finaff-form-help-hide');
    $('#postTravel').removeClass('finaff-form-help-hide');
    $('#backToMain').addClass('finaff-form-help-hide');
    return false;
});
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260