Implementing a JavaScript function that directs to the current page

I have set up my index page with a link that looks like this:

<li onClick="CreateUser()"> <a href="#CreateUser">CreateUser</a>  </li>

When the "Create User" list item is clicked, the main page content is populated as follows:

function CreateUser(){ 
$("#main-content").html('Welcome to user management');
}

In my index.html file, I have defined the initial main-content text for when a user first visits the page:

<div id="content">
    <div class="outer">
      <div class="inner" id="main-content">

        <div class="col-lg-12">
          <!--the index dashboard body goes here  -->
            index page content

        </div>
      </div><!-- /.inner -->
    </div><!-- /.outer -->
</div><!-- /#content -->

My goal is to have the content of the CreateUser function displayed when refreshing the page on

localhost:/example/index.html#CreateUser

So far, I have attempted to achieve this by adding the following code to my index.html page:

<body onLoad="checkRefresh();">

where "check Refresh()" is 

function checkRefresh()
{
var geturl = window.location.href;
if (geturl === 'http://localhost/example/index.html#CreateUser')
$("#main-content").html('Welcome to user management');
}

However, this method directs all other pages to this specific content upon refresh. I am seeking guidance on how to accomplish this task successfully.

Answer №1

One approach I suggest is utilizing window.location.hash along with jQuery's ready function

    $(document).ready(function(){
       if(window.location.hash === '#CreateUser')
            $("#main-content").html('Welcome to user management');
    });

Answer №2

Using window.location.hash and a switch case, I successfully implemented functionality to display content based on the clicked tab.

function hash()  
{
// This function responds to clicks on icons by displaying corresponding content based on the selected tab
switch(window.location.hash) {



 case "#CreateUser":
 $('#CreateUser').trigger('click',CreateUser());
 break;

 case "#EditUser":
 $('#EditUser').trigger('click',EditUser());
 break;

 case "#DeleteUser":
 $('#DeleteUser').trigger('click',DeleteUser());
 break;  

 default:
 window.location.hash = "";

 break;

 } 

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

How can I implement user account functionality with only JavaScript in an Angular frontend and Node.js/Express server?

Many resources I've come across utilize php or a similar language. With an Angular frontend and Node/express server code in place, but no backend yet, I'm uncertain about how to approach user sign-up. ...

Utilizing the zIndex property on a map label does not produce any impact when combined with a GeoJSON layer

Utilizing the Google map label tool, I am trying to showcase certain property from GeoJSON data on a GeoJSON layer. However, the issue arises as the layer has a dark color and the label is appearing blurry behind the GeoJSON data layer. Despite attempting ...

If a user types in Korean characters in the input field and then clicks away to any other part of the screen, the input field will automatically regain focus

jsfiddle instructions for testing: type Korean characters in the input field scroll down until the input field is no longer visible Click anywhere on the screen Expected result: the input field will come into focus with (Korean text) If the user enters K ...

Encountering issues when attempting to render a function within the render method in React

When attempting to render the gridWithNode function inside the render method, I encountered an error message stating: "Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant ...

The elegant-admin template's mobile navigation toggle is missing

I recently downloaded an admin theme and added the CSS to my Django static files. However, after doing so, the mobile toggle feature disappeared. I double-checked all the CSS and JS links in the index template, and they are correctly linked to the paths, b ...

Determine in React whether a function returns a true value, and execute the code for false regardless

I have a hunch that this is related to the concept of asynchronicity. Essentially, I'm trying to validate whether a string (an answer to a question) already exists. If it does, the page should just show a message; otherwise, it should add the new que ...

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

I'm trying to create a clickable effect using CSS only with labels and inputs. However, I am struggling to replicate the same effect on my ::after pseudo-element without moving the input outside of the label. I attempted using flexbox order property b ...

Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Forgive me if my language is not accurate, as I am still learning about programming. The forum that I visit has cluttered the page with unnecessary and glitchy images and text for a promotion. This has made the forum difficult to navigate. I was successful ...

Thymeleaf: Automating the Adjustment of Content Fragments

In my project using Spring MVC and Thymeleaf, there is a default fragment that sets up the page structure. Here's what it looks like: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/ ...

Creating a responsive design for a cropped image using CSS

Hi there! I am using a cropped image as the background for the top of my webpage, with a fixed size defined in pixels for the containing div. The issue arises when I resize the browser window, causing the image to cover most of the page instead of just the ...

Having trouble sending data to API with Node, Express, and vanilla JavaScript POST form

I am currently utilizing Node JS along with Express JS in order to implement a form submission that pushes data into the database. Below is my form structure <form action="/pokedex/register/poke_submission" method="POST"> ...

Ruby Thin Server: An Unexpected ActionView Template Error

Encountering an issue when trying to deploy my project on Amazon Web Services and accessing the domain. ActionView::Template::Error (Command 'java -jar /home/ubuntu/.rvm/gems/ruby-2.1.10@silk/gems/yui-compressor-0.12.0/lib/yui/../yuicompressor-2.4.8 ...

React virtual list module: Scrolling down through code commands

In my React Grid with Virtual Scrolling, I am facing a challenge with the lack of a "scroll to row feature." At times, I need to select a specific row programmatically and ensure that it is displayed to the user. Although I have the ID of the desired row ...

Twofold Arrow Styling in CSS

Can someone help me achieve this design: https://i.stack.imgur.com/eBQ1a.png I am attempting to create a double arrow using just one class. I have tried various methods, but nothing seems to be working for me. If anyone has any suggestions or can point ...

Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

Using Chartjs to Dynamically Update Data from Database Values

I'm encountering some difficulties while attempting to refresh my Chartjs doughnut chart with data retrieved from my database. Below is the ajax call that I've implemented successfully: $.ajax({ url: "<!--#include virtual="../include/e ...

Steps for positioning an element to the left and center of a div

I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png .body_clr { wid ...

Disappearance of logo div causes video to vanish

Hey there fellow coders! I'm facing a little issue. I'm attempting to replicate my webpage on another page, but every time I try to remove the logo, the video disappears as well. It's quite puzzling. I have the code in place, but it seems l ...

Update the content of a div element with the data retrieved through an Ajax response

I am attempting to update the inner HTML of a div after a certain interval. I am receiving the correct response using Ajax, but I am struggling to replace the inner HTML of the selected element with the Ajax response. What could be wrong with my code? HTM ...

When changing the dropdown option on a separate page in React/Next JS, all checkboxes show the clicked style as a result of utilizing useState

I have implemented checkboxes for three different categories: "Types", "Price", and "Categories". They function correctly, with data being passed to a separate checkbox component without any issues. The problem arises when I click a checkbox and then inte ...