1

ajax 呼び出しの使用方法に問題があります。

ブロック内に ajax 呼び出しを配置すると、ajax コールバックでエラー関数が実行されます。ajax 呼び出しがブロックの外に移動すると、サーバーに渡される変数subcateが未定義になります。

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>

よろしくお願いします！

4

1 に答える 1

0

event.preventDefault()バインドの先頭に追加します。

また、イベント バインディングを次のように変更することをお勧めします。

$('#tbl').on('click', 'tr', function(event) {
  event.preventDefault();
  // your code
});
于 2013-09-11T23:15:34.883 に答える