CODEWITHSUNDEEP
ajaxlaravellaravel-4
Trying Tobemyself
Trying Tobemyself

Reputation: 3668

update some part of the webpage?

enter image description here

for quick reference I have attached the image of what I want. I would like to update (change the content) without updating the whole page (without refreshing the page). Clicking on the links or buttons on the whitebox should fetch the data from the database and that is to be displayed in the redbox. Of course first thing you would write as an answer will be "Ajax!!!", but as I'm new to laravel framework, I want to know what is the best way to achieve this, should I write the javascript directly in the view or in the controller, and how to do it through controller? If you need any more info please let me know.

Revised question, is there any other better way other then the ones answered

Upvotes: 4

Views: 215

Answers (2)

Blessing
Blessing

Reputation: 4888

First we need to set up some routes. You can also do this with controllers.

Route::get('home', function()
{
    return View::make('home');
});

Route::get('someRoute', function()
{
    return View::make('someView');
});

For the home view, I'd add a scripts section:

//home.php

<html>
<head>
    <script>
    $('a.ajax').click(function(e){
        e.preventDefault();
        var pageURL = $(this).attr('href');
        $('#ajaxContent').load(pageURL);
    });
    </script>
</head>
<body>
    <div class="wrapper">
        <a href="{{URL::to('someRoute')}}" class="ajax">Click Here</a>
        <div id="ajaxContent"></div>
    </div>
</body>
</html>

In case you're using blade templating, here's an implementation

//main.blade.php

<html>
<head>
    @yield('styles')
</head>
<body>
    <div class="wrapper">
        @yield('content')
    </div>
    @section('scripts')
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    @show
</body>
</html>

//home.blade.php
@extends('main')

@section('content')
    <a href="<?=URL::to('someRoute')?>" class="ajax">Click Here</a>
        <div id="ajaxContent"></div>
@stop

@section('scripts')
    @parent
    $('a.ajax').click(function(e){
    e.preventDefault();
    var pageURL = $(this).attr('href');
    $('#ajaxContent').load(pageURL);
    });
@stop

Upvotes: 3

Zaher
Zaher

Reputation: 1150

it would be better for you if you use jQuery to do this update using ajax functionality. and a simple code can be like this

$('a.ajax').click(function(e){
     e.preventDefault();
     var pageURL = $(this).attr('href');
     $('#divID-to-be-updated').load(pageURL);
});

more about ajax functionality inside jQuery can be read from http://jqapi.com/#p=load

Upvotes: 0

Related Questions