Developing (v7+)

5.7 Single page ajax MVC

Permalink November 16, 2016 at 3:07 AM

Hi I am running version 5.7.5.9 but cannot get an ajax request to work under a single page MVC setup. What I am attempting to do is provide a summary listing of jobs based on filtering variables that the user submits by a form. The job offerings are recorded in an external database (this piece is working fine). I am presenting this data with a “show details” button on each of the summary job listings. Clicking on a particular show details button captures the ID for that job (this piece is working as well. What is not working is the ajax call to a function on the controller. I have based my approach on the example athttp://c5hub.com/learning/ajax-57-style/... initially all I am trying to do to test the framework returning that ID back into a div in modal-body area. Note I am using the concrete5 bootstrap for the form and modal work.
Interestingly I tried to recreate the example above verbatim and this didn't work for me either. I think that it may be my route register.

The controller is in the directory application/controllers/single_page/job_search.php
The view file is in the directory application/single_pages/job_search/view.php

In the bootstrap app.php I am registering the route in the following manner

Route::register(
   '/job/{id}', 
   'Application\Controller\SinglePage\Job::getDetail'
);

My controller is defined as

namespace Application\Controller\SinglePage;
use Concrete\Core\Controller\Controller;
use \Concrete\Core\Http\Request;
use Core;
class Job extends Controller 
{
   public function getDetail() {
      $jobID = Request::getInstance()->get('id');
            $detail =  'Job Id "' . $jobID . '", '; 
            echo $detail;
   } 
}

The ajax call in the view.php file:

<script type="text/javascript">
   $(document).ready(function() {
     $('#myModal').on('show.bs.modal', function(e) {
       var id = $(e.relatedTarget).data('id');
        $.ajax({
         url: "<?php echo URL::to('/job');?>/" + id,
      success: function(response) {
            $('#ajax-content').html(response);
       } 
    }); 
  });
});
</script>

I haven't worked out a way to see if the call is getting to the getDetail function to help me debug the issue. Is there a way to do that or am I doing something wrong?

mnakalay replied on Nov 16, 2016 at 6:05 am Permalink Reply

you could log what's happening in the function.
Add

use Log;

to your class. Then use it like this

Log::addEntry(whatever you want);

You can then see the result in your logs, in your dashboard.

Also, you should use your ajax call differently so you can get back some information there as well

$.ajax({
//here you put your url and what not
}).done(function(data, textStatus, jqXHR){
   // here you put your success code
}).fail(function(jqXHR, textStatus, errorThrown){
// if you put a breakpoint on this and look at jqXHR you can find out any error message returned by PHP
   if (textStatus === 'parsererror') {
      alert('Requested JSON parse failed.');
   } else if (textStatus === 'timeout') {
      alert('Time out error.');
   } else if (textStatus === 'abort') {
      alert('Ajax request aborted.');
   } else if (jqXHR.status === 0) {
      alert('Not connected.\n Verify Network.');
   } else if (jqXHR.status == 404) {

Viewing 15 lines of 22 lines. View entire code block.

 
$.ajax({
//here you put your url and what not
}).done(function(data, textStatus, jqXHR){
   // here you put your success code
}).fail(function(jqXHR, textStatus, errorThrown){
// if you put a breakpoint on this and look at jqXHR you can find out any error message returned by PHP
   if (textStatus === 'parsererror') {
      alert('Requested JSON parse failed.');
   } else if (textStatus === 'timeout') {
      alert('Time out error.');
   } else if (textStatus === 'abort') {
      alert('Ajax request aborted.');
   } else if (jqXHR.status === 0) {
      alert('Not connected.\n Verify Network.');
   } else if (jqXHR.status == 404) {
      alert('Requested page not found. [404]');
   } else if (jqXHR.status == 500) {
      alert('Internal Server Error [500].');
   } else {
      alert('Uncaught Error.\n' + jqXHR.responseText);
   }
});

The comments in the code tell you how it can be useful

toddgl replied on Nov 20, 2016 at 2:58 am Permalink Reply

Thanks for your input.

Using the debugging I have confirmed that I have a routing error as I am getting a 404 error as the ajax routine is calling the function with the following URLhttp://ruru/concrete5/index.php/job/getDetail/5435,... which is not finding the function on the controller file.

I have been struggling with this for a while now, without success and I am now wondering whether I should try the approach of using the url: '<? echo $this->action('getDetail'); ?>', rather than my echo URL::to framework. Your thoughts?

Glenn

Mainio replied on Nov 16, 2016 at 8:01 am Permalink Reply

Maybe you can just request that URL /job/xx by hand (or with tool such as Postman) in order to debug the problem...?

Forums

Developing (v7+)

5.7 Single page ajax MVC

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?