dpblwmh5218 2017-07-11 11:15
浏览 74
已采纳

php-ajax调用json数据并将该数据传递给jguage js for widget以显示该值

here i want to pass ajax called value to the another script(widget script) in same file. i have successfully done ajax call and justgage widget on a single page. i can successfully print the data got from ajax call using php echo. instead showing the values using echo, i want to use that same value for justgage widget to show. here i am sharing my code. data.php file is here

<?php
    $selm=1;
?>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/raphael-2.1.4.min.js"></script>
        <script src="js/justgage.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
        <style type="text/css">
            #divDownloadOuter{
                width: 55%;
                height:50%;
                clear: both;
            }
        </style>
        <script type="text/javascript">
            $(window).load(function () {
                myFunction();
            });
        </script>
        <script>
            var d;
            function myFunction() {
                setInterval(function(){
                    $.ajax({
                        url: "datavalues.php?id=1&selm=<?php echo $selm ?>",
                        success: function(result){
                            ip = JSON.parse(result);
                            sr = parseFloat(ip["srno"]);
                            document.getElementById("demo1").innerHTML = sr;
                            document.getElementById("demo2").innerHTML = sr;
                        }
                    });
                }, 2000);
            }
        </script>
    </head>
    <body>
        <div id="divDownloadOuter">
            <div id="jgDownload1"></div>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", function(event) {
                var gD1 = new JustGage({
                    id: "jgDownload1",
                    value: 27,
                    decimals: 2,
                    min: 0,
                    max: 100,
                    valueFontFamily: "Georgia",
                    valueFontSize: "150px",
                    valueFontColor: "orange",
                    label: "%",
                    labelFontsize:"10px",
                    labelFontColor:"white",
                    width: 100,
                    height: 100,
                    relativeGaugeSize: true,
                    gaugeWidthScale: 0.8,
                    levelColors: [
                        "#E63454",
                        "#AC001F",
                        "#F6AD37",
                        "#B87200",
                        "#24A081",
                        "#007759",
                        "#026071",
                        "#015C71"
                    ],
                    pointer: true,
                    counter: true,
                });
            });
        </script>
        <h3>value using element by id</h3>
        <span id="demo1"></span>
        <?php echo "<span id=\"demo2\"></span>"; ?>
    </body>
</html>

datavalues.php file is here

<?php
//all values for selected meter encoded and retrive from dashboard 2

    $con=mysqli_connect("localhost","root","digi","gmbg");
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    if (isset($_GET['selm']) ){
        $selm=$_GET['selm'];
        $res3 = mysqli_query($con ,"SELECT * FROM meterstatus where `mtr_no` LIKE '$selm' and did='kirti' order by  srno desc limit 1");
        $row3= mysqli_fetch_assoc($res3);
        echo json_encode($row3);
    }
    mysqli_close($con);
?>

Here i can easily show values in my data.php file with "span id" and "php echo" method. but i want to use that value in justgage widget to show. but i cant pass this ajax call data value to the another js(justgage). i have tried all method but its showing "undefined". Is there any solution regarding this?

  • 写回答

1条回答 默认 最新

  • dongxian3418 2017-07-11 11:27
    关注

    use refresh function gD1.refresh(40) For example i just used setTimeout instead of ajax .

    ajax : add this code in ajax success part

    refresh function gD1.refresh(response_data)  // response_data is dynamically 
    

    var gD1 ='';
    
    document.addEventListener("DOMContentLoaded", function(event) {
                     gD1 = new JustGage({
                        id: "jgDownload1",
                        value: 27,
                        decimals: 2,
                        min: 0,
                        max: 100,
                        valueFontFamily: "Georgia",
                        valueFontSize: "150px",
                        valueFontColor: "orange",
                        label: "%",
                        labelFontsize:"10px",
                        labelFontColor:"white",
                        width: 100,
                        height: 100,
                        relativeGaugeSize: true,
                        gaugeWidthScale: 0.8,
                        levelColors: [
                            "#E63454",
                            "#AC001F",
                            "#F6AD37",
                            "#B87200",
                            "#24A081",
                            "#007759",
                            "#026071",
                            "#015C71"
                        ],
                        pointer: true,
                        counter: true,
                    });
                });
                
                setTimeout(function(){ gD1.refresh(74);  },1000);
    <script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
    <script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>
    <body>
        <div id="divDownloadOuter">
                <div id="jgDownload1"></div>
            </div>
       
    </body>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 spring后端vue前端
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题