Hide HTML div on click

Why does the button disappear when I click on it, but the status refreshes?

Javascript

$( ".refreshstatus" ).click(function(){
    $( ".navplayers" ).load('stats.php');
});

CSS

.refreshstatus{
    font-family:'Noto Sans';
    font-weight: 900;
    text-align:center;
    background-color:tomato;
}

HTML

<div class="refreshstatus">Refresh</div>

stats.php

    <?php include ("statsfunction.php"); ?><?php if( ( $Players = $Query->GetPlayers( ) ) !== false ): foreach( $Players as $Player ): ?>                                           
        <img src="https://minotar.net/avatar/<?php echo htmlspecialchars( $Player ); ?>/32"><div class="playerinfo" id="<?php echo htmlspecialchars( $Player ); ?>"><?php echo htmlspecialchars( $Player ); ?></div></img>                                                                  
    <?php endforeach; else: ?>
    No players
    <?php endif; ?>
    <p><b>Players <?php echo "<font color='green' ><?php $players_online ?></font>"  ?> online</b></p>
<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
<div class="refreshstatus">Refresh</div>
</div>  

Answer №1

It appears that your div.refreshstatus is being covered by the loaded content. To resolve this issue, consider implementing a proper button or utilizing an <a> link.

You could try something like the following:

<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
    <a href="#" class="refreshstatus">Refresh</a>
</div> 

Alternatively, you could use a button instead:

<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
    <button type="button" class="refreshstatus">Refresh</button>
</div> 

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

The perplexity regarding asynchronous functions and return statements

I'm attempting to send a request to a Web API and then return true from a function if the input is valid, or false if it's not. I need the request to be asynchronous so that the function doesn't return before the request is verified. While t ...

Invoking a Jquery function through a GridView link

After attempting various methods for hours, I am throwing in the towel. It's possible that someone here might spot what I'm missing. I have a GridView containing a Delete button. Upon clicking on the ClientClick event, a javascript function is in ...

Trouble obtaining output from chrome.tabs in browser console

Currently, I am experimenting with the browser's console and attempting to retrieve all the details of the active tabs. In order to do so, I open the browser's console and input the following: However, I encountered the following error: VM713:1 ...

A JavaScript function to separate a URL and eliminate the final segment

http://www.google.com/site!#656126.72367 Is there a way to split and remove the part after the exclamation mark in this URL using JavaScript when the page is loaded? I am looking to achieve http://www.google.com/site ...

The disappearing act of the Show/Hide Button in Sencha Touch 2.3.1: what's the

I'm running into an issue with my sencha touch app. Here is the container I have defined: { xtype: 'container', text: 'SOMETHING', height: '15%', width: '15%', ...

What could be the reason why my POST endpoint isn't able to receive this AJAX request?

I am currently working on a JavaScript function that is supposed to send JSON data to my escreve POST REST method. $(document).ready(function() { $("#idform").on('submit', function(e) { e.preventDefault(); alert($("#idform"). ...

An overflow occurs due to the grid column gap

After testing CSS display: grid, I noticed that the grid-column-gap: 10px; property is causing the parent container to break. This makes the green area in my code smaller than the grid area itself. It seems like box-sizing: border-box; doesn't have a ...

Endless Loop Issue with jQuery AJAX Request

I've been working on a project where I'm trying to display data from a Mysqli database using jQuery ajax. However, no matter how much I tweak the code, I always end up in an infinite loop. Has anyone else encountered a similar situation when maki ...

Ensuring a fixed table with vertical scrolling only, no horizontal scrolling, while scrolling in either direction

I'm working with an HTML fixed design that contains a center-aligned table with extensive data scrollable both vertically and horizontally. To address the issue of keeping column headers visible when scrolling vertically, I used jQuery's clone() ...

Create a function in JavaScript that is able to accept a variable number of objects as arguments

I have a good grasp of how to pass infinite parameters in a function in JavaScript. But what about accepting any number of objects as parameters in a function? This is my current implementation: function merge<T>(objA: T, objB: T){ return Object. ...

The key length specified in crypto.createCipheriv is not valid

After utilizing NodeJS v8.11.0, I managed to create a base64-encoded key with the following code: const secret = 'shezhuansauce'; const key = crypto.createHash('sha256').update(String(secret)).digest('base64'); //output is RE ...

"Time" for creating a date with just the year or the month and year

I am trying to convert a date string from the format "YYYYMMDD" to a different format using moment.js. Here is the code snippet I am using: import moment from 'moment'; getDateStr(date: string, format){ return moment(date, 'YYYYMMDD&a ...

Finding the index of a chosen option in Angular

Attempting to retrieve the index of the selected option from a select element using Angular. The Angular (4) and Ionic 3 frameworks are being utilized. The template structure is as follows: <ion-select [(ngModel)]="obj.city"> <ion-option ...

How to utilize the index in a foreach loop as a variable in JavaScript

I am facing an issue with using the index of a forEach loop to access an array index in my code. It seems to work when I use a number directly, but not when I try to use the index variable. Any suggestions or insights on how to resolve this? let post ...

There are two notable problems with Bootstrap 4 Tooltip. The first is that it appears when a button is clicked, and the second is that it shows up for disabled elements

I am currently experiencing an issue with my tooltip while using Bootstrap 4. In my index.html, I have the following script loaded: $('body').tooltip({ selector: '[data-toggle="tooltip"]', delay: { show: 550, hide: 0 } }); The proble ...

Is there a more straightforward alternative method to retrieve the title attribute from an input within a table cell?

Could you please help me with extracting the title attribute of the input located in the 2nd column (th) of the row with the "row_selected" class from the following table? Here's a link to the table. <table id="tabla_descuentos" class="tablesorter ...

Troubleshooting issues with Bootstrap 4 navbar dropdown functionality

I recently added a test page, but when clicking on the links, they do not direct you to the album page as intended. Instead, the page blinks and jumps quickly. To see this issue in action, visit the live test page through this link. <!DOCTYPE html>&l ...

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

When a new binding is created for the value property on an input, any manual modifications by the user no longer update the value. What happens when the binding is altered? Does regular user interaction involve key press listeners? I've modified the ...

Merging backend code (Java and Python) into HTML for seamless integration

While I have a solid background in back-end coding languages like Java and Python, the task at hand requires integrating this code into a website. The backend code comprises various methods and classes to encrypt text messages using encryption techniques ...

What impact do varying screen sizes have on the width of CSS?

Can someone explain what this CSS code actually does: .class { width: 800px; } I've noticed that on my laptop screen, the element appears to be exactly 800 pixels wide. However, when I view it on my tablet screen, it shows up as 1600 pixels wide. Th ...