symbols appearing in url after modal opens

Question

This may seem like a minor quibble, but why are the symbols #! appearing in my url after opening and closing my modals?

Here's what's in my script tags. The problem likely lies here.

<script>
 $( document ).ready(function(){
  $(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'right', closeOnClick: true});

  $('#modal2').modal();

  $('#modal1').modal();
 });

</script>

Edit: Added the modal link, which is a rails search form. Modal2 is essentially the same, but for a different resolution

<div id="modal1" class="modal hide-on-med-and-down">
 <div class="modal-content">
  <div class="center-align">
   <h4>Looking for something?</h4>
    <div class="search_form">
     <%= form_tag search_posts_path, method: :get, id: "post-lookup-form" do %>
     <div id="search_border" class="form-group">
      <%= text_field_tag :post, params[:post], placeholder: "  Search Posts", autofocus: true, id: "search_box" %>
     </div>
    <% end %>
   <div>
    <a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  </div>
  </div>
 </div>
</div>

This briefly caused the hover effects on my side nav to stop working. I fixed it by manually entering the hover effect in my css, but I have a bad feeling that I really didn't address the main problem only the symptom and that this will bite me later on down the road.

I'm currently using the 0.100.2 version of materialize for this project. Let me know if you need more info or code.

Answer 1

It is because of this line

<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>

Change the href to href='' value and it will not get placed into the url anymore.