Laravel Ajax Success Message: Returning Contact Form Name Input

Question

Thanks guys for looking into my question. I have this form that I use ajax to submit to the mysql database using laravel. I'm trying to pull the most recent entry which would be the user's submission. I am error free, however I'm getting the most recent before the user submitted form. I wrote the code in the IndexController. Maybe i should use Jquery/Java? Here is what I have:

Route:

Route::resource('/', 'IndexController');

IndexController:

 public function index()
{
    $recent = Contact::orderby('created_at', 'desc')->first();
    return view('index', compact('recent'));
}

Html:

<div class ="row">
                <div class ="col-lg-12 contact">
                   <div id = "ctn-box" class = "row pad-med">
                   {!!Form::open(array('url' => 'contacts', 'class' => 'contacting')) !!}
                    <h1 class = "txtc">CONTACTO</h1>
                    <div class = "form-group col-xs-3">
                        {!!Form::label('name', 'Nombre:')!!}
                        {!!Form::text('name', null, ['class'=> 'form-control area'])!!}
                    </div>

                    <div class = "form-group col-xs-3">
                        {!!Form::label('email', 'Email:')!!}
                        {!!Form::email('email', null, ['class'=> 'form-control area', 'placeholder' => 'example@gmail.com'])!!}
                    </div>
                    <div class = "form-group col-xs-3">
                        {!!Form::label('phone', 'Número de Teléfono:')!!}
                        {!!Form::text('phone', null, ['class'=> 'form-control area', 'placeholder' => '657-084-052'])!!}
                    </div>
                    <div class = "form-group col-xs-3">
                        {!!Form::submit('Contacto', ['class'=> 'btn btn-danger outline form-control contact', 'id' => 'fuck'])!!}
                    </div>
                    {!! Form::close() !!}
                    <div id = "thankCtn" class = "txtc">
                        <h1>Muchas Gracias {{$recent->name}}!</h1>
                        <p>Siguemos en contacto. Mientras tanto, visítanos en nuestro officina abajo.</p>
                    </div>
                   </div>
                   <div class = 'contact-info'>
                    <iframe class = "googimg" frameborder="0" scrolling="no"  src="https://maps.google.com/maps?hl=en&q=Passatge hort dels velluters, 5&ie=UTF8&t=roadmap&z=15&iwloc=B&output=embed"><div><small><a href="http://embedgooglemaps.com">embedgooglemaps.com</a></small></div><div><small><a href="http://www.premiumlinkgenerator.com/">multihoster premium</a></small></div></iframe>
                    <div class = "address txtc">
                        <h1 class = "contacts">Passatge Hort dels Velluters<br> 5, 08008 Barcelona</h1>
                        <h2 class = "contacts">657-084-052</h2>
                    </div>
                   </div>
                </div>
             </div>

Ajax:

    //INDEX CONTACT SUBMISSION//

$('.contacting').on('submit', function(e) {
    var base_url = 'http://rem-edu-es.eu1.frbit.net/';
    e.preventDefault();
    var data = $(this).serialize();
    $.ajax({
        type: "POST",
        url: base_url + "contacts",
        data: data,
        success: function (data) {
            $('.contacting').css('opacity', '0');
            $('.contacting').animate({
                top: '50px'
            }, 100, function(){
                $('#thankCtn').fadeIn(500);
                $('#thankCtn').css('top', '-100px');
            });
        }

    });
});

score 0 · Answer 1 · answered Oct 12 '15 at 13:55

Before suggesting anything, I should tell you that there could be a little issue with the site. I clicked the "Contact" button without filling the fields. Guess what? I got a response: "Muchas Gracias New Guy..." I guess the last person used "New Guy" as his name. Sounds insecure?!

Now, to my answer, I'll suggest you do it with jQuery, in the success callback of $.ajax(). Something like this:

IndexController

public function index()
{
    $recent = Contact::orderby('created_at', 'desc')->first();
    return json_encode(compact('recent'));        // Returning view(...) means the ajax call will receive HTML page content
}

HTML

<div id = "thankCtn" class = "txtc">
    <h1>Muchas Gracias <span id = "newGuy"></span>!</h1>
    <p>Siguemos en contacto. Mientras tanto, visítanos en nuestro officina abajo.</p>
</div>

jQuery

success: function (res) {                 // note that I'm changing "data" to "res". It is the result of the ajax call
    $('.contacting').css('opacity', '0');
    $('.contacting').animate({
        top: '50px'
        }, 100, function(){
            $('#newGuy').text(res.name);
            $('#thankCtn').fadeIn(500);
            $('#thankCtn').css('top', '-100px');
        });
    }

Yes, I will add the rules for submission so you cant submit without adding code. you code does send back the most recent in JSON which is good. But I cant get it to return the view first. So you cant reach the page now you just get the $recent row. — Ricki Moore, Oct 12 '15 at 14:13
If you are going to be returning the view, then maybe you will have some sort of conditional that determines whether the request is an AJAX request or not. That's something like: `if (AJAX) return JSON; else return view(...);` — afaolek, Oct 13 '15 at 08:39
See this [link](http://laravel.com/docs/5.0/requests#other-request-information) on how to check for AJAX in Laravel. And [this SO question](http://stackoverflow.com/questions/29231587/laravel-check-if-ajax-request), too. — afaolek, Oct 13 '15 at 08:46

Laravel Ajax Success Message: Returning Contact Form Name Input

1 Answers1