All geek questions in one place

Refresh part of a web page?

enter image description here

for quick reference I have attached an image of what I want. I want to refresh (change content) without refreshing the whole page (without refreshing the page). By clicking on the links or buttons in the white cell, you should get the data from the database and display it in a red box. Of course, the first thing you will write as an answer will be "Ajax !!!", but since I'm new to the laravel framework , I want to know that this is the best way to achieve this, should I write javascript directly in the view or in the controller, and how to do it through the controller? If you need more information, please let me know.

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

+4
source share
2 answers

First we need to configure some routes. You can also do this using controllers.

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

In the home view, I would add a scripting 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>

If you use blade standardization, an implementation is implemented here

 //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
+3
source

it would be better for you if you use jQuery to perform this update using the ajax function. and simple code could be like that

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

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

0
source

Source: https://habr.com/ru/post/1486480/

More articles:


All Articles