Modal with Ajax PHP

Asked

Viewed 81 times

-2

Hello!

I am working with MVC structure and routes and I am trying to open a modal with data from a record to be able to update. For this I created a function in js and put in the update link. This function makes an ajax request that through a route takes me to the controller and this returns me a form page with the data filled. However, when I click on any item in my table only opens the route to the first item. I’ve tried some solutions using jquery switches, but I haven’t seen a solution yet. I would be grateful if someone knew why.

Page with the table:

<tbody class="imagetable">
    <?php foreach($images as $image): ?>
        <tr>
            <td><?=$image['id'];?></td>
            <td><?=$image['title'];?></td>
            <td><?=$image['urlimage'];?></td>
            <td><?=$image['slug'];?></td>
            <td>
                <a id="updateimg" href="#" action="dbimages/<?=$image['id'];?>/updatepage" onclick="updateimgitem()">Update</a>
                <a id="deleteimg" href="#" data-action="dbimages/<?=$image['id'];?>/delete">Delete</a>
            </td> 
        </tr>
    <?php endforeach; ?> 
</tbody>

JS:

function updateimgitem() {
  $.post({
    url: $('#updateimg').attr('action'),
    dataType: 'html',
    contentType: false,
    processData: false,
    beforeSend() {
      $('#modal').find('.modal-body').html('Carregando...');
      $('#modal').modal('toggle');
    },
    success(html) {
      $('#modal').find('.modal-body').html(html);
    },
    complete() {
      $('#modal').modal('toggle');
    },
  });
}

PHP:

public function update($args) {
    $image = Image::select()->find($args['id']);
    $this->renderSrc(
        'updateimages', 
        [
        'image'=>$image
        ]
    );
}
  • Have you checked if the URL has the right ID? If yes, put the PHP code that receives this call, in the next times do not print the codes type them, make it easy for those who will try to test etc...

  • Opa, worth the tip, already edited, it was the first time I posted. But I put the parts that interact now. It has the form still, but it only takes the record data and puts on the page, ta working beauty pq when adding an item it works normal. The problem is the url and the same route, or something in the modal.

1 answer

0


What’s happening is that when you call url: $('#updateimg').attr('action') it receives the of the first element with this ID found (do not use the same ID on more than 1 element), so it will always be the first line.

You can pass the line ID as parameter, or change the html tag ID, I suggest:

function updateimgitem(url) {
  $.post({
    url: url,
    dataType: 'html',
    contentType: false,
    processData: false,
    beforeSend() {
      $('#modal').find('.modal-body').html('Carregando...');
      $('#modal').modal('toggle');
    },
    success(html) {
      $('#modal').find('.modal-body').html(html);
    },
    complete() {
      $('#modal').modal('toggle');
    },
  });
}

In HTML:

<a id="updateimg" href="#" onclick="updateimgitem('dbimages/<?=$image['id'];?>/updatepage')">Update</a>

Passing the url as parameter without changing your code too much.

  • Man, you’re crazy! It’s too thin. I broke my head with something so simple, but I started a little while ago and had not seen this idea yet, I learned something really cool. Thank you very much!

  • Oops! Accept the answer, and it’s us! hehe

Browser other questions tagged

You are not signed in. Login or sign up in order to post.