alin dradici alin dradici - 1 month ago 6
jQuery Question

I am not able to send value attribute to server with ajax

$(function(){

$('.menu').on('click', (function(){
$('#box').toggle('slide');
$.ajax({
url:'fetchsubmenu.php';
data : {nume : $(this).attr('value')},
dataType : 'json'
});
});
$('.menu').on('mouseout',function(){
$('#box').hide();
});
});


I am trying to send some elements values to server in order to select some data from database but it doesn't work. With code like this, the box doesn't toggle any more. Is there a better way to do this?

$conn=mysql_connect('localhost','root','');
mysql_select_db('alinDataBase');

$nume = $_GET['nume'];

$query = "SELECT (nume) FROM submenu WHERE categorie = '$nume' ";
$result = mysql_query($query,$conn);
$output='';

while($row = mysql_fetch_array($result)){
$output=array(
"nume" => $row["nume"],
);
$records[] = $output;
}
echo json_encode($records);

mysql_close($conn);


and the html:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="foodstore.js"></script>
<script type="text/javascript" src="fetchSubmenu.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body id="body">
<div id = "aseazamenu">

<div class ="menu" value = "audio" >Audio,Video </div><br>
<div class ="menu" value = "electro" >Electrocasnice</div><br>
<div class ="menu" value = "ingrijire" >Ingrijire personala</div><br>
<div class ="menu" value = "pc" >PC</div><br>
<div class ="menu" value = "telefoane" >Tablete,Telefoane</div><br>

</div>
<div >
<table id="box">
<thead>
<tr>

</tr>
</thead>
<tbody>

</tbody>
</table>
</div>

</body>
</html>


update :
to display my results I used this:

function showObjects(obiecte){

$('#box tbody').html('');
for(var i=0; i<obiecte.length; i++){
var aparat = obiecte[i];
$('#box tbody').append(getRow(aparat));
}
}

function getRow(aparat){

var row = '<tr>'+
'<td>' + '<a href=produs.html>'+aparat.nume+'</a>' + '</td>'+
'</tr>';

return row;
}

$.ajax({
url:"fetchSubmenu.php",
dataType:'json',
catche:false
}).done(function(result){
console.debug('3) ajax done', result);
showObjects(result);
});

Answer

You need a sucess function so you can process the response from the server

html:

<div id="aseazamenu">
    <div class="menu" data-value="audio">Audio,Video</div><br>
    <div class="menu" data-value="electro">Electrocasnice</div><br>
    <div class="menu" data-value="ingrijire">Ingrijire personala</div><br>
    <div class="menu" data-value="pc">PC</div><br>
    <div class="menu" data-value="telefoane">Tablete,Telefoane</div><br>
</div>

js:

$('.menu').on('click', (function(){
    $('#box').toggle('slide');
     $.ajax({
         url:'fetchsubmenu.php';
         data : {nume : $(this).attr('data-value')},
         dataType : 'json',
         success:function(data){
         console.log(data);// process your response 
         var rows = '';
         $.each(data,function(i,v){
              rows+= '<tr><td><a href=produs.html>'+v.nume+'</a></td</tr>';
         });
         $('#box tbody').html(rows);
        }
    });
});
Comments