Output in browser doesn't change after redirection?

Question

Output in browser doesn't change after redirection?

G Wynne May '14

Created May '14	Last Reply May '14	Replies 2	Views 868	Votes 0

G Wynne 38.8k

May '14

Hi there,

  public function chargeCardAction()
  {
    return $this->response->redirect('booking/booked');
  }

The above action is called from a page. There is other code inthe chargeCardAction but it's commented out and removed here for the sake of brevity. The bottom line is that after the code executes, it finally redirects to 'booking/booked'. The bookedAction is called (I set a breakpoint in there) and I watch it execute and output the volt template associated with the action.

However, despite executing the getContent() method and my debug environment and seeing the correct output, the brower's URL doesn't change and neither does the content of the page. It stays the same as when it called the chargeCardAction() ???

I've spent hours trying to work out why but it just doesn't seem to work and I don't know why :( Any ideas?

Thanks.

Max Galbusera
3.2k

Accepted
answer

edited May '14
May '14

You are redirecting the ajax request, not the actual browser page. The ajax request headers (where the Location header is) are not handled by the browser but from javascript. I usually do this to redirect after an ajax call:

$.post('{{ url("booking/chargeCard") }}', params, function(json){
    if (json.redirect)
        location.href = json.redirect;
}, "json");

and in the controller

public function chargeCardAction()
{
    return $this->response->setJsonContent(array(
        'redirect'  => $this->url->get('booking/booked')
    ));
}

Oleg · Answer 1 · 2014-05-11T15:20:54-07:00

Just try

public function chargeCardAction()
  {
    $this->response->redirect('booking/booked');
  }

G Wynne · Answer 2 · 2014-05-11T15:33:17-07:00

Tried and no difference. The browser still stays on the https://localhost:8888/booking/payment payment.

I checked my PHP error file and there are the following errors:

[12-May-2014 00:23:13 Europe/Berlin] PHP Stack trace:
[12-May-2014 00:23:13 Europe/Berlin] PHP   1. {main}() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   2. Phalcon\Mvc\Application->handle() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   3. Phalcon\Mvc\View->render() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   4. Phalcon\Mvc\View->_engineRender() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   5. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   6. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP Notice:  Undefined variable: max_calendar_date in /Applications/MAMP/htdocs/escglam/public/cache/volt/%%applications%%mamp%%htdocs%%escglam%%app%%views%%layouts%%booking.volt.php on line 23
[12-May-2014 00:23:13 Europe/Berlin] PHP Stack trace:
[12-May-2014 00:23:13 Europe/Berlin] PHP   1. {main}() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   2. Phalcon\Mvc\Application->handle() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   3. Phalcon\Mvc\View->render() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   4. Phalcon\Mvc\View->_engineRender() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   5. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   6. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP Notice:  Undefined variable: payment_type in /Applications/MAMP/htdocs/escglam/public/cache/volt/%%applications%%mamp%%htdocs%%escglam%%app%%views%%layouts%%booking.volt.php on line 14
[12-May-2014 00:23:13 Europe/Berlin] PHP Stack trace:
[12-May-2014 00:23:13 Europe/Berlin] PHP   1. {main}() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   2. Phalcon\Mvc\Application->handle() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   3. Phalcon\Mvc\View->render() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   4. Phalcon\Mvc\View->_engineRender() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   5. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   6. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP Notice:  Undefined variable: max_calendar_date in /Applications/MAMP/htdocs/escglam/public/cache/volt/%%applications%%mamp%%htdocs%%escglam%%app%%views%%layouts%%booking.volt.php on line 23
[12-May-2014 00:23:13 Europe/Berlin] PHP Stack trace:
[12-May-2014 00:23:13 Europe/Berlin] PHP   1. {main}() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   2. Phalcon\Mvc\Application->handle() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   3. Phalcon\Mvc\View->render() /Applications/MAMP/htdocs/escglam/public/index.php:149
[12-May-2014 00:23:13 Europe/Berlin] PHP   4. Phalcon\Mvc\View->_engineRender() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   5. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0
[12-May-2014 00:23:13 Europe/Berlin] PHP   6. Phalcon\Mvc\View\Engine\Volt->render() /Applications/MAMP/htdocs/escglam/public/index.php:0

They come from:

{% extends 'layouts/main.volt' %}

{% block js %}
  {{ super() }}
  {{ stylesheet_link('datetimepicker/jquery.datetimepicker.css') }}
  {{ javascript_include('datetimepicker/jquery.datetimepicker.js') }}

  {% if payment_type %}
    {{ partial('booking/payment_handler') }}
  {% endif %}

  <script>
    $( document ).ready(function() {
      $('#booking_date').datetimepicker({
        timepicker:false,
        minDate: 0,
        maxDate:'{{ max_calendar_date }}',
        closeOnDateSelect:true,
        validateOnBlur:true,
        format:'d/m/Y',
        onChangeDateTime:function(){
          $('.row.slots').hide();
          $('.row.no-slots').hide();
        }
      });
      $('#package_id').change(function() {
        var page_id = $(this).val();
        $('.row.pricing').hide();
        $('.row.slots').hide();
        $('.row.no-slots').hide();
        $('.page_' + page_id).fadeIn();
      })
    });
  </script>
{% endblock %}

Could these notices intefere with the output? I stepped through the process and the target action is definately hit and I see the bookedAction template markup in the getContent() output?

Thanks.

G Wynne · Answer 3 · 2014-05-12T11:33:48-07:00

OK, so I got to the bottom of this but I'm not sure whether the behaviour I'm seeing is correct. In my 'booking/payment_handler' partial (see above), I had the following:

  var handler = StripeCheckout.configure({
    key: '{{ constant("PaymentProcessing::STRIPE_PUBLISHABLE_KEY") }}',
    image: '/square-image.png',
    token: function (token, args) {
      //$.post('{{ url("booking/chargeCard") }}', { stripe_token: JSON.stringify(token) } );
      $("form:first" ).submit() // added in place of previous line
    }
  });

As you can see, I've commented out the $.post(...) line and added the form submit line.

Originally, the $.post(...) line correctly called the appropriate action in my controller and from there, I redirected to the target handler (that wasn't being displayed). I can only assume that this redirect was being negated because the $.post(...) was still in effect?

When I actually submit the form, the redirection works as expected.

So, I guess the real question is, in my scenario, does the client-side $.post(...) trump the redirection that occurs in the action called by the $.post(...).

Thanks :)

G Wynne · Answer 4 · 2014-05-14T11:09:55-07:00

G Wynne
38.8k

May '14

Awesome! Thanks for providing this solution - I really appreciate it :)