CODEWITHSUNDEEP
phpjqueryajaxmodal-dialoglaravel-5
dmotors
dmotors

Reputation: 631

Ajax not firing inside Modal Popup

Currently I have a button to view cart contents as such:

<a href="#" class="btn btn-info" role="button" data-toggle="modal" data-targets="showvendorcart1" data-target="#showvendorcartModal" data-async="true" data-cache="false" data-endpoint="vendor/showcart/{{$vendorid}}">SHOW CART</a>

data-target is for my modal

data-targets is for the body of my modal after the ajax endpoint returns a response

My Ajax code is as follows:

$('a[data-async="true"]').click(function(e){
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('targets'),
        cache = self.data('cache');

    $.ajax({
        url: url,
        cache : cache,
        success: function(data){ 
            if (target !== 'undefined'){
                $('#'+target).html( data['response'] );
            }
        }
    });
});

(courtesy of jQuery and data-attributes to handle all ajax calls?)

Now once the modal dialog popup has appeared I have some grid items inside a table such as:

<table id="itemstable" class="table table-striped table-bordered">
    <thead class="fixed-header">
        <tr>
            <th>QTY</th>
            <th>SKU</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>' . $v->qty . '</td>
            <td>' . $v->sku . '</td>
            <td><a href="#" class="btn btn-danger" data-targets="showvendorcart1" data-async="true" data-cache="false" data-endpoint="vendor/removecart/' . $v->id . '">&nbsp;X&nbsp;</a>
        </tr>
    </tbody>
</table>

The problem I'm running into is I have another ajax endpoint call for each table line item but this time when I click it, the Ajax isn't firing at all. I looked at my browsers inspector but not even an error or attempt.

Am I missing something here because it's practically the same code I ran to get the popup and show the response in the body but now the only difference is I'm doing it inside the modal.

Your help is appreciated!

Upvotes: 1

Views: 1459

Answers (1)

mdamia
mdamia

Reputation: 4557

Change it to this and it should work.

$(document).on('click', 'a[data-async="true"]', function (e) {
  e.preventDefault();
  // your code here

});

Upvotes: 1

Related Questions