Javascript code not working properly in rails

Question

index.html.erb

<div id="app-back-button">
  <%= link_to image_tag("back.png",:border => 0), 'javascript:history.go(-1);' %>
</div>

Above mentioned code triggers back action when back button is clicked.

index.html.erb

Below mentioned code is used to hide and show the div contents.

<a href="#">LINK</a>

<div id = "test">

    <h2>Import Statements</h2>

    <%= form_tag import_xvaziris_path, multipart: true do %>
    <%= file_field_tag :file %>
    <%= submit_tag "Import" %>
    <% end %>

</div>


<script language="javascript" type="text/javascript">
$( document ).ready(function() {
    $("div#test").hide();
    $("a").click(function(event) {
        event.preventDefault();
        $("div#test").toggle();
    });
});
</script>

Now the problem is that when I click the back button, it triggers hide/show functionality and do not go backwards.

Any suggestions are most welcome.

Thank you in advance.

Full index view is as below;

index.html.erb

<div id="content_header">
    <h1 id="main_heading">XTEP Vaziri Statement</h1>

    <div id="app-back-button">
        <%= link_to image_tag("back.png",:border => 0), 'javascript:history.go(-1);' %>
    </div>

</div>

<br>

<a href="#">...</a>

<div id = "test">

    <h2>Import Statements</h2>

    <%= form_tag import_xvaziris_path, multipart: true do %>
    <%= file_field_tag :file %>
    <%= submit_tag "Import" %>
    <% end %>

</div>


<script language="javascript" type="text/javascript">
$( document ).ready(function() {
    $("div#test").hide();
    $("a").click(function(event) {
        event.preventDefault();
        $("div#test").toggle();
    });
});
</script>

Answer 1

@WesFoster has explained you the reason. But, if you remove the preventDefault(), it would still be "toggling" your div. Even though your page goes back. That's because you are selecting ALL anchor tags on your page.

A better way would be to select specific toggle link and add toggle functionality to that specific element.

$(document).ready(function() {
  $("div#test").hide();

  $("a.form-toggle-link").click(function(event) {
    event.preventDefault();
    $("div#test").toggle();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="form-toggle-link">LINK</a>

<div id="test">
  <h2>Import Statements</h2>
  ...
</div>

<div id="app-back-button">
  <a href="javascript:history.go(-1);">Another link</a>
</div>

---

Full index.html.erb:

<div id="content_header">
  <h1 id="main_heading">XTEP Vaziri Statement</h1>
  <div id="app-back-button">
    <%=link_to image_tag("back.png", :border=>0), 'javascript:history.go(-1);' %>
  </div>
</div>

<br>

<!--           |=== HERE  -->
<a href="#" class="toggle-form">...</a>

<div id="test">
  <h2>Import Statements</h2>
  <%=f orm_tag import_xvaziris_path, multipart: true do %>
    <%=f ile_field_tag :file %>
    <%=s ubmit_tag "Import" %>
  <% end %>
</div>


<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $("div#test").hide();

    //    | === HERE
    $("a.toggle-form").click(function(event) {
      event.preventDefault();
      $("div#test").toggle();
    });
  });
</script>

Answer 2

It's not going "back" because you have prevented it from doing so:

# This prevents the link from executing
event.preventDefault();

Therefore, the javascript:history.go(-1); is not executing.

Remove the preventDefault() and it will allow you to go "back" as intended.