CODEWITHSUNDEEP
jquerylaravel
TheBAST
TheBAST

Reputation: 2736

How to display the data to table ajax

I have this ajax function and it

$("#save").click(function (e) { 
        e.preventDefault();
        $.ajax(
        {
            type: 'POST',
            url: '{{ route('addSocialWorker') }}',
            data: 
            {
                'name': $('#name').val(),
                'email': $('#email').val(),
                'password':$('#password').val(),
                'city_id': $("#city_id" ).val(),
                '_token': '{{ Session::token() }}'
            },
            success: function (data){
                console.log(data);
            },

            error: function(res)
            {
                if (res.status == 422) {
                    var data = res.responseJSON;

                    for (let i in data) {
                        showValidationErrors(i, data[i][0])
                    }
                }
            }
        });
    });

Now, i want to display the newly inputted data into my table without loading the page. And i don't know how to do that in jquery. I don't know what to write in my success function. I'm really new to jquery and its functions and my time is running. Don't have time to read about jquery and stuff.

this is my table

<tbody id="usersTable">
                                    @foreach($data as $item)
                                    <tr class="item{{$item->user_id}}">
                                        <td>{{$item->Uname}}</td>
                                        <td>{{$item->email}}</td>
                                        <td>{{$item->city_name}}</td>
                                        <td>
                                            <button class="edit-btn btn btn-warning btn-anim" data-id="{{$item->user_id}}" data-Uname="{{$item->Uname}}" data-email="{{$item->email}}" data-city_name="{{$item->city_name}}"><i class="fa fa-pencil-square-o"></i><span class="btn-text">Edit</span></button>
                                            <button class="delete-btn btn btn-danger btn-anim" data-id="{{$item->user_id}}"><i class="fa fa-trash-o"></i><span class="btn-text">delete</span></button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>

now i can add it already and it works and the validation but the problem is the displaying to table without refreshing the page.

Upvotes: 2

Views: 89

Answers (1)

Achraf Khouadja
Achraf Khouadja

Reputation: 6279

Try this it should word, i would recommend using Vue.js , it makes this easier once you get along with it

var data = {
                'Uname': 'azezaeaz',
                'email': 'khhhh',
                'user_id':'1',
                'city_name': 'TUNIS',
            }; // TEST DATA (the will simulate data came from your php)

$("#save").click(function (e) { 
  
        $("#usersTable").prepend("<tr class='item" +data.user_id +"'><td>" + data.Uname + "</td><td>" + data.email + "</td><td>" + data.city_name + "</td><td><button class='edit-btn btn btn-warning btn-anim' data-id='" + data.user_id + "' data-Uname='" + data.Uname + "' data-email='" + data.email + "' data-city_name='" + data.city_name + "'><i class='fa fa-pencil-square-o'></i><span class='btn-text'>Edit</span></button><button class='delete-btn btn btn-danger btn-anim' data-id='" + data.user_id + "'><i class='fa fa-trash-o'></i><span class='btn-text'>delete</span></button></td></tr>");



        });
 
td {
  width : 20%; // nvm this
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody id="usersTable">
   <tr class="item{{$item->user_id}}">
      <td>test</td>
      <td>aze</td>
      <td>zaea</td>
      <td>
         <button class="edit-btn btn btn-warning btn-anim" data-id="{{$item->user_id}}" data-Uname="{{$item->Uname}}" data-email="{{$item->email}}" data-city_name="{{$item->city_name}}"><i class="fa fa-pencil-square-o"></i><span class="btn-text">Edit</span></button>
         <button class="delete-btn btn btn-danger btn-anim" data-id="{{$item->user_id}}"><i class="fa fa-trash-o"></i><span class="btn-text">delete</span></button>
      </td>
   </tr>
</tbody>
</table>
<input type="button" id="save" value="test">

Upvotes: 1

Related Questions