CI4 Views and Ajax

Hi all, 

Firstly I am extremely happy to learn this myself, I will describe my problem, and what I am looking for are what to learn/read/do to resolve this problem.

I have a site thats using a layout that contains the following section

PHP Code:

<main role="main" class="wrapper">
  <?= $this->renderSection('main') ?>
</main> 


I also have many pages that have controllers that are loaded as such

PHP Code:

return view($this->config->views['messages'], [
    'userData' => $this->session->userData,
    'config' => $this->config
]); 


I have my routes setup and it works great.

Also in my layout (currently until i move it) I have a navigation section to load the different controllers.
For example
http://localhost:8080/messages uses my Messages controller and my messages.php page houses the php/html code
http://localhost:8080/services uses my Services controller and my services.php page houses the php/html code

All of this is wired up with the routes.


The main issue I have is I don't want to reload the page every time. 
When i press the services button in the nav, I would like it to replace the messages section (thats currently being generated in the rendersection)

I believe its AJAX I need to do this, but what I am not sure about is how I use Ajax and JQuery to swap out the rendersection to the other page/controller.

I apologise if this is really difficult to read. Please ask questions if you need more information.

Any help is greatly appreicated!

This tutorial is for CodeIgniter 3 but should also work for CodeIgniter 4.

This should give you an idea of what needs to be done and the ways that
it is done access CodeIgniter.

Most of it would be used for any CodeIgniter Ajax scripts.

How to send AJAX request in CodeIgniter

Also check out the other tutorials on the web site.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Thanks so much for that InsiteFX.

I have got the example working, It took a bit to get it working in CI4.

loading the model the CI4 way
SQL needed builder to replace the old sql
CSRF handling tokens with the ajax queries
isset using $_POST['username']

I have one little thing to solve with refreshing the CSRF token before I start disecting this and understanding it. (i get once use before a 403 lol)









I am still not sure if this is what I am trying to do though.

I have several views view1, view2 view3
When i load view1, on the page is a button to load view2. Instead of refreshing the page, I want to replace the contents of view1 with the contents of view2 if that makes any sense

view1.php

<?= $this->extend($config->viewLayout) ?>
<?= $this->section('main') ?>
<div class="container view1" >
This is view 1
<div>


<?= $this->endSection() ?>


view2.php

<?= $this->extend($config->viewLayout) ?>
<?= $this->section('main') ?>
<div class="container view2" >
This is view 2
<div>


<?= $this->endSection() ?>

views are loaded in from layout.php

<main role="main" class="wrapper">
<?= $this->renderSection('main') ?>
</main>

typically these are loaded in by the controllers
controller1.php
public function view1()
{
return view($this->config->views['view1'], [
'userData' => $this->session->userData
]);
}

controller2.php
public function view2()
{
return view($this->config->views['view2'], [
'userData' => $this->session->userData
]);
}

Is AJAX going to help me load in these views?

Here is how to replace a div in html.

Replace Div Content On The Fly With New Content

You may need to modify it to get the data from the controller and method to update the div.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Thanks so much Insite.

I got it working but used ajax.