What is the best way to navigate to a tab on a different page using rails?

Is there a way to redirect to a specific tab on another page using Rails? I am facing an issue where clicking on a button on the first page redirects me to the default tab (basic) of the destination page. However, I would like it to redirect to the notification tab instead.

Here is the view of the first page:

.button
    %a{:href => edit_student_path(current_student)}
        settings 

And here is the view of the tab page:

%ul.nav.nav-pills
    %li.active
        %a{"data-toggle" => "tab", :href => "#student-basic", :role => "tab"} basic-info
    %li
        %a{"data-toggle" => "tab", :href => "#student-notification", :role => "tab"} notification


.tab-content
    #student-basic.tab-pane.active
        = render 'basic_info_form'
    #student-notifications.tab-pane
        = render 'notifications_form'

Answer №1

To specify the CSS class active as a parameter, you can follow this example:

View with button:

.button
    %a{:href => edit_student_path(current_student, tab: "notification")}
        settings 

Tabs:

%ul.nav.nav-pills
    %li{ class: ( "active" if params[:tab] == "tab" ) }
        %a{"data-toggle" => "tab", :href => "#student-basic", :role => "tab"} basic-info
    %li{ class: ( "active" if params[:tab] == "notification" ) }
        %a{"data-toggle" => "tab", :href => "#student-notification", :role => "tab"} notification

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

linking together javascript methods

After spending over an hour searching on SO, I couldn't find a similar case to mine. I have developed a web app using Ruby on Rails. The app consists of a form with multiple fields and buttons that trigger various actions. Here are some examples (my ...

When utilizing Express, only the index.html page is rendered, all additional pages

I've set up an express app specifically for serving static HTML files. let express = require('express'); let path = require('path'); let cookieParser = require('cookie-parser'); let logger = require('morgan'); ...

Can a fixed form of `instanceof` be used?

Is there a static equivalent of instanceof? For example, instead of using: obj1 instanceof Type is there something like: TypeA instanceof TypeB? I searched for information on this topic but couldn't find anything, so I came up with the following solu ...

Making dynamic changes to AngularJS directive templates during runtime

In my quest to create an input directive that can handle multiple types of inputs (such as Interval (min-max), DateTime, Number, Text...), I've encountered a challenge. It's crucial that when the user changes the data type, the corresponding inpu ...

What is the best way to incorporate a rectangle or arrow into my canvas design?

Looking for a way to enhance my html canvas wind direction code, here is how it currently looks: var x, y, r, ctx, radians; ctx = window.compass.getContext("2d"); radians = 0.0174533 * (10 - 90); x = ctx.canvas.width / 2; y = ctx.canvas.height / ...

What are the most efficient methods for extracting information from tables on Wikipedia and converting the data and links into JSON format?

I am relatively new to web development and have a question regarding extracting data from Wikipedia. I am working on a personal web application that will catalogue past UFC events. Unfortunately, I have not been able to find an open-source API with detai ...

Having difficulties including the Stack Overflow website within an iframe

I've been attempting to embed the Stack OverFlow website into an HTML page using an iFrame, but I'm running into some issues. Oddly, when I tried embedding my other two websites, they displayed correctly, but Stack OverFlow is not showing up on m ...

reveal concealed section and seamlessly glide to specified location inside the secret compartment

I have implemented a feature on my website where hidden divs are revealed one at a time, with the screen scrolling to display each specific div. While this code functions well, I am now looking to enhance it by opening the hidden div and smoothly scrolling ...

Modification of webpage content when URL hash changes

I am experiencing an issue with my script. Whenever I type something with a spacebar, like google map, it automatically changes in the input box to google+map, which is not ideal. Additionally, when I try to submit again, it further complicates the situati ...

Tips for inheriting and overriding controller methods in AngularJS with Java as the base language:

I have a simple controller and I want to create a new controller that is very similar to it, but without copying too much code. angular.module('test').controller('parentController', parentController); parentController.$inject = [' ...

Use SheetJS to customize header order using json_to_sheet

I am currently using SheetJS within the Angular framework to export JSON data as an .xlsx file. An example of the JSON structure I am working with is shown below: [{ "ID": "E111", "Name": "John", "LastL ...

Are Lazily Instantiated Singletons a Thing in AngularJS?

After browsing through the AngularJS documentation, I came across an interesting detail about AngularJS services: AngularJS lazily instantiates services, meaning they are only created when a component in the application requires it. Services in AngularJ ...

Ensure that at least one checkbox is selected by using custom validation in jQuery

My form has checkboxes for gender (male and female) and a set of checkboxes for days of the week (Monday to Sunday). I need to set validation rules so that at least one gender and one day is selected. Below is my jQuery code: $(document).ready(function( ...

Using Jquery Ajax to Send Data with ASP Core ActionResult

Is there a way to successfully submit a form data using Jquery Ajax in Asp Core? AJAX CODE if (contactForm.valid() == true) { var formData = new FormData(); formData.append("Name", contactForm.find("input[name='Name']& ...

Is there a way for me to create a button in Javascript that will mute the background music when clicked?

Currently, I am working on my website () to implement a functional mute button. The goal is for the mute button to silence the background music that is currently playing. How can I achieve this functionality when the image is clicked? Here is the HTML co ...

What causes my Next.js project to break when I change app.js to app.tsx?

I have been working on configuring the Next.js framework with TypeScript, and I successfully converted my pages/index.js file to pages/index.tsx without any problems. However, when I changed pages/_app.js to pages/_app.tsx, the project started throwing an ...

Injecting resolve into Angular controller and encountering undefined value in logging operation

My setup involves the following: .state('posts', { url: '/posts/{id}', templateUrl: 'posts.html', controller: 'postsController as postsCtrl', resolve: { post: getSinglePostWrapper ...

Automatically bundle and release an NPM package using the libnpm library

My goal is to automate publishing to NPM within my CI/build system. I came across libnpmpublish, which appears to be the right tool for the job. However, it clearly states that it does not package code into a tarball, even though the publish API requires a ...

Anticipate the moment when a variable will shift

Before proceeding to the next step, I have an observable that must be executed. export class MyExample implements OnInit { flag; constructor(private myService: MyService) { } myFunc() { flag = 0; this.myService.subscribe(data ...

Using jQuery's .load() method is like including a file in a

Currently, Im working on revamping a company website that comes equipped with its very own CMS. Unfortunately, we are restricted from accessing the server configuration and FTP, which means I am limited to running only client-side files like HTML/CSS/J ...