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>

Uzbekjon · Accepted Answer · 2016-06-24 17:36:39Z

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>

edited Jun 24, 2016 at 17:36

answered Jun 24, 2016 at 14:59

Uzbekjon

11.8k5 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Yaseen Over a year ago

Thanks alot, but i am unable to get the result as expected. If paste my index.html.erb full view so that you could guide what will go where.

Muhammad Yaseen Over a year ago

Excellent! Thank you very much.great job!

Wes Foster · Accepted Answer · 2016-06-24 14:49:08Z

0

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.

answered Jun 24, 2016 at 14:49

Wes Foster

8,9005 gold badges45 silver badges64 bronze badges

1 Comment

Muhammad Yaseen Over a year ago

Thanks Sir, It is working but when I click on LINK , it functions properly at the same time it takes me to top of the page.

Collectives™ on Stack Overflow

Javascript code not working properly in rails

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related