Bootstrap with JS, result of a function in popover

Question

This is the code to get temperature of London from weather API. It works correctly (images are local hence won't show):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/body.css" />

        <meta name="msapplication-tap-highlight" content="no" />
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
        <script language="javascript" type="text/javascript">
        <!--
            function foo(callback) {
                $.ajax({
                url: "http://api.openweathermap.org/data/2.5/weather?q=London",
                dataType: 'JSON',
                success: callback
                });
            }

            function myCallback(result) {
                var temp = JSON.stringify(JSON.parse(result.main.temp));
                var Kelvin = 272;
                var Centigrade = Math.round(temp-Kelvin);

                if (Centigrade <= 25) {
                    //alert("Temperature : "+Math.round(Centigrade)+" C");
                    var temp = document.getElementById("temp");
                    temp.style.fontSize = "20px";
                    temp.innerHTML = Centigrade+"° C , Cool&nbsp;&nbsp;&nbsp;"+"<img src= \"img/Tlogo2.svg\"/>";
                    //document.getElementById("temp").innerHTML = Centigrade+"° C , Cool&nbsp;&nbsp;&nbsp;"+"<img src= \"img/Tlogo2.svg\"/>";
                }
                else if (Centigrade > 25) {
                    var temp = document.getElementById("temp");
                    temp.style.fontSize = "20px";
                    temp.innerHTML = Centigrade+"° C , Cool&nbsp;&nbsp;&nbsp;"+"<img src= \"img/Tlogo3.svg\"/>";
                    //document.getElementById("temp").innerHTML = Centigrade+"° C , It's Hot !!! "+"<img src= \"img/Tlogo3.svg\"/>";
                }
            }
        </script>

        <div style="position: absolute; left: 30px; top: 75px;"> 
            <img src="img/temlogo.svg" width="35" height="35" onclick="foo(myCallback);"/>
        </div>

        <p id="temp"></p>
    </body>
</html>

From tutorials point and Bootstrap website I have tried to use a dissmissable popover. It works fine too:

<!DOCTYPE html>
<html>

    <body>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(function() {
                $("[data-toggle='popover']").popover();
            });
        </script>
    </body>
    <a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content="40C">Temperature</a>
</html>

Now what I am trying is I want get temperature as popover element. ie. if I click on image button, it should trigger temperature acquiring function and then show the temperature and the image related to that in popover box. So here is two challenge I am facing.

Setting a image instead of the red button and then temperature data
List item and the image ie. Tlogo2.svg to be appeared in that pop over box.

So can anyone suggest how to set that?

EDIT : I have tried this to attain what I said. but nothing happened. The code goes here:

<!DOCTYPE html>
<html>

<body>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script language="javascript" type="text/javascript">

//Function
function foo(callback) {
    $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    dataType: 'JSON',
    success: callback
    });
}

function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}

        $(function() {
            $("[data-toggle='popover']").popover(myCallback(result));
        });
    </script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content="40C">Temperature</a>

</html>

I am adding some addition. SO that people don't get confuse and see what really I want. I want the result of the function ie temperature is 23 C to that pop over element The code:

<!DOCTYPE html>
<html>

<body>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script language="javascript" type="text/javascript">

//Function

function foo(callback) {
    $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    dataType: 'JSON',
    success: callback
    });
}

function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}


$(function() {
                $("[data-toggle='popover']").popover(myCallback);
            });
    </script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content= "myCallback(result);" >Temperature</a>

</html>

So let me know where I need to change.

check this may help you http://stackoverflow.com/questions/8130069/load-a-bootstrap-popover-content-with-ajax-is-this-possible — rjdmello, Nov 12 '14 at 08:48

score 0 · Answer 1 · answered Nov 12 '14 at 08:05

Maybe you can do popover on hover, here is example

  $(function() {
      $('[title]').attr("data-rel", "tooltip");
      $("[data-rel='tooltip']")
          .attr("data-placement", "top")
          .attr("data-content", function() {
              return $(this).attr("title")
          })
          .removeAttr('title');


      var showPopover = function() {
          $(this).popover('show');
      };
      var hidePopover = function() {
          $(this).popover('hide');
      };
      $("[data-rel='tooltip']").popover({
          trigger: 'manual'
      }).click(showPopover).hover(showPopover, hidePopover);

  });

Use it like this

 <a href="#" tabindex="0" class="btn btn-lg btn-danger" title="40c">Temperature</a>

Not related to my solution. – ninja.stop Nov 12 '14 at 11:00 — ninja.stop, Nov 12 '14 at 11:00

Bootstrap with JS, result of a function in popover

1 Answers1