質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

0回答

1350閲覧

laravelを使って非同期通信のカウントアップボタンを作成したい

inmt013

総合スコア10

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/05/22 07:01

はじめまして。
こちらを初めて利用します。
キュー・ジョブを使って非同期通信によるカウントアップボタンを作っていますが、作ることができません。ご教授いただけませんか?

Controller

1public function countindex(User $user,Kpi $kpi = null) 2 { 3 if ($kpi != null) 4 { 5 MyJob::dispatch($kpi)->delay(now()->addMinutes(1)); 6 } 7 8 $msg = 'show count record.'; 9 $result = Kpi::get(); 10 $data = [ 11 'input' => '', 12 'msg' => $msg, 13 'data' => $result, 14 ]; 15 $countitems = DB::table('kpis')->get(); 16 17 return view('count.countindex',$countitems,$data, compact('countitems')); 18 19 }

Job

1<?php 2 3namespace App\Jobs; 4 5use Illuminate\Bus\Queueable; 6use Illuminate\Contracts\Queue\ShouldQueue; 7use Illuminate\Foundation\Bus\Dispatchable; 8use Illuminate\Queue\InteractsWithQueue; 9use Illuminate\Queue\SerializesModels; 10use App\Kpi; 11 12 13 14class Myjob implements ShouldQueue 15{ 16 use Dispatchable, InteractsWithQueue, Queueable, SerializesModels; 17 18 protected $kpi; 19 /** 20 * Create a new job instance. 21 * 22 * @return void 23 */ 24 public function __construct(Kpi $kpi) 25 { 26 $this->kpi = $kpi; 27 } 28 29 /** 30 * Execute the job. 31 * 32 * @return void 33 */ 34 public function handle(Request $request) 35 { 36 37 $param = Kpi::updateOrInsert([ 38 'date' => $request->date, 39 'user_id' => $request->user_id, 40 'visit' => $request->visit,]); 41 } 42 $this->kpi->save(); 43} 44

view

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title>Index</title> 5<link href="/css/app.css" rel="stylesheet"> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 7<script> 8$(function(){ 9 var number,total_numner; 10 var max = 200; //合計最大数 11 var $input = $('.number'); //カウントする箇所 12 var $plus = $('.plus'); //アップボタン 13 var $minus = $('.minus'); //ダウンボタン 14 //合計カウント用関数 15 function total() { 16 // total_numner = 0; 17 $input.each(function(val) { 18 val = Number($(this).val()); 19 total_numner += val; 20 }); 21 return total_numner; 22 } 23 //ロード時 24 $(window).on('load', function() { 25 $input.each(function() { 26 number = Number($(this).val()); 27 if (number == max) { 28 $(this).next($plus).prop("disabled", true); 29 } else if (number == 0) { 30 $(this).prev($minus).prop("disabled", true); 31 } 32 }); 33 total(); 34 if (total_numner == max) { 35 $plus.prop("disabled", true); 36 } else { 37 $plus.prop("disabled", false); 38 } 39 }); 40 //ダウンボタンクリック時 41 $minus.on('click', function() { 42 total(); 43 number = Number($(this).next($input).val()); 44 if (number > 0) { 45 $(this).next($input).val(number - 1); 46 if ((number - 1) == 0) { 47 $(this).prop("disabled", true); 48 } 49 $(this).next().next($plus).prop("disabled", false); 50 } else { 51 $(this).prop("disabled", true); 52 } 53 total(); 54 if (total_numner < max) { 55 $plus.prop("disabled", false); 56 } 57 }); 58 //アップボタンクリック時 59 $plus.on('click', function() { 60 number = Number($(this).prev($input).val()); 61 if (number < max) { 62 $(this).prev($input).val(number + 1); 63 if ((number + 1) == max) { 64 $(this).prop("disabled", true); 65 } 66 $(this).prev().prev($minus).prop("disabled", false); 67 } else { 68 $(this).prop("disabled", true); 69 } 70 total(); 71 if (total_numner == max) { 72 $plus.prop("disabled", true); 73 } else { 74 $plus.prop("disabled", false); 75 } 76 }); 77}); 78</script> 79</head> 80<body> 81 <form action="/countindex" id="sekkyaku" method="post"> 82 <table id="count2"> 83 <tr> 84 <th></th> 85 @foreach($data as $item) 86 @if ($loop->first) 87 <tr> 88 <td><button class="minus btn btn-outline-primary rounded-circle p-0" style="width:3rem;height:3rem;">-</button> 89 <input type="text" id="sekkyaku" name="customer" value="{{$item->visit}}" readonly class="number"><button class="plus plus btn btn-outline-primary rounded-circle p-0" style="width:3rem;height:3rem;">+</button></td> 90 </tr> 91 @endif 92 @endforeach 93 </tr> 94 </table> 95 </form> 96</body> 97</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問