передать значение из списка с данными-значения в запрос MySQL
У меня есть список
<ul id="my_ul">
<li data-value="1"><a href="test.php">111</a></li>
<li data-value="2"><a href="test.php">112</a></li>
<li data-value="3"><a href="test.php">113</a></li>
</ul>
Я пытался передать data-value по событию клика на запрос MySQL. Я попробовал это с JQuery, но когда я var_dump результат его NULL.
Вот как я получаю ценность
$('#my_ul').on("click", "li", function(){
$.ajax("fetch_test.php",{method:"post", data:{val:$(this).attr("data-value")}});
});
и вот fetch_test.php код файла:
function showValue(){
include_once "connect.php";
$test=$_SESSION['val'];
$query="SELECT * FROM product INNER JOIN smetka on smetka.id=product.smetka_id WHERE product.smetka_id=$test";
$result=mysqli_query($conn,$query);
$alert="";
while($row=mysqli_fetch_array($result)){
$alert .="<li data-value='$row[id]'><a href='test.php'>$row[name]";
$alert .= "</a></li>";
}
return $alert;
}
Как я могу передать data-value от li?
Решение
Вы должны связать обработчик события с элементом привязки и использовать event.preventDefault() отменить его действие по умолчанию. Ты можешь использовать .closest() пройти до li элемент.
$('#my_ul').on("click", "li a", function(e) {
//Cancels default action of anchor
e.preventDefault();
var value = $(e.target).closest('li').data("value");
console.log(value);
$.ajax({url: "fetch_test.php", method:"post", data:{val:value}});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="my_ul">
<li data-value="1"><a href="test.php">111</a></li>
<li data-value="2"><a href="test.php">112</a></li>
<li data-value="3"><a href="test.php">113</a></li>
</ul>Другие решения
использование event.preventDefault() предотвратить перенаправление на test.php
Вместо
$('#my_ul').on("click", "li", function(){
$.ajax("fetch_test.php",{method:"post", data:{val:$(this).attr("data-value")}});
});
использование
$('#my_ul').on("click", "li", function(event){
event.preventDefault();
$.ajax("fetch_test.php",{method:"post", data:{val:$(this).attr("data-value")}});
});
detector