CODEWITHSUNDEEP
javascriptjqueryajaxlaraveltabledit
AlenBer
AlenBer

Reputation: 748

How to update table row with jQuery-Tabledit and Laravel

In Laravel I need to specify the row ID as part of the request URL in order to update it, for example: http://localhost/contacts/16

The problem is when using jQuery-Tabledit, as it requires an URL while initializing (on page load).

So the question is, how to set the current row ID as URL in jQuery-Tabledit?

HTML:

<table class="table table-striped table-bordered" id="contactsTable">
<thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th class="tabledit-toolbar-column"></th>
    </tr>
</thead>
<tbody>
    @if($contacts)
        @foreach ($contacts as $contact)
            <tr id="{{$contact->id}}">
                <td><span class="tabledit-span tabledit-identifier">{{$contact->id}}</span><input class="tabledit-input tabledit-identifier" type="hidden" name="id" value="{{$contact->id}}" disabled=""></td>
                <td class="tabledit-view-mode"><span class="tabledit-span">{{$contact->first_name}}</span><input class="tabledit-input form-control input-sm" type="text" name="first_name" value="{{$contact->first_name}}" style="display: none;" disabled=""></td>
                <td class="tabledit-view-mode"><span class="tabledit-span">{{$contact->last_name}}</span><input class="tabledit-input form-control input-sm" type="text" name="last_name" value="{{$contact->last_name}}" style="display: none;" disabled=""></td>
           </tr>
       @endforeach
   @endif
</tbody>

JavaScript:

<script>
$( document ).ready(function() {
    $('#contactsTable').Tabledit({
        url: 'http://localhost/contacts/22',
        saveButton: false,
        columns: {
            identifier: [0, 'id'],
            editable: [[1, 'first_name'], [2, 'last_name']]
        }
    });
});

As you can see, url: 'http://localhost/contacts/22' is the problem. The code above works as expected, but updates only row 22 as jQuery-Tabledit URL is fix-coded to row 22.

Upvotes: 2

Views: 2949

Answers (2)

AlenBer
AlenBer

Reputation: 748

Managed to solve it on the server side, created a separate Route just for updating the data via Tabledit which does not require the row ID as part of the URL (I included it in the POST request):

Route::post('/contacts/updatetable','ContactsController@updateTable');

Controller:

use Illuminate\Http\Request;

class ContactsController extends Controller
{
    ...

    public function updateTable(Request $request)
    {
        // Save the data.
        $contact = Contact::find($request->input('id'));
    }

    ...
}

But still would be nice to know if there is any way on client-side (jQuery-Tabledit).

Upvotes: 1

Leo
Leo

Reputation: 7420

I assume that your jquery its located within the current blade. Therfore these bracket: {{ }}, {!! !!} only will be considered as templating when you use the extension .blade.php.

So what you could do its simply use blade to echo the contact id using the brackets.

<script>
$( document ).ready(function() {
    $('#contactsTable').Tabledit({
        url: 'http://localhost/contacts/'+{!! $contact->id !!},
        saveButton: false,
        columns: {
            identifier: [0, 'id'],
            editable: [[1, 'first_name'], [2, 'last_name']]
        }
    });
});

or just serialize the contact collection to json: 

$('#contactsTable').on('click', function(){
   let contacts = {!! $contacts->toJson() !!};

   // now you can access all attributes that are defined in Contacts model 
   // example contact id 

   let contact_id = contacts.id; 


}

Upvotes: 1

Related Questions