You are not logged in.

Important Note: This forum is being archived and will be completely locked down on the 7th of February. The new forum can be found at http://laravel.io.

Announcement

    Laravel 4 Advanced Architecture: Book Now On Sale

#1 2012-10-05 21:02:03

msurguy
Artisan
From: United States
Registered: 2012-04-11
Posts: 415
Website

Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Hey all!

I've posted a GitHub source and deployed code to show some basic AJAX that is very quick and easy to use with boostrap-ajax script.

See live demo at Pagodabox deployed code

And the source code is at :
https://github.com/msurguy/laravel-ajax-example

The source code features are :

  • replace content via AJAX calls

  • append content via AJAX calls

  • Form submittal and displaying result via AJAX calls

  • Loading data after successfull AJAX call

Laravel Ajax

To get this working on your local machine just copy this folder into your htdocs MAMP directory or www WAMP directory and navigate to /public folder of this application.

There is no Database setup here but you could do that in a few minutes with Laravel.

Contributing to This code
Contributions are encouraged and welcome. Submit pull requests or ask questions if something's not clear

License
This source is under MIT license.


Enjoy and let me know if you have questions.

Last edited by msurguy (2012-10-05 21:05:49)

Offline

#2 2012-10-05 23:42:45

JonoB
Artisan
Registered: 2011-11-09
Posts: 284

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

How does that ajax lib work if you don't know beforehand what to do with the response? For example, lets say that you are submitting a form, and that you run server side validation.

-If validation fails, then you pass errors back via ajax, and you want them displayed above the form.
-If validation passes, then you want the list of items to be updated.

How do you differentiate those two different responses?

Last edited by JonoB (2012-10-06 00:00:41)

Offline

#3 2012-10-06 14:44:34

euantorano
Artisan
From: England
Registered: 2012-06-13
Posts: 124
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

JonoB wrote:

How does that ajax lib work if you don't know beforehand what to do with the response? For example, lets say that you are submitting a form, and that you run server side validation.

-If validation fails, then you pass errors back via ajax, and you want them displayed above the form.
-If validation passes, then you want the list of items to be updated.

How do you differentiate those two different responses?

Easiest way is to pass your result as a JSON string and decode it after the request. I do something like this:

return json_encode(array(
    'errors'    =>    null, // errors
    'content  =>    'hello', // content
));

Then you just see if the errors key is filled. Or at least, that's how I do it.

Offline

#4 2012-10-06 15:30:03

codenamegary
Moderator
From: Toronto, ON
Registered: 2012-03-08
Posts: 733
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

^ that is exactly how I do it as well.


PointLocker - The Ubiquitous Mobile Rewards Platform
http://www.twitter.com/codenamegary
Simple Asset Collections for Laravel 4
https://bitbucket.org/codenamegary/l4sacs

Offline

#5 2012-10-06 17:14:47

JonoB
Artisan
Registered: 2011-11-09
Posts: 284

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Errr, I know how to do that. I was referring specifically to the bootstrap ajax lib:

There are two data attributes looked for in the response JSON data:

location
html
If location is found in the response JSON payload, it is expected to be a URL and the browser will be immediately redirected to that location. If, on the other hand it is not present, then the processing rules below will be processed based on what attributes are defined.

There are five different ways that you can declare a response without a location directive be processed:
...

Basically, you only get the option to define 'html' and one of 5 ways to declare the response location.

Offline

#6 2012-10-08 17:20:07

papi83dm
Apprentice
Registered: 2012-10-08
Posts: 2

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

This is going to save me or writting a lot of javascripts for my ajax calls,

do you have any sample with the spinner?

I have an ajax call that takes 1-3 minutes to complete and I want to show a spinner when the button is click and probably disable the button to avoid double clicking.

Offline

#7 2012-10-09 03:54:25

jessiesiat
Apprentice
Registered: 2012-07-19
Posts: 5

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Nice share, helpful code bits ! big_smile

Offline

#8 2012-11-03 08:52:05

reineskye25
Artisan
From: Phillipines
Registered: 2012-09-10
Posts: 214
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

This is very useful! This will really save me a lot of time when I need to use ajax calls! Didn't know that theres a bootstrap for doing ajax calls. Thanks for this big_smile


http://laravelsnippets.com/ - Laravel snippets website | A repository of useful code snippets for Laravel PHP framework. Submit, grab and share!
http://john.mayonvolcanosoftware.com/ - My personal website
http://www.mayonvolcanosoftware.com/ - Mayon Volcano Software Ltd.
https://twitter.com/johnkevinmbasco - Twitter

Offline

#9 2012-11-03 19:04:23

msurguy
Artisan
From: United States
Registered: 2012-04-11
Posts: 415
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

You're welcome!

Offline

#10 2012-11-05 10:42:43

Phill Sparks
Quality Team
From: Leicester, UK
Registered: 2011-09-29
Posts: 1,480
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

euantorano wrote:

Easiest way is to pass your result as a JSON string and decode it after the request. I do something like this:

return json_encode(array(
    'errors'    =>    null, // errors
    'content'  =>    'hello', // content
));

Then you just see if the errors key is filled. Or at least, that's how I do it.

I know your post here is about the content of the array, but I just wanted to remind everyone about Response::json() which will json_encode and set the content type too...

return Response::json(array(
    'errors'    =>    null, // errors
    'content'  =>    'hello', // content
));

Offline

#11 2012-11-09 00:06:06

jubi4dition
Artisan
From: Germany
Registered: 2012-07-22
Posts: 26

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Thank you for the code samples.
I don't understand these lines

$name = e(Input::get('name'));
$checker = e(Input::get('checker'));

What does this e()?

Offline

#12 2012-11-09 00:37:20

reineskye25
Artisan
From: Phillipines
Registered: 2012-09-10
Posts: 214
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

jubi4dition wrote:

Thank you for the code samples.
I don't understand these lines

$name = e(Input::get('name'));
$checker = e(Input::get('checker'));

What does this e()?

Its a Laravel helper. Shortcut for htmlentities() function in php.

reference: http://laravel.com/docs/views/html#entities

Last edited by reineskye25 (2012-11-09 00:39:51)


http://laravelsnippets.com/ - Laravel snippets website | A repository of useful code snippets for Laravel PHP framework. Submit, grab and share!
http://john.mayonvolcanosoftware.com/ - My personal website
http://www.mayonvolcanosoftware.com/ - Mayon Volcano Software Ltd.
https://twitter.com/johnkevinmbasco - Twitter

Offline

#13 2012-11-09 19:07:00

msurguy
Artisan
From: United States
Registered: 2012-04-11
Posts: 415
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Thanks @reineskye25 ! I wanted to reply but didn't have time yesterday.
http://laravel.com/api/function-e.html

Check out other helper functions in helpers.php , they are pretty useful!

Offline

#14 2012-11-09 21:44:55

jubi4dition
Artisan
From: Germany
Registered: 2012-07-22
Posts: 26

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Ah, that explais a lot. I didn't look at these useful helper functions before.

Offline

#15 2013-02-08 16:46:37

dragovian
Apprentice
From: Belgium
Registered: 2013-02-08
Posts: 2

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

@msurguy I found that the current bootstrap-ajax version doesn't allow for forms to be submitted multiple times. I have added this functionality to my local version of your bootstrap-ajax library.

Would you like to have this code ?


A PHP-loving web-junkie from Belgium

Offline

#16 2013-02-10 05:32:55

msurguy
Artisan
From: United States
Registered: 2012-04-11
Posts: 415
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

@dragovian, sure that would be wonderful if you could share!

Offline

#17 2013-03-02 13:08:26

Swedish_Soul
Artisan
From: Sweden
Registered: 2013-01-31
Posts: 12

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

I'm completely new to this, I have on idea what's going on here. I've managed to create a mass-delete function with Bootstrap-ajax but I have no idea how to update the div so that it displays only available images. Anyone got a good tutorial for this?

Offline

#18 2013-03-02 20:22:21

msurguy
Artisan
From: United States
Registered: 2012-04-11
Posts: 415
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

@Swedish_Soul could you please describe in more detail? What are you trying to achieve and what you got so far?

Offline

#19 2013-03-03 02:15:17

Swedish_Soul
Artisan
From: Sweden
Registered: 2013-01-31
Posts: 12

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

So I have a <form> where I display images and corresponding to all the images I have a check box. If the box is checked and I click on the submit button it deletes. This works without any problems.
What I'm having trouble understanding is how I'll refresh the form. From what I understand I'm suppose to use .json for this, but how?

Offline

#20 2013-03-06 19:33:33

micz123
Artisan
Registered: 2013-02-25
Posts: 15

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

@msurguy bootstrap-ajax now has 'fragments' aside from 'location' and 'html' as its processing response. Can you update your demo to give example on how to do the fragments? I'm having trouble figuring it out. Thanks.

Offline

#21 2013-03-09 23:02:15

msurguy
Artisan
From: United States
Registered: 2012-04-11
Posts: 415
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

@micz123 thank you for pointing that out, I might take a look at it next week but I am currently swamped at work, hard to find time to update that project... If you figure it out I will really appreciate a pull request on Github though : https://github.com/msurguy/laravel-ajax-example

@swedish_soul, what do you mean refresh the form, like reload the page or update the form on the fly without reloading?

Offline

#22 2013-03-10 17:59:35

micz123
Artisan
Registered: 2013-02-25
Posts: 15

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

@msurguy haha, i'll try big_smile I'm a newbie but yeah so far I alrdy got the json structure to do it now (after almost a week of trial and error T_T yeah my learning curve is so damn steep)... plus I had never upload smthing in github, but i'll try my best to get smthing done before u get the time to do it LOL

@swedish_soul sounds like fragments will help u just that.

Offline

#23 2013-03-10 19:16:35

micz123
Artisan
Registered: 2013-02-25
Posts: 15

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

@msurguy turns out it is easy big_smile I already made a pull request. But later on I will check whether the php array format is alrdy suited to the json structure that the bootstrap-ajax script requires. If it works, the button will update the vote button and change the hero content and append a new content in hero content as well.

Offline

#24 2013-03-24 16:33:24

msurguy
Artisan
From: United States
Registered: 2012-04-11
Posts: 415
Website

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Hi @micz123 !
Thanks so much for the pull request!

The fragments is an awesome idea and thank you so much for adding the demo to my source code and doing a pull request!

The new source code is at https://github.com/msurguy/laravel-ajax-example
and the demo at:
http://laravelajaxexample.pagodabox.com/

Offline

#25 2013-04-09 13:08:06

micz123
Artisan
Registered: 2013-02-25
Posts: 15

Re: Laravel AJAX examples with boostrap and boostrap-ajax - with DEMO

Ure most welcome! Glad i can bit of help big_smile

Offline

Board footer

Powered by FluxBB

');