Getting data from another page in laravel

In our application, there may be times when we need to access some HTML from another
page. Using Laravel and jQuery, we can accomplish this easily.

Getting ready

For this recipe, we just need a standard Laravel installation.

How to do it…

To complete this recipe, follow the given steps:
1. Open the routes.php file:
Route::get(‘getting-data’, function()
{
return View::make(‘getting-data’);
});
Route::get(‘tab1’, function()
{
if (Request::ajax()) {
return View::make(‘tab1’);
}
return Response::error(‘404’);
});
Route::get(‘tab2’, function()
{
if (Request::ajax()) {
return View::make(‘tab2’);
}
return Response::error(‘404’);
});
2. In the views directory, create a file named tab1.php:
<h1>CHAPTER 1 – Down the Rabbit-Hole</h1>
<p>
Alice was beginning to get very tired of sitting by her
sister on the bank,
and of having nothing to do: once or twice she had peeped
into the book her sister
was reading, but it had no pictures or conversations in
it, ‘and what is the
use of a book,’ thought Alice ‘without pictures or
conversation?’

</p>
<p>
So she was considering in her own mind (as well as she
could, for the
hot day made her feel very sleepy and stupid), whether
the pleasure of making
a daisy-chain would be worth the trouble of getting up
and picking the daisies,
when suddenly a White Rabbit with pink eyes ran close by
her.
</p>
3. In the views directory, create a file named tab2.php:
<h1>Chapter 1</h1>
<p>”TOM!”</p>
<p>No answer.</p>
<p>”TOM!”</p>
<p>No answer.</p>
<p>”What’s gone with that boy, I wonder? You TOM!”</p>
<p>No answer.</p>
<p>
The old lady pulled her spectacles down and looked over them
about the room;
then she put them up and looked out under them. She seldom
or never looked
through them for so small a thing as a boy; they were her
state pair,
the pride of her heart, and were built for “style,” not
service—she could
have seen through a pair of stove-lids just as well. She
looked perplexed
for a moment, and then said, not fiercely, but still loud
enough for the

furniture to hear:
</p>
<p>”Well, I lay if I get hold of you I’ll—”</p>
<p>
She did not finish, for by this time she was bending down
and punching
under the bed with the broom, and so she needed breath to
punctuate
the punches with. She resurrected nothing but the cat.
</p>

4. In the views directory, create a file named getting-data.php:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Getting Data</title>
<script type=”text/javascript”
src=”//ajax.googleapis.com/ajax/libs/jquery
/1.9.0/jquery.min.js”></script>
</head>
<body>
<ul>
<li><a href=”#” id=”tab1″ class=”tabs”>Alice In
Wonderland</a></li>
<li><a href=”#” id=”tab2″ class=”tabs”>Tom Sawyer</a></li>
</ul>
<h1 id=”title”></h1>
<div id=”container”></div>
<script>
$(function() {
$(“.tabs”).on(“click”, function(e) {
e.preventDefault();
var tab = $(this).attr(“id”);
var title = $(this).html();
$(“#container”).html(“loading…”);
$.get(tab, function(data) {
$(“#title”).html(title);
$(“#container”).html(data);
});
});
});
</script>
</body>
</html>
5. View the page at http://{yourserver}/getting-data and click on the links to
load the content.

How it works…

We start by setting up our routes. Our first route is going to display links, and when we click
on them, content will be loaded into the page. Our next two routes will hold the actual content
to display on the main page. To make sure that these pages can’t be accessed directly, we
use the Request::ajax() method to make sure that only Ajax requests are accepted. If
someone tries to access the page directly, it will send them to an error page.

Our two view files will hold a couple of excerpts from books. Since this will be loaded into
another page, we don’t need the full HTML. Our main page, however, is a full HTML page. We
begin by loading jQuery using the Content Delivery Network (CDN) from Google. Then, we
have a list of the books we want to use. To make things a little easier, the ID of the link will
correspond to the routes we created.
When someone clicks on the link, the script will use the ID and get the content from the route
with the same name. The results will be loaded into our container div.

 

Leave a Reply

Your email address will not be published. Required fields are marked *