Assign characteristics to the button, however it will only activate after being clicked twice

The button I created with some bootstrap attributes is not working properly on the first click. To resolve this, I initially called the function in onload and then again on the button click. However, I am now unable to do so and am seeking alternative solutions. Is there another way to solve this issue?

To view my code, please visit: https://jsfiddle.net/a22177861/x381z0h6/6/

Here is an excerpt of my HTML:

 <button type="button" class="btn btn-warning" onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button>

And here is a snippet of my JS:

function PopOver(myObj, mgr, Adate, Vdate) {
        $(function () {
            myObj.setAttribute("data-container", "body");
            // Additional setAttribute calls
            $("[data-toggle='popover']").popover(); // Call popover()
        });
    }

Your assistance would be greatly appreciated!

javascriptbootstrap-4

Answer №1

When you use the code 

$('[data-toggle="popover"]').popover()
, it initializes the popover, requiring you to click twice to trigger it.

Bootstrap's popover documentation explains:

This function reveals an element's popover but returns before the actual display of the popover (i.e., before the shown.bs.popover event occurs). This is known as a "manual" triggering of the popover. Popovers with both title and content being zero-length will never be shown.

To manually trigger the popover, you can use .popover('show').

Here's how you can achieve this:

function PopOver(myObj, mgr, Adate, Vdate) {
  myObj.setAttribute("data-container", "body");
  myObj.setAttribute("data-toggle", "popover");
  myObj.setAttribute("data-placement", "bottom");
  myObj.setAttribute("data-html", "true");
  myObj.setAttribute("data-trigger", "focus");
  myObj.setAttribute("title", "otherInfo");
  myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);

  $("[data-toggle='popover']").popover('show');
}

Answer №2

I recommend improving the readability of your code by making it more user-friendly. Instead of using JavaScript to dynamically set content, consider writing some static elements directly in HTML.

    <button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-html="true" title='otherInfo' onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button>

function PopOver(myObj, mgr, Adate, Vdate) {
  myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);
  $("[data-toggle='popover']").popover('show');
}

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

Transferring information between Vue.js components via data emissions

Greetings from my VueJS Table component! <b-table class="table table-striped" id="my-table" :items="items" :per-page="perPage" :current-page="currentPage" :fields="fields" @row-clicked="test" lg >< ...

javascriptvue.js

Ways to showcase the content of a page once the controller variables have been set

As someone who is just starting out with AngularJS and web development, I am curious to know if there is a way to delay the display of a page until after all of the controller's $scope variables have been initialized. Most of my $scope variables are c ...

javascriptnode.jsangularjsexpress

Regular expression for precise numerical values of a specific magnitude (any programming language)

I have been searching for a solution to what I thought was a common problem but haven't found one yet. What I need is a regular expression that will fail on a specific number of significant figures (a Max), but pass for fewer than the Max. It should ...

javascriptregexregex-lookarounds

Is forwardRef not explicitly exported by React?

UPDATE: The issue with the code implementation below has been resolved. It was discovered that the error was caused by a react-redux upgrade, as redux now requires functional components instead of class components. import React, { forwardRef } from ' ...

javascriptreactjs

Using NodeJS to Send JSON Data via HTTP POST Request

Issue with Sending JSON Data via Http Post in NodeJS const http = require('http'); const fs = require('fs'); var options = { hostname: 'www.postcatcher.in', port: 80, path: '/catchers/5531b7faacde130300002495&apo ...

javascriptjqueryajaxjsonnode.js

The meshes in my Unity game appear flipped after I import them from 3ds Max with skinning applied

After bringing my meshes from 3ds MAX to Unity with skinning, I've noticed that they appear inverted in-game. Both the mesh and normals seem to be reversed, giving them an eerie, ghost-like appearance. Interestingly, disabling the skin option resolv ...

javascriptc#unity-game-engine3dsmax

What is the necessity for an additional item?

After exploring the Angular Bootstrap UI and focusing on the $modal service, I came across an intriguing discovery. In their demo at 'http://plnkr.co/edit/E5xYKPQwYtsLJUa6FxWt?p=preview', the controller attached to the popup window contains an i ...

javascriptangularjs

sending the properties from the menu component to the dish details

Having trouble with a react.js app I'm working on that involves rendering dish cards. The dish object is always null when passed as props from MenuComponent to DishDetail, resulting in nothing being displayed on the screen. Can someone please assist m ...

javascriptreactjs

How can I format the input type number with a thousand separator as 123.456.789?

When entering the number 123456, I want to see 123.456 displayed in the input field. I tried using my code, but it displays 123,456 instead. Is there a way to ensure that the thousand separator is a dot and not a comma? You can view my code at this link ...

javascripthtmlnumbers

Tips on aligning three divs horizontally within a container while maintaining a height of 100%

UPDATE: The alignment has been corrected by adding floats. However, the height still doesn't fill 100%. Check out the new look: Image Link In my footer container, I want to arrange 3 columns (colored green, white, and red for clarity). Currently, the ...

javascriptjqueryhtmlcss

Can you explain the meaning of the ?. operator in JavaScript?

While using react-hook-form, I encountered the ?. operator. Can you explain its meaning? Here's an example of how it works: <span>{errors?.name?.message}</span> The errors variable is obtained from useForm() by destructuring, as shown bel ...

javascriptreactjsreact-hook-form

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...

javascripthtmlseleniumselenium-webdriver

Looking to create a format for displaying short comic strips in a grid pattern

I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...

javascripthtmlcss

What methods can I use to adjust my HTML content once I have parsed my JSON file?

<script type="text/javascript"> window.alert = function(){}; var defaultCSS = document.getElementById('bootstrap-css'); function changeCSS(css){ if(css) $('head > link').filter(':first').replaceWit ...

javascriptjqueryjson

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...

javascripthtmljquerycss

Is Angular Translate susceptible to race conditions when using static files for multi-language support?

Currently utilizing angular translate with the static files loader for implementing multiple languages in my project. However, I've encountered a problem where the loading of language files sometimes takes longer than loading the actual view itself, l ...

javascriptangularjsangular-translate

Tips for receiving dual return values from an AJAX request

I am sending an array of table IDs to retrieve the table numbers associated with those IDs from the database. I need to add up all the default seats for each table ID and return the total. JAVASCRIPT : function showUser(str) { if ...

javascriptphpjqueryajax

Validation of multiple textboxes can be achieved by utilizing either JavaScript or Angular 1

How can I implement a validation in Angular 1 or JavaScript that will enable the submit button only when there is text in any of the 3 textboxes? If no text is present, the button should be disabled. Below is the code snippet: First name: <br> < ...

javascripthtmlangularjs

Putting retrieved data from firebase into an array using Angular and Firebase format

Hey everyone, I'm currently facing an issue with formatting my Firebase data into an array. Below is the service where I am retrieving data from Firebase: File name: subcategory.service.ts export class SubcategoryService { subcategoryRef: Angula ...

javascriptarraysangularjsfirebase-realtime-databasejavascript-objects

Looking to optimize this code? I have three specific tags that require reselection within a given list

for (var i=0; i<vm.tags.length; i++) { if (selectedTags[0]) { if (vm.tags[i].term_id === selectedTags[0].term_id) { vm.tags[i].border1 = true; } } if (selectedTags[1]) { if (vm.tags[i].term_id === selecte ...

javascriptloopsfor-loop