Bootstrap data-id没有传递值

时间:2017-11-28 14:01:32

标签: javascript php jquery twitter-bootstrap

在我的代码中我有

<script>
    $(document).on('click', 'a#coin', function(){
    // get month
    var val = $(this).attr('data-id');

    $.post('alert.php', {coin: val}, function(data){
        console.log(data);
    });
});
</script>   

这是模态

的数据切换链接
<a id="coin" href="#" data-id="BTC" data-toggle="modal" data-target="#alertmodal"><i class="fa fa-bell fa-lg" title="Set Alert for BTC" style="color:orangered"></i></a>

在alert.php中,我只是

$coin = $_POST['coin'];
echo $coin;

模态弹出很好,只是没有传递data-id值 不确定我做错了什么

添加了更多代码

<?php
require('alert.php');
?>
   <html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script>
    $(document).ready(function(){
        $("#liveprices").load("liveprices.php");
        setInterval(function() {
            $("#liveprices").load("liveprices.php");
        }, 5000);
    });
   </script>

  </head><body>

此处讨论的功能将加载到文档末尾

2 个答案:

答案 0 :(得分:2)

  

虽然jquery正确加载,但bootstrap.min.js需要Jquery   在它之上

默认情况下,bootstrap使用jQuery slim版本。超薄版本没有$.ajax和相关功能。使用jQuery完整版。

使用此jQuery

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

以下是移除功能的超薄版本的评论

/*! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */

答案 1 :(得分:1)

关于要求的discussion over the chat之后,我们得出结论,在这种情况下完全不需要PHP,简单的jQuery可以解决这个问题:

要求

如果你看一下screenshot 您将看到带有警报图标的硬币名称列表。 当点击相关的警报图标时,我希望它弹出一个模态并只是分配和回显变量值(这将是硬币)BTC等

稍后会添加一个表格,理想情况下会将该数据添加到准备提交的隐藏字段

解决方案(一种方法):

JS FIDDLE

相关代码更改:

$(document).on('click', 'a.coin', function(){
    var val = $(this).attr('data-id'), modal = $('div#test-modal');
    console.log(val);
    modal.find('.modal-title').html('Get alerts for ' + val);

    modal.find('.modal-body .alert-notification').html('Get alert notifications when ' + val + ' breaks strong support / resistance lines');

    modal.modal('show');
});