How can I extract values in html loop(mustache) when using jquery-CodePudding

all I want to do is make a call by using "idx". something like this.. alerts/1 alerts/2 alerts/3.....

{{#alerts}}
<tr name = "alerts">
    <input name = "idx" style="display : None" value="{{id}}">
    <td><input type="submit" value="start alert" name="alert-start"/></td>
    <td>ticker : {{ticker}}</td>
    <td>price : {{price}}</td>
</tr>
{{/alerts}}

So I made a Jquery

   $('input[name=alert-start]').on('click', function() { 
            _this.alertStart();
        });
},

alertStart : function() {
    var idx = $('input[name=idx]').val();

     $.ajax({
                        type: 'GET',
                        url: '/alerts/' idx,
                    }).done(function() {
                        alert('start alert');
                    }).fail(function (error) {
                        alert(JSON.stringify(error));
                    });
},

But... with this code, I can only call "alerts/1". No matter how many alerts are there... What can I do?? Please someone help.. I'm really struggling with this..

CodePudding user response：

Look into followings

<input name = "idx" type="hidden" value="{{id}}"> is the correct way of hiding any imput from appearing on page
$('input[name="idx"]').val(); is correct way to read the idx value

rest seems to be fine look for any error in console

CodePudding user response：

What you could do is pass the input you click on to the alertStart function. Then use the object to find the input[name=idx] related to the clicked input.

$('input[name=alert-start]').on('click', function() {
  _this.alertStart(this);
});

alertStart: function(obj) {
  var idx = $(obj).closest("tr").find('input[name=idx]').val();

  $.ajax({
    type: 'GET',
    url: '/alerts/'   idx,
  }).done(function() {
    alert('start alert');
  }).fail(function(error) {
    alert(JSON.stringify(error));
  });
}