Bootstrap data-id not passing value
Question
In my code I have
<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>
This is the data toggle link for the modal
<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>
And in alert.php I simply have
$coin = $_POST['coin'];
echo $coin;
The modal is popping up fine its just not passing the data-id value Unsure as to what Im doing wrong
More code added
<?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>
The function discussed here is loaded at the end of the document
3 answers
solution1
2 2017-11-28 14:25:08
Says bootstrap.min.js requires Jquery although jquery is loaded right above it
By default bootstrap uses jQuery slim version. Slim version do not have $.ajax and related functions. Use the jQuery full version.
Use this jQuery
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Below is the comment from the slim version with the features removed
/*! 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 */
solution2
1 ACCPTED 2017-11-28 19:34:54
After a discussion over the chat regarding the requirements, we came to a conclusion that PHP is not at all required in this case and simple jQuery does the trick:
Requirements :
If you look at this screenshot you will see a list of coin names with an alarm icon .. When the relevant alarm icon is clicked I want it to pop up a modal and just assign and echo a variable value ( which will be the coin ) BTC etc
Later on a form will be added which ideally will have that data added to a hidden field ready for submission
Solution (one approach):
Relevant code changes:
$(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');
});
solution3
0 2017-11-28 14:18:28
Since you are using document.on('click') , the $(this) may be somewhat confused. I might try $(event.target).closest('a#coin') in place of $(this) and see if it helps:
$(document).on('click', 'a#coin', function(event) {
var val = $(event.target).closest('a#coin');
console.log(val);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.