CODEWITHSUNDEEP
javascriptphphtmltwitter-bootstrappopover
toblerone
toblerone

Reputation: 57

Can't get a Bootstrap popover to work within PHP

A number of others have asked a similar question, and I've looked at all the answers, but I'm still a little lost..

I'm trying to generate a popover within some PHP-generated html. I can get the popover to work fine in JS, but when I try to dynamically generate the popover code through PHP, it does not work.

It sounds like it has something to do with making sure my popover code is loaded after everything has loaded into the DOM, but I've tried a bunch of permutations on that, and I'm having no luck. Any help would be greatly appreciated.

NOTE: I'm told I really should be using JQuery to do a lot of this, but I'm still learning, and I'm working my way to that.. :)

Simplified HTML file: 

<script>
    function showUser(p) {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                }
            };

            xmlhttp.open("POST","getuser.php?p=" + p.value,true);
            xmlhttp.send();
            return false;
        }
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });

</script>
</head>

<body>
<div id="formBox" class="container">
    <form method="POST" onsubmit="return showUser(this.spnd_total)">
        <input id="spnd_total" name="spnd_total" placeholder="10" type="number" autofocus>
        <input type="submit" value="Calculate!">
    </form>
</div>

<div id="txtHint" class="container">
Popover here...
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">This popover works!</a>
</div>

</body>
</html>

Simplified PHP file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<?php

echo "<a href=\"#\" data-toggle=\"popover\" title=\"Popover Header\" data-content=\"Some content inside the popover\">This one does not.</a>";

?>
</body>
</html>

Upvotes: 0

Views: 510

Answers (1)

shukshin.ivan
shukshin.ivan

Reputation: 11340

First, why do you have html wrapping and heading in a simple php file, which just echoes a piece of html?

Second, you have to execute popover() plugin after every DOM change. New elements, that was added by an ajax call, are not aware of the plugin events.

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       document.getElementById("txtHint").innerHTML = this.responseText;
       $('[data-toggle="popover"]').popover();
    }
};

Upvotes: 1

Related Questions