0

I viewed the answer Which Submit Button was Clicked in CakePHP?. That situation doesn't apply to me, because I have the same action for each button.

I want to reuse a bootstrap modal and I want to know which item was selected when the modal was invoked. Very simply, I have a table with grades for each school object. When the user clicks the add button, I want to invoke the modal and add a grade for that object. I want to know which object was selected, because I want to reuse the modal for all objects. How can I do that in cakephp 3.x ?

The classbook After a teacher wants to add a grade and press the + button how do I know if he/she selected Mathematics or English if I use the same modal for grade saving? add grade.

Radu Mardari
  • 131
  • 3
  • 6

2 Answers2

1

okey, most simple way is in modal to have hidden field, which contains a subject. I think this has not much to do with cakephp. Example should look like this:

  function modalopen(subject) {
    $('#modal #subject').val(subject);
    $('#modal').modal('toggle');
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <button type="button" class="btn btn-info" onclick="modalopen('english')">+</button>
<button type="button" class="btn btn-info" onclick="modalopen('math')">+</button>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id=""></h4>
      </div>
      <div class="modal-body">
        sub (will be hidden):<br>
        <input type="text" name="subject"  id ="subject" value="" placeholder="will be hidden"><br>
        Mark:<br>
        <input type="text" name="mark"  id ="mark" value="" placeholder="mark">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>
  </body>
</html>
Aivaras
  • 123
  • 1
  • 9
1

The only way of determining which button was pressed is to use Javascript. This means not using the html-tag-option based method on the button to launch the modal, ie:

<!-- Button trigger modal: CAN *NOT* USE THIS TECHNIQUE!! -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

I assume the form inside your modal is a cake-generated form, and the submit button is a normal form submit, which triggers a redraw of the page, effectively killing the modal (IE there's no "modal takedown").

To keep as close as possible to Cake's paradigm, I would send it back to the server in a hidden form field.

Something like:

on the cake side in your ctp while creating your form:

// HTML WRAPPER FOR MODAL

 <?= $this->Form->create(yourentity); ?>
(your form stuff)
<?= $this->Form->hidden("subject_id",["id"=>"subject-id-field"]);
(end of form stuff including submit)
<?= $this->Form->end(); ?>

// HTML WRAPPER FOR MODAL

This will generate something in your form like

<input type="hidden" name="subject_id" id="subject-id-field"/>

We'll need to grab this hidden field in Javascript, so I'm giving it both a name (form-specific) and an id (global), since I prefer referring to everything with #id-syntax, but you could also use form[name=subject_id] and get rid of the id clause

On the browser side in HTML, to create your buttons:

<button type="button" class="btn btn-primary" onclick="launch_dialog('MATH')">Add Math</button>

On the browser side in javascript, the function to call when the button is clicked, which sets the subject id in the form and then launches the modal/form:

<script>
function launch_dialog(subject) {
   $("#subject-id-field").val(subject); // use the id of the hidden field
   $("#your-modal").modal("show"); // or whatever you do to launch the modal
}
</script>

On the server side in the function that the form targets:

      # in your controller php file
   function formAction() {
       if($this->request->data["subject_id"]=="MATH") { // use the name of the hidden field
           // do math record
       }
       // etc

    }

Another note - if your grade record really does have a subject_id field which belongsTo a Subject record, you can have the button's onclick function call the launch_dialog function with that constant, and then you won't need any IF function inside the server action code. Just make sure to use the original record to generate the id, eg:

In controller before render:

$this->set("subjects",$this->[entity]->Subjects->find("list");

In ctp file, something like:

<?php foreach($subjects as $id=>$name): ?>
<button type="button" class="btn btn-primary" 
  onclick="launch_dialog(<?= $id ?>)">Add <?= $name ?></button>
<?php endforeach; ?>
Roger Kaplan
  • 307
  • 1
  • 2
  • 11