Edit action on a popup window in Cakephp 3

1

Hello guys!, I have a problem I am trying to edit a record from an index view but I want to be in a popup and then update the currend index view. Does anybody know or have a practical example?

2

I don’t have a practical example. However, I can tell you that it is a problem related to the markup of the page rather than a CakePHP specific problem:) You should be able to use a lot of the popup examples out there.
From a quick google I found this: https://www.w3schools.com/howto/howto_js_popup.asp
Good luck :slight_smile:

3

Thanks for your prompt repñy but what I am looki g for to open a controller action like edit or add in a modal window and once added or edited refresh current view or index.

Thanks!!

4

In fact you do not open a Controller action “edit” in the modal

What you want to do need javascript and ajax code, something like this:
1 - In the index.ctp you have the loop to echo you entity collection passed from controller (in some sort of table, grid etc)
2 - this table/grid should have a link/button for each row (Edit) that triggers a javascript function passing the row entity ID
3 - the javascript function use ajax to request a controller action that find this entity data where ID = passed ID
4 - javascript function recive the ajax data, fill the modal form and show to the user
5 - now the edit modal form works like in the edit.ctp view, just change the redirect in the controller edit action to the index action (when the form is submited and saved redirect to index.ctp)

If you dont want the page reload in index.ctp more javascript ajax code is needed to submit the edit form via ajax too

there are plugins for this just serach: php inline row edit jquery

6

Hellou,
Simple way to modal add/edit window in CakePHP and JQuery:

In Default.ctp file:

<?= $this->Html->script('https://code.jquery.com/jquery-1.12.4.js') ?>
<?= $this->Html->script('https://code.jquery.com/ui/1.12.1/jquery-ui.js') ?>
<?= $this->Html->css('https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css') ?>

In view, from you have call modal edit:

<?= $this->Html->link('Edit', ['controller'=>'elements', 'action' => 'edit', $overElements->id], ['class'=>'overlay']) ?>

and bottom in this file:

script
$(document).ready(function() {
$( “#dialogModal” ).dialog({
closeOnEscape: false,
dialogClass: “noclose”,
open: function(event, ui) { $(“.ui-dialog-titlebar-close”).hide(); },
autoOpen: false,
show: {
effect: “blind”,
duration: 300
},
hide: {
effect: “blind”,
duration: 300
},
modal: true,
height:560, width:800
});
$(“.overlay”).click(function(event){
event.preventDefault();
$(‘#contentWrap’).load($(this).attr(“href”));
$(‘#dialogModal’).dialog(‘option’, ‘title’, $(this).attr(“title”));
$(‘#dialogModal’).dialog(‘option’, ‘title’, ‘Pozycja wniosku’);
$(‘#dialogModal’).dialog(‘open’);
});
});
/script

end file.

In edit ctp view file:

<?= $this->Form->create($overelement) ?>
<?= $this->Element('element for this view'); ?>

<a h’ref=“#” id=“btnDone” class=“button”>Cancel

<?= $this->Form->button(__('Save'),['id'=>'bt_save']) ?> <?= $this->Form->end() ?>

script
$(document).ready(function () {
$(“#btnDone”).click(function () {
$(“#dialogModal”).dialog(‘close’);
});
});
/script

script
$(‘#OverElemAdd’).ajaxForm({
target: ‘#contentWrap’,
resetForm: false,
beforeSubmit: function() {
$(‘#contentWrap’).html(‘One moment
’);
},
success: function(response) {
if (response==“saved”)) {
$(‘#dialogModal’).dialog(‘close’); //close containing dialog
location.reload(); //if you want to reload parent page to show updated user
}
}
});
/script

7

It’s not working it opens up edit.ctp as usual (no dialog)
What could it be?
(by the way a changed quotes because it giving me errors!!!

This is what is have in my view ctp

<?= $this->Html->link('Edit', ['controller'=>'ProduccionLaminas', 'action' => 'edit', $lamina->id], ['class'=>'overlay']) ?>

inside my edit.ctp

    <br>
    <br>
    <?= $this->Html->link('<span class="glyphicon glyphicon-arrow-left"></span> Regresar', ['action'=>'index'], ['class'=> 'btn btn-danger pull-left', 'escape'=> false]) ?>
    <br>

    <div class="page-header">
        <h2><?= 'Edit Produccion Lamina' ?></h2>
    </div>
    <?= $this->Form->create($produccionLamina) ?>
    <fieldset>
        <?= $this->element('ProduccionLaminas/fields') ?>
    </fieldset>
    <a href="#" id="btnDone" class="button">Cancel

    <?= $this->Form->button(__("Save"),["id"=>"bt_save"]) ?>
    <?= $this->Form->end() ?>

</div>
8

Edit/add modal window in CakePHP3

simple_modal
simple_modal.png1149×695 69.8 KB

I share sample source: http://leszek-klich.pl/Example_modal.tar.gz (layout, views and controllers).

Regards
Leszek Klich

9

Just a guess, but try closing your anchor tag. Instead of this:

<a href="#" id="btnDone" class="button">Cancel

use this:

<a href="#" id="btnDone" class="button">Cancel</a>
10

See this https://drive.google.com/file/d/0B1_PFw--3o74TC16eXRBYXZBNFk/view Just a quick rough example.

I have a popup, do the edit and in the time the popup closes the table is refreshed with the new data. But there are many ways to do it. To keep it simple for yourself you could take a look at x-editable https://vitalets.github.io/x-editable/

To try to give a lesson on this on a forum is not realistic, it took some of these folks years to gain the knowledge. But there are many free tutorials on the web.

It is not a cakephp thing, same in any php framework, asp.net, jsp servlet, etc. It is a javascript and ajax thing that uses the server side code to do the update.

https://www.w3schools.com/xml/ajax_intro.asp

1 Like
11

Hello @SKyer How are you?
Url no found

Thank you.

1 Like