5 e.preventDefault();
6 })
7
8 });
Now we have a click event defined, with a callback closure. By providing an event parameter
called e to the inner closure, we can use the e.preventDefault(); method to prevent the default
click action from being performed. In this case the link will not act as a hyper-link. Now we
need to make another HTTP request to GET the new content, and load it into our #content area.
Let’s use the jQuery .get() method to perform this task.
1 // public/js/script.js
2 $(document).ready(function() {
3 $('#load-content').click(function(e) {
4 // prevent the links default action
5 // from firing
6 e.preventDefault();
7
8 // attempt to GET the new content
9 $.get(BASE+'content', function(data) {
10 $('#content').html(data);
11 });
12 })
13 });
Remember the BASE attribute we set earlier? We can use it to build our request URL, and create
a callback method to catch the data that is returned. We will inject the response from our GET
request into the #content element using the .html() method.
That was a lot of hard work wasn’t it? Well at least now we can see our hard work in action,
let’s load up the application at http://localhost and click the load content link. Hopefully it
worked!
So as you can see, using AJAX with Laravel is the same as using any other framework or plain
PHP, just be sure you format the views for your AJAX routes in a suitable manner.
Anil Bist
Skills Laravel
Qualifications :- High School - SLV, College/University - Graphic Era Deemed Univ University,Location :-Dehradun,Dehradun,Uttarakhand,India
Description:-
I started my Professional Journey in 2006 with one of the Web Development Company in Bangalore and my 1st framework was "Ruby on Rail" as Web development and delivered around 5+ Projects using this platform. Then came another dimension as JEE/Sturst framework, Gradually I realized that I want to build something on my own and give my passion and energy on creating something different a
Explore