ajax call не отправляет данные правильно

Question

Что-то не так с тем, как я использую вызов ajax.

Когда я помещаю вызов ajax внутри блока, он выполняет функцию ошибки в обратном вызове ajax. Когда вызов ajax перемещается за пределы блока, переменная подкатегория, переданная на сервер, не определена.

var that = this; 
var subCate ='' ; 
var tr = $('#tbl').find('tr'); 

//My block 
tr.bind('click', function(event) { 
    var values = ''; 
    tr.removeClass('highlight'); 
    var tds = $(this).addClass('highlight').find('td'); 
    subCate = tds.find('#myid').text(); 
    alert(subCate); 


     //Tried moving it out of the block but not much of help 
     $.ajax({ 
      url: '/playground', 
      type: 'POST', 
      data: { id: subCate}, 
      success: function(data){ 
       alert("Sub category recvd"); 
       console.log("successs"); 
      }, 
      error: function(jqXHR){ 
       console.log("failed"); 
       alert("failed"); 
      } 
     }); 
    }); 

    //Ajax call moved here 

Вот код Node.js сервер:

app.post('/playground', function(req, res) { 
     debug("Inside post(/playground) ",req.body.id); 
     res.send('ok', 200); 
    }); 

Привет Вот фрагмент HTML-таблицы, который даст представление о том, что делает код JQuery

<div id="category-container"> 
     <div id="category-form"> 
     <h1></h1> 
     <p id="sub1" class="subheading">Select a category</p> 
     <!--hr--> 
     <div style="margin:20px" class="container"> 
      <table id="tbl" class="table table-bordered table-striped"> 
      <thead> 
       <tr> 
       <!--th(style='width:40px') #--> 
       <th style="width:180px">Name</th> 
       <th style="width:200px">Location</th> 
       <th style="width:180px">Username</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td> 
        <div id="myid"><a id="item" href="/playground/:0">Electronics</a></div> 
       </td> 
       </tr> 
       <tr> 
       <td> 
        <div id="myid"><a id="item" href="/playground/:1">Real Estate</a></div> 
       </td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     </div> 
    </div> 

Спасибо заранее, ребята!

Answer 1

Добавить event.preventDefault() в верхней части вашей привязки.

Кроме того, я рекомендую изменения события привязки к следующему:

$('#tbl').on('click', 'tr', function(event) { 
    event.preventDefault(); 
    // your code 
});