Troubleshooting of JavaScript/JQuery code with .show() and .hide() functionality

Question

I'm building a web-page that has header and footer that stay the same and two alternative groups of elements that will replace each other as a user navigates the site. Web page is being built with JavaScript , JQuery , Bootstrap .

Here are an extremely simplified index.html and the exact copy of my JavaScript / JQuery functions:

<!DOCTYPE html>
<html>
    <head>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <header>Header</header>
        <div class="container">
            <!-- if I remove the below form and just leave a stand-alone button
             (no longer type="submit") it will work as expected by me -->
            <form role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Main text field" id="main_input">
                </div>
                <button type="submit" class="btn btn-default" id="main_search" onclick="OpenSearchScreen()">Switch to Search</button>
            </form>
            <div class="row" id="mainDiv">
                <br/>
                <p>We are in Main</p>
             </div>

            <div class="row" id="searchDiv" hidden>
                <br/>
                <p>We are in Search</p>
            </div>

        </div>
        <footer>Footer</footer>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="misc.js"></script>
    </body>
</html>

// hides parts of Home screen
// shows Search screen
function OpenSearchScreen() {
    // hide Main components
    $("[id^='main']").hide();

    // reveal Search components
    $("[id^='search']").show();
}

// hides Search screen
// shows Home screen
function OpenHomeScreen() {
    // hide Search components
    $("[id^='search']").hide();

    // reveal Main components
    $("[id^='main']").show();
}

The above HTML + JS combination does not work: it briefly shows Search and then reverts back to Main .

As I indicated in the comments, if I remove the form and just put in a regular (stand-alone) button with the same onclick setting, everything works as expected: when I press the button Main switches to Search and stays as such.

I have the following two questions/requests:

If you know why it's happening please enlighten me. If have an idea how it can be fixed / worked around please share it with me as well.
If you can suggest how I can further troubleshoot the problem please do. I'm completely at loss how to proceed, since I can seemingly debug (via Chrome Dev Tools) the JS part only. As soon as the program gets past OpenSearchScreen function and then exits form element I can no longer track its progress.

Answer 1

You're using a submit button and not preventing it's default behaviour, hence why it's submitting the form and you're only seeing the change for a split second before the form is submitted.

Instead, you could use something like:

<button type="submit" class="btn btn-default" id="main_search" onclick="OpenSearchScreen(); return false;">
   Switch to Search   
</button>

jsFiddle here

Or better yet, remove all the inline JS and handle that externally.

Troubleshooting of JavaScript/JQuery code with .show() and .hide() functionality

Question

1 answers

solution1
3 ACCPTED 2014-03-20 01:23:57

Troubleshooting of JavaScript/JQuery code with .show() and .hide() functionality

Question

1 answers

solution1 3 ACCPTED 2014-03-20 01:23:57

solution1
3 ACCPTED 2014-03-20 01:23:57