Editable table but save all values

Just hit a roadblock, I have a table quite a big table too, and most cells are editable, but I want to click a submit button and save all the values in the all the cells.

Here's what I currently have:

 $(".edit").focusout(function(){
        //$("#sub").click(function() {
            $(this).removeClass("editMode");
            var id = this.id;
            var split_id = id.split("_");
            var field_name = split_id[0];
            var edit_id = split_id[1];
            var value = $(this).text();


            $.ajax({
                url: '/claim/store',
                type: 'post',
                data: { field:field_name, value:value, id:edit_id },
                success:function(response){
                    console.log('Save successfully'); 
                }
            });

        });

Which works but only does one cell at a time and fo the ajax post I need to send everything through so I can encode it and save to the db.

I have this is a Laravel blade foreach:

@foreach($costItems as $key => $cost)
                    <tr>
                        <td>{{ $key }}</td>
                        <td colspan="6">{{ $cost}}</td>
                        <td contentEditable="true" class="edit" id="total_budget_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q1_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q2_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q3_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q4_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q5_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q6_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q7_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q8_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q9_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q10_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q11_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q12_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="project_total_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="variance_{{ $key }}"></td>
    </tr>

Any help greatly appreciated in order to save all the edited values in one go.

theUnforgiven

6 years ago

Level 51

Can anyone help me on this please?

Sergiu17

6 years ago

Best Answer

Level 60

@theunforgiven this is what I'd probably do

@foreach($costItems as $key => $cost)
    <td contentEditable="true" class="edit" id="q1_{{ $key }}"></td>
@endforeach

<button>Save</button>

<script>
    const itemsToBeSubmitted = []; // store here edited items

    $(".edit").focusout(function(){
        let split_id = this.id.split('_');
        let field_name = split_id[0];
        let edit_id = split_id[1];
        let value = $(this).text();

        itemsToBeSubmitted.push({
            field: field_name,
            value: value,
            id: edit_id
        });
    });

    // Now you have an array all edited elements
    document.querySelector('button').addEventListener('click', function() {
        $.ajax({
            url: '/claim/store',
            type: 'post',
            data: itemsToBeSubmitted,  // edited items
            success: (response) => {
                console.log('Saved successfully');
            }
        });
    });

PHP part

public function store(Request $request)
{
    $request->all(); // this is an array of arrays
    
    foreach($request->all() as $item)
    {
        // $item['id'], $item['field'], $item['value'];
        $model = Model::find($item['id'];
        
        $model->{$item['field']} = $item['value'];

        $model->save();
    }

    return 'Done';
}

I didn't tested this code, but I created something similar before. Hope it helps

1 like

theUnforgiven

6 years ago

Level 51

Great, thanks. I will try this out is was more the js part i was having a problem with. Thanks buddy

Please or to participate in this conversation.