How To Change My code to Use AJAX

Question

I have built a basic MVC Font Controller application. its built for the purpose of easy site editing, index. php is the only page that every js, and css document is loaded from, then the front controller brings the appropriate content file forward and puts it inside a specified div, and the correct document can be called by adding ?pagename to the end of the url(For Example: site.com/index.php?about-us) . It works well with no PHP errors, however i am now trying to build an audio player into the site and want it to be persistent across pages, so i am trying to edit this mvc code to use ajax instead so that the page is not reloaded to change content. Below is my code for the page.

index.php code snippet

<div id="mpane-in">
    <?php

       /** Display errors in production mode Only DO NOT un-comment unless testing **/
       //ini_set('display_errors', 1);

       // Load the routing controller
       require 'application/router.php';
    ?>
</div>

/application/router.php

  require 'load.php';
  require 'model.php';

  require 'controller.php';
  new Controller();

load.php

class Load {
  function view( $file_name, $data = null ) 
    {
      if( is_array($data) ) {
         extract($data);
    }
    include 'pages/' . $file_name;
  }
}

model.php

class Model {
   public function user_info()
   {
      // simulates real data
      return array(
         'first' => 'Target',
         'last'  => 'Not_Loaded'
      );
   }
}

controller.php

 class Controller {
   public $load;
   public $model;

   function __construct()
   {
      $this->load = new Load();
      $this->model = new Model();

      // determine what page you're on
      $this->home();
   }

   function home()
   {
       if ($_SERVER['QUERY_STRING'] === ""){
        $data = $this->model->user_info();
        $this->load->view('main.php' , $data);
       }
       else {
        $data = $this->model->user_info();
        $this->load->view($_SERVER['QUERY_STRING'] . '.php' , $data);
       }
   }
}

Any suggestions would be great! thanks!

This is not MVC, index.php should be a bootstrap for the app, views are last in the chain after deciding route, loading controller and model then receiving data from the model to pass to the view, also your open to directory traversal attacks — Lawrence Cherone, Aug 26 '13 at 03:50
to be honest, im not entirely sure 100% of how all of it works, i followed a tutorial online that briefly explained it but it was rather unclear. Is there a better way to accomplish the task i am looking for? i dont want a full scale mvc, they do more than what i am looking for thats why this was such a perfect solution. — JL Griffin, Aug 26 '13 at 03:59
AJAX is a transport, there is nothing in what you put here that stops you having AJAX already. — Owen Beresford, Aug 26 '13 at 04:20

score 1 · Accepted Answer · answered Aug 26 '13 at 04:35

1

In an oversimplified manner you can use your existing code without changing anything e. g

 class Controller {
  .....

  //call this ajax function 
  function ajaxLogin(){
       $this->load->partialView($_SERVER['QUERY_STRING'] . '.php' , $data);
  }
}

You just need to use partial views to avoid loading <html><header></body> , in case of text/html response and for json and xml output you might need to send proper content-type headers before echoing the view stuff. In a dirty and quick way add little stuff to handle content-type and partialviews and you are done .

answered Aug 26 '13 at 04:35

sakhunzai

13,900
23
98
159

Ok that i understand, however what i guess i dont understand is how to call this function via js. and how to modfy my linking system. for example my nav menu redirects the page to ?page-name which causes a reload because the url is changing. would this change as a result of using ajax? I used to use a script called ajaxpage which did exactly what i am looking for, but i finally stopped using it because i could not get it to change the url, nor could i get it to go to a specific page via the url. I guess i am looking for the best of both worlds. do you think it is possible? and if so how? – JL Griffin Aug 26 '13 at 05:34
I think that is the function of your `Router` class to route the request to specific `Controller` method. If you are loading a page through ajax (from nav menu) you have to handle that from javascript, such that when you click the link it send the AJAX request e.g `Title>` . – sakhunzai Aug 26 '13 at 05:48
There are tons of resources to handle this e.g http://stackoverflow.com/questions/12500669/html-anchor-tag-redirect-link-after-ajax-request ,http://stackoverflow.com/questions/813601/jquery-ui-tabs-back-button-history/3330919#3330919 ,http://stackoverflow.com/questions/4410169/process-anchor-hash-links-with-jquery-and-ajax – sakhunzai Aug 26 '13 at 05:48
ohhh i see! awesome. ive been googling over the past few days trying to get the basics of ajax down, and this is very much a learning excercise for me as well. thanks for the tips ill check those out and post any further questions! :D – JL Griffin Aug 26 '13 at 06:05

How To Change My code to Use AJAX

1 Answers1