CODEWITHSUNDEEP
phpjqueryajaxlaravel
Mehdi Jalali
Mehdi Jalali

Reputation: 29

Passing an id from foreach to jquery modal

I want the modal to open when the user clicks on the create asset button, and after filling in the modal fields and clicking the save button, the asset group ID with the modal data is also received from foreach and sent via Ajax request.

How is this possible?

foreach:

@foreach ($AssetsGroup as $AssetGroup)
<tr id="assetgroup{{$AssetGroup->id}}" class="active">
    <td>{{$AssetGroup->name}}</td>
    <td></td>
    <td></td>
    <td width="auto">
        // if click this button then modal show
        <button id="btn_add" name="btn_add" value="{{ $AssetGroup->id }}" data-toggle="modal" and data-target="#assetModal">create assets</button>
    </td>
</tr>
@endforeach

Jquery Modal:

<div class="modal fade" id="assetModal" tabindex="-1" role="dialog" aria-labelledby="assetModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-body">
              <form id="frmassets" name="frmassets" class="form-horizontal" novalidate="">
                  <div class="form-group row">
                      <label for="name">asset name</label>
                      <input type="text" id="name2" name="name2">
                  </div>

                  <div class="form-group row">
                      <label for="name">tags</label>
                      <input id="tags2" name="tags2" type="text"/>
                  </div>
              </form>
          </div>
          <div class="modal-footer">
              <button type="button" id="btn-save" value="add">save</button>
              <input type="hidden" id="asset_id" name="asset_id" value="0">
          </div>
      </div>
  </div>
</div>

Ajax:

$("#btn-save").click(function (e) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })

    e.preventDefault();
    var formData = {
        name: $('#name2').val(),
        group:  i want to resive group id from foreach and send group id with ajax request
        tags: $('#tags2').val(),
    }

    //used to determine the http verb to use [add=POST], [update=PUT]
    var state = $('#btn-save').val();
    var type = "POST"; //for creating new resource
    var asset_id = $('#asset_id').val();
    var my_url = '/assets';
    if (state == "update"){
        type = "PUT"; //for updating existing resource
        my_url += '/' + asset_id;
    }
    console.log(formData);
    $.ajax({
        type: type,
        url: my_url,
        data: formData,
        dataType: 'json',
        success: function (data) {
            ...
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

Upvotes: 0

Views: 494

Answers (1)

Jaynil Savani
Jaynil Savani

Reputation: 380

You can use data attribute to achieve this -

Blade file code -

 @foreach ($AssetsGroup as $AssetGroup)
    <tr id="assetgroup{{$AssetGroup->id}}" class="active">
    <td>{{$AssetGroup->name}}</td>
    <td></td>
    <td></td>
    <td width="auto">
      <button id="btn_add" name="btn_add" data-asset-id="{{ $AssetGroup->id }}">create assets</button>
    </td>
    </tr>
 @endforeach

Js code -

$('#btn_add').click(function() {
  $('#assest_id').val($(this).data('asset-id'));
  $('#assetModal').modal('show');
});

Now when you send your ajax request you can get the asset_id field value.

Upvotes: 1

Related Questions