0

I use this foreach:

foreach (var item2 in RItem.GetChildItems(item.ID_Ca))
{
    <div id="@idc" class="accordion-collapse collapse" aria-labelledby="headingTwo2" 
         data-bs-parent="#accordionExample">
        <div class="accordion-body" style="background: white; padding: 5px; padding-left: 20px;">
            <button id="getthis" data-id="@item2.Name_Ca"  type="button" onclick="Search()" 
                    style=" color: #0028ff; font-size: 14px;">
                @item2.Name_Ca
            </button>
        </div>
    </div>
}

When the button is clicked, I want to send the data-id of the button to the controller through jQuery, the problem is that every time I click on the button, the only data that is sent to the controller is only the first record.

<script>
    function Search() {
        jQuery('.loading').fadeIn();

        $.ajax({
            url: 'SearchProjectsItems',
            type: 'post',
            datatype: 'json',
            data: {
                Cat: $(document.getElementById('getthis')).attr('data-id')     
            },
            error: function (err) {
                alert(err.Status + "" + err.StatusText);
            }
        }).done(function (data) {
            $('#Search_CU').html(data);
            jQuery('.loading').fadeOut();
        });
    }
</script>

I don't know what to do

3
  • 2
    I think this $(document.getElementById('getthis')) will always match the first button, right? Because as-is, all N of your Buttons will have that id. Maybe you should pass a unique id to the Search function or otherwise make sure you reference the correct button instance? Unfortunately, I don't use jQuery and cannot tell, what would be the canonical way to do that.
    – Fildor
    Commented Jul 5 at 12:12
  • That happens because you aren't passing the value of the data-id that corresponds to the button in the Search function. Try adding onclick="Search(this.data-id)" and change your function as Search(data-id) and pass that in your Ajax request.
    – Izanagi
    Commented Jul 5 at 12:14
  • 1
    ^^ Right. You are calling Search() which looks up an element and reads one of its properies. Why not pass the value of that property as an argument to the function to begin with?
    – Fildor
    Commented Jul 5 at 12:17

2 Answers 2

0

Use this identifier. this keyword refers to the current execution of code.

in razor code pass this prameter,

onclick="Search(this)"

in JQuery Search function receive clicked button element.

<script>
    function Search(btnElement) {
        ...
            data: {
                Cat: $(btnElement).attr('data-id')     
            }
        ...
    }
</script>
-1

change your html code button to onclick="Search('@item2.Name_Ca')" . other wise use angular js. $scope.arrayname[] and fill the array and then send the data. Another method is use $scope.modelList and fill the list using angular foreach. then send to controller. controller function input parameter should be same data model.

2
  • where are you seeing angular anywhere in OPs question? Commented Jul 6 at 12:24
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jul 8 at 6:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.