CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KarlB
KarlB

Reputation: 31

How to fix a '?' being added to my URL when a certain button is clicked

As the title says, when I click a certain button - it adds a '?' to my URL. I'm just wondering why is this happening. I'm using JQuery and HTML. This results in my site flickering and I'm just wondering what is causing this issue. This is the code which toggles a div and what is causing the addition of a '?'

$(document).ready(function() {
      $('#helpBtn').click(function() {
        $("#helpdiv").slideToggle();
      });
    })

My HTML is as follows...

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Big News Portal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link type="text/css" href="css/main.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!--<script src="js/jquery-minified.js"></script>-->
  <script src="js/bbc-home-RSS.js"></script>
  <script src="js/bbclivesearch"></script>
  <script src="js/guardian-home.js"></script>
  <script src ="js/help.js"></script>
  <!--<script src="js/test.js"></script>-->
  <script src="js/navigation.js"></script>
</head>

<body>
  <div class="jumbotron text-center">
    <h1>Big News Portal</h1>
  </div>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active">
          <a class="navbar-brand" href="#NewsHome" id="home-btn" data-section="section_home">Home</a>
        </li>
        <li><a href="#NewsUK" data-section="section_uk" id="uk-btn">UK News</a>
        </li>
        <li><a href="#NewsWorld" data-section="section_world" id="world-btn">World News</a>
        </li>
        <li><a href="#NewsPolitics" data-section="section_politics" id="politics-btn">Politics</a>
        </li>
        <li><a href="#NewsScience" data-section="section_science" id="science-btn">Science</a>
        </li>
        <li><a href="#NewsTech" data-section="section_tech" id="technology-btn">Technology</a>
        </li>
        <li><a href="#NewsEntertainment" data-section="section_entertainment" id="entertainment-btn">Entertainment</a>
        </li>
        <li><a href="#NewsSport" data-section="section_sport" id="sport-btn">Sport</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search" onkeyup="showResult(this.value)">
        </div>
        <button type="submit" id="helpBtn" class="btn btn-default">Help
        </button>
      </form>
    </div>
    </div>
  </nav>
  <div class="container">
    <div id="helpdiv">
    <div id= "helpTitle">
    <h3>Live Search Help</h3>
    </div>
      <p>Use the search to display articles from the BBC. </p>
      <p>Links to articles will be diplayed in the BBC Live Search box.</p>
    </div>
    <div class="page-header">
      <h1>Big News Portal</h1>
    </div>
    <div class="row">
      <div class="col-sm-9">
        <div class="row">
          <div class="col-sm-12">
            <div id="head-article" class="thumbnail article">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div id="article1" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article2" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article3" class="thumbnail article">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div id="article4" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article5" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article6" class="thumbnail article">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div id="article7" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article8" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article9" class="thumbnail article">
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-3 well">
        <p class="h4"><em>BBC Live Search</em></p>
        <div id="livesearch" class="thumbnail thumbnail-article-small-search">
        </div>

      </div>
      <div class="col-sm-3 well">
        <h2>BBC Most Popular</h2>
        <div id="article10" class="thumbnail article">
        </div>
        <div id="article11" class="thumbnail article">
        </div>
        <div id="article12" class="thumbnail article">
        </div>
        <div id="article13" class="thumbnail article">
        </div>
        <div id="article14" class="thumbnail article">
        </div>
      </div>
    </div>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-default" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Thanks in advance

Upvotes: 1

Views: 146

Answers (4)

traktor
traktor

Reputation: 19344

The button has a "type=submit" attribute and is within a form. When clicked it submits the form which reloads the page in response (the "flicker".

For a button that is not meant to submit the form, change the type attribute to "button" (the default is "submit").

<button type="button" id="helpBtn" class="btn btn-default">Help</button>

There should be no need to modify the JavaScript to look at event processing.

Upvotes: 0

Mario Lopez
Mario Lopez

Reputation: 1465

The button is type submit so it's submitting the form and trying to attach any possible query parameters to the url.

To avoid that you have to handle your form submission with jQuery as well. You can stop the default behaviour of the button with preventDefault(),

 $(document).ready(function() {
  $('#helpBtn').click(function(event) {
    event.preventDefault();
    $("#helpdiv").slideToggle();
  });
})

Upvotes: 0

hackerrdave
hackerrdave

Reputation: 6706

You need to preventDefault on the event when clicking the submit button like this:

$(document).ready(function() {
  $('#helpBtn').click(function(e) {
    e.preventDefault();
    $("#helpdiv").slideToggle();
  });
})

Upvotes: 0

Towelie
Towelie

Reputation: 92

Try prevent default? Read here for more info https://api.jquery.com/event.preventdefault/

$('#helpBtn').click(function(e) {
    e.preventdefault();
    $("#helpdiv").slideToggle();
});

Upvotes: 1

Related Questions