kate_hudson kate_hudson - 2 years ago 161
PHP Question

Displaying loading animation while waiting

I have a button like so

{!! link_to_route('jobs.createJob', 'Create Job', $job->id, array('class' => 'btn btn-info')) !!}

So this route calls a function which does something like this

public function createJob(Job $job) {
$createJob = Helper::createNewJob($job);
$createJobXML = new \SimpleXMLElement($createJob);
if($createJobXML->Status == 'OK') {
$job->jobNumber = $createJobXML->Job->ID;
if($job->update()) {
$assignStaff = Helper::assignStaffToJob($job);
$assignStaffXML = new \SimpleXMLElement($assignStaff);
if($assignStaffXML->Status == 'OK'){
$createQuoteForJob = Helper::createQuoteForJob($job);
$createQuoteForJobXML = new \SimpleXMLElement($createQuoteForJob);
if($createQuoteForJobXML->Status == 'OK'){
$job->quoteId = $createQuoteForJobXML->ID;
if($job->update()) {
return View::make('jobs.show', compact('job'));
return View::make('campaigns.show', compact('job'));

So there is quite a lot going on which involves hitting several API methods to insert data into a system. This process can sometimes take a few seconds, and I do not want them being able to click the submit button again, so I want to show them a loading screen while this happens.

If I was making this request via ajax I could simple use ajaxStart and ajaxComplete. However, I am not using ajax, so is there another way I could do this within Laravel 5?


Answer Source

Add an onclick handler to the button so that when it's clicked, it gets disabled.

{!! link_to_route('jobs.createJob', 'Create Job', $job->id, array('class' => 'btn btn-info', 'onclick' => 'disableButton(this)')) !!}

function disableButton(ele)
    ele.disabled = true;

    // And display loading animation here if you need.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download