CODEWITHSUNDEEP
phplaravelcontrollerrouteshref
A.J
A.J

Reputation: 1180

Prevent page form reloading after reroute Laravel

I am implementing account verification and part of it is resending email verification.

Blade

<a href="/register/resend/{{ $objUser->id }}">@lang('localization.clickHere')</a>@lang('localization.toResendEmail')

routes/web

Route::get('register/resend/{id}','Auth\VerificationController@resend');

Controller

public function resend($id, Request $request)
{   
    $user = User::where('id',$id)->firstOrFail();
    Mail::to($user->email)->queue(new ConfirmRegistration($user));

    $messenger = new Messenger($user);
    $messenger->sendSuccess(__(trans('localization.emailSentSuccessfully')));

    return back();
}

The issue I am having is that the page reloads (as expected) whenever I trigger the href, which leads to the message sent by the Controller disappear right away.

Is there a way to prevent the page from reloading but still trigger the route? I tried adding onclick="return false;" but that seems to prevent resend function from running.

Upvotes: 1

Views: 2363

Answers (2)

user2067796
user2067796

Reputation: 1

I use Session variable to handle this

at first session variable from start and set its value to true and on data save I set its value to false.

then I check the value of session variable and route the resubmit to else ware

Upvotes: 0

Luis felipe De jesus Munoz
Luis felipe De jesus Munoz

Reputation: 7933

Why dont you use an Ajax call instead?

HTML:

<a href="javascript:void(0)" onclick="mailme(this)" user-id="{{ $objUser->id }}">@lang('localization.clickHere')</a>@lang('localization.toResendEmail')

ROUTE:

Route::get('register/resend','Auth\VerificationController@resend');

CONTROLLER:

public function resend(Request $request)
{   
    $user = User::where('id',$request->id)->firstOrFail();
    Mail::to($user->email)->queue(new ConfirmRegistration($user));

    $messenger = new Messenger($user);
    $messenger->sendSuccess(__(trans('localization.emailSentSuccessfully')));

    return response()->json('success');
}

JS (no JQuery):

mailme = function(obj){
  var userID = obj.getAttribute('user-id')
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
    }
  };
  var params = JSON.stringify({ id: userID });

  xhttp.setRequestHeader("Content-type", "application/json; charset=utf-8");
  xhttp.setRequestHeader("Content-length", params.length);
  xhttp.setRequestHeader("Connection", "close");

  xhttp.open("GET", '{{url("settings/register/resend")}}', true);

  xhttp.send(params);
}

JS (JQuery):

mailme = function(obj){
    var userID = $(obj).attr('user-id')
    $.ajax({
        type : 'Get',
        data : {
            id: userID
        },
        url : '{{url("settings/register/resend")}}',
        dataType : 'json',
        success: function(data){
            console.log(data)
        }
    });
}

This way you will trigger the function without the need of reloading the page to send the request to the server. The request is sent via xhttp

Upvotes: 2

Related Questions