Laravel Classroom image

To post your Question Join Classroom
Lesson Topics's No:-  |1 | 2 | 3 | 4 | 5 | 6|Last
Lessons:-AJAX Content

AJAX Content
Modern web applications don’t have the time to be waiting around for the next HTTP request.
Javascript has changed the way we browse, we want our content to automatically update. We
want to post information without having to reload the page.
In the Laravel IRC channel we often get asked how to use Ajax alongside Laravel, which seems
confusing, because the answer is simply ‘like any other HTTP request’. Let’s dive right in and
look at some Ajax requests using the framework. We are going to need to make some HTTP
requests through Javascript, this can get ugly so I have decided to use the jQuery Javascript
framework in these examples.
22.1 Page Template
We will need a view, or page template to serve with our first request, so let’s put together
something basic.
1 <!-- application/views/template.php -->
3 <html>
4 <head>
5 <meta charset="UTF-8">
6 <title>My Ajax Page</title>
7 </head>
8 <body>
9 <div id="content">
10 <p>Hello and welcome to the site!</p>
11 </div>
12 <a href="#" id="load-content">Load Content</a>
13 </body>
14 </html>
There we go, now we have a content area, defined in a <DIV> element with the id of content,
this is where we will load out future content. We also have a link with the id of load-content
which we can use as a trigger to load our new content into the <DIV> above.
Before we can see this view, we will need to define a route to load it, I am going to make it my
base route..
1 <?php
3 // application/routes.php
4 Route::get('/', function() {
5 return View::make('template');
6 });Now if we visit http://localhost we are greeted with our site template, but clicking on the
load content link isn’t going to do a lot without some Javascript. Although we wouldn’t need
Javascript if we didn’t have something to load, let’s create a new route and view for content that
is to be loaded into the content <DIV>.
First the view..
1 <!-- application/views/content.php -->
2 <h1>New Content</h1>
3 <p>This is our AJAX loaded content.</p>
and a route to serve the content, note that we aren’t embedding the content within a template,
if we did that the template would be repeated twice when we AJAX load our new content.
1 <?php
3 // application/routes.php
4 Route::get('content', function() {
5 return View::make('content');
6 });
Great so now we have our main template, and we have a secondary route with some content to
load via AJAX, so let’s get started with the Javascript.



Skills    Laravel

Qualifications :-
Location :-,,,

  Students (0)