Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed after hovering for the second time, not on the first attempt.

Below is the code snippet:

function showProfile(i)
{
    var user = $("#user_id_"+i).html();
    var business = <?php echo $this->identity()->getBusiness()->getId() ?>;
    $.ajax({
        'url': '/user/account/external/profile',
        'type':'GET',
        'data':{
            businessId:business,
            userId:user,
        },
        'success': function (data) {
            var message = "Fullname : "+data.first_name+" "+data.last_name+" Email : "+data.email;
            $("#user_id_"+i).attr('title',data.first_name+'\n'+data.last_name+'\n' +data.email); 
        },
    });
}

Here is the HTML code initiating the ajax call:

<a id="user_id_btn_'.$k.'" class="user_id_btn" onmouseover="showProfile('.$k.')" onmouseout="hideProfile('.$k.')"><span id="user_id_'.$k.'">'.$iResult[$k][4].'</span></a>

Is there a way to improve this setup so that the data shows on hover during the first attempt?

Answer №1

onmouseover="displayInfo('.$k.')"
indicates that when the mouse cursor is placed over this particular element, a specific function will be executed.
If you were to trigger an AJAX request upon hovering, it would initiate the call but not fetch any data until the browser processes the tooltip.
Upon a second hover, the information retrieved from the initial call will be displayed.
To avoid needing the onmouseover attribute, consider setting up the tooltip in advance so that it only appears when hovered over ;)

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

Configuring attributes, handling click events, and ensuring compatibility across all web

After going through several posts on the same topic, I couldn't find a definitive answer. Here is the code I am working with: // button creation onew = document.createElement('input'); onew.setAttribute("type", "button"); onew.setAttribute( ...

Dealing with errors while managing asynchronous middleware in Express

I have implemented an asynchronous middleware in express to utilize await for a cleaner code structure. const express = require('express'); const app = express(); app.use(async(req, res, next) => { await authenticate(req); next(); }) ...

What could be the reason for the error this code is generating in the HTML validator?

As I work on creating a website that must meet W3C compliance standards, I have encountered an issue with PHP tags. The validation process runs smoothly until I insert this code snippet: <?php include 'menu.html'; ?>. An error message is ge ...

Exploring alternatives to setTimeOut() for precise timing of Javascript events, especially when incorporating third party events

Here is the HTML element stack that I am working with: <div class="btn-group btnSortAssType" data-toggle="buttons"> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="m">Model </label> ...

Transforming a Microsoft Word document containing images into HTML code

Looking for a solution to extract images from a Word document, save them to a folder, re-link them back into the document and then convert it to HTML for uploading to our intranet site. Any suggestions on how this can be achieved? ...

Extracting the value of an attribute from an XML element and converting it into an HTML unordered list with

Here is an example of an xml file structure: <root> <child_1 entity_id = "1" value="Game" parent_id="0"> <child_2 entity_id="2" value="Activities" parent_id="1"> <child_3 entity_id="3" value="Physical1" parent_id="2"> ...

Leverage JSON as the primary data source for Assemble.io

Can Assemble.io be used to compile json files into HTML using templates? If so, how can I configure my gruntfile to accomplish this? Overview of My Folder Structure: Data productlist1.json productlist2.json productlist3.json productdetail1.json product ...

Complete the submission by either clicking the mouse or pressing the enter key

When submitting a form, I can do so by clicking with the mouse or pressing ENTER. An AJAX call is made to check if a designation already exists in the database. If it doesn't exist, the user can submit the form. Otherwise, the SUBMIT button will be d ...

Radio button - arranging the background image and text in alignment

I'm struggling to align my custom radio buttons alongside text. Here is an example image: Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML: label.item { display: inline-block; positi ...

Javascript unable to access SVG element content on mobile Safari

My approach to reusing certain SVG objects involves defining symbols in an SVG element at the top of my DOM. When I want to display an SVG, I typically use: <svg><use xlink:href="#symbol-identifier" /></svg> For animating SVG's, I ...

Avoiding clashes between CSS styles in web applications

As I work on developing a web application that can be embedded on external websites, one of the challenges I am facing involves constructing dialogues with their own unique stylesheets. This could potentially lead to conflicts if both my dialogue container ...

Displaying various Ajax html responses

The function $('.my-button').click(function(e) is designed to display the output of the MySQL query in display.php, presented in HTML format. While it functions correctly, since each button is looped for every post, the script only works for the ...

Error found in Twitter Bootstrap popover plugin: `this.isHTML` function is missing

I took the example directly from their website: http://jsfiddle.net/D2RLR/631/ ... and encountered the following error: this.isHTML is not a function [Break On This Error] $tip.find('.popover-title')[this.isHTML(title) ? 'html&apos ...

PHP array utilized in a dynamic dropdown menu

I am working on creating a PHP array for a select list that has dynamic options populated using JavaScript. My goal is to collect all the options selected and display them on the next page. I was wondering if there is a better way to achieve this task. C ...

Leveraging ng-model with expressions in ng-repeat in AngularJS.Would you

Currently, I am tasked with creating a form for a multilanguage content management system using angularJS. The language list has been defined within the angular scope as follows: $scope.languages = [ {id:0,'name':'English'}, {id:1, ...

How to include a javascript file in a vuejs2 project

Just starting out with the Vue.js framework and I've hit a snag trying to integrate js libraries into my project. Would greatly appreciate any assistance! By the way, I attempted adding the following code to my main.js file but it didn't have th ...

Empty nested Map in POST request

I am currently working on a springboot application with a React/Typescript frontend. I have defined two interfaces and created an object based on these interfaces. export interface Order { customer_id: number; date: Date; total: number; sp ...

Constructing a table using an array in React

I need assistance with creating a table based on salary data for different sectors. I have an array with example data that includes currencies and sectors. const data=[ ['Euro','Tech'], ['USD','Tech'], ['GBX&apo ...

Is there a way to conceal the parameters in the PHP GET method?

How to convert PHP GET method URL to a cleaner format? example.com/example.php?name=45 to example.com/example.php/45 Is it possible to achieve this using the .htaccess file? ...

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

Recently stumbled upon a fascinating website called "3D Meninas", showcasing an impressive 3D animation effect. Upon examining the HTML code, I noticed there was no mention of any <script> tags or events, leading me to believe that it operates solely ...