CODEWITHSUNDEEP
javascriptphpjqueryajaxcakephp
Kelvin Primo
Kelvin Primo

Reputation: 128

how to render ajax return in cakephp 3.1

I have a table that have checkboxes inside. after select it how to return a sum of values from table in modal before confirm the form? and how to render the ajax response from controller? in my view

    $("#envia-vendas").ajaxForm({
  url: '../vendas/confirmar', 
  type: 'post', 
  success: function (data) {
    $('#myModal').modal('show');
    console.log(data);
  },

in my controller

//dostuf
            if($this->request->is('ajax')){
              $sum = $sum;
              $this->render('ajax/confirmado', 'ajax');
              echo 'bal';
              $this->set('text', 'test');
              $this->set('_serialize', ['text']);

            }

how to print the result in the view without reloading page?

Upvotes: 0

Views: 490

Answers (1)

Robert430404
Robert430404

Reputation: 455

What this fiddle does is grabs all of your inputs, then pops up a modal after the values and names have been injected for confirmation.

It should give you a good starting point. What this is setup to do is give you the confirmation screen without the need for additional server calls.

Just set your action to the route that you want to pass the information to for server interactions.

HTML

<form id="test-form" method="post" action="your/action/here">
  <input type="text" name="test" value="" />
  <input type="submit" name="submit-form" value="submit" />
</form>

<div class="modal">
  <div class="form-info-wrapper">

  </div>
  <a class="confirm">Confirm Information</a>
</div>

CSS 

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: #FFF;
}

JS

jQuery(document).ready(function ($){
    $('body').on('click', 'input[type=submit]', function (e) {
    e.preventDefault();

    var data = $(this).parent('form').serializeArray();

    $('.form-info-wrapper').empty();

    for(_data in data)
    {
        $('.form-info-wrapper').append(data[_data].name + ': ' + data[_data].value);
    }

    $('.modal').fadeIn();
  });

  $('.confirm').click(function (e){
        e.preventDefault();

    $('#test-form').submit();
  });
});

https://jsfiddle.net/ojaeacps/2/

Upvotes: 1

Related Questions