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

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

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

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2291閲覧

ajax laravel モーダルが出てこない

Jojostyle

総合スコア11

Laravel

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/03/13 07:08

編集2021/03/13 10:13

ajaxでpostしてcontrolllerからモーダルを出そうとしているのですが出てこないので困っています。

realshopcontroller

public function addToCast($store_id, $coupon_id) { $store = Store::find($store_id); $coupon = $store ->coupons() ->where('status', COUPON_STATUS_RELEASE) ->where('type', COUPON_TYPE_NORMAL) ->where('coupons.id', $coupon_id) ->first(); if (is_null($coupon->used)) $coupon->used = 0; if ($coupon && ($coupon->sum === 0 || $coupon->used < $coupon->sum) && !$coupon->hasDownloaded($store->id, auth()->user()->id)) { auth()->user()->add_coupon([ 'store_id' => $store->id, 'coupon_id' => $coupon_id, ]); return response()->json([ 'code' => 0, 'error' => '', 'html' => view('coupon_ok', compact('store', 'coupon'))->render() ], 200); } return response()->json([ 'code' => 500, 'error' => 'maximum number of coupon collection', 'html' => view('coupon_error', compact('store'))->render() ], 200); }

web.php

Route::POST('/realshop/{store_id}/coupon/{coupon_id}/fetch', 'User\RealShopController@addToCast')->name('coupons.addtocast');

main.js

const download_coupon_click = function (ele, store_id, coupon_id) { ele.disabled = true; ele.innerText = "Loading..."; event.preventDefault(); $.ajaxSetup({ cache: false }); $.ajax({ 'url': '/realshop/' + store_id + '/coupon/' + coupon_id + '/fetch', 'type': 'POST', //data: $.param({store_id: store_id, coupon_id: coupon_id}) }).done(function(data) { // console.log(data); if (data.code === 401) { location.href = '/login'; } else { $("#ajaxModal").html(data.html); $('#ajaxModal').modal('show'); } }).fail(function (jqXHR, textStatus, errorThrown) { // 通信失敗時の処理 alert('ファイルの取得に失敗しました。'); console.log("ajax通信に失敗しました"); console.log("jqXHR : " + jqXHR.status); // HTTPステータスが取得 console.log("textStatus : " + textStatus); // タイムアウト、パースエラー console.log("errorThrown : " + errorThrown.message); // 例外情報 }); };

coupon_ok.blade

<div class="modal-dialog"> <div class="modal-content" style="background: transparent"> <div class="modal-body" style="text-align: center; background: white; border-top: 4px solid #ffa900"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> 以下略

coupon.blade.php

<div class="position-relative d-none d-md-block" > <span style="width:calc(100% + 20px); height:50px; position:absolute; left:-10px; top:-10px; border-top:2px solid #fb9d38; border-right:2px solid #fb9d38;" id="ajaxModal"></span> <button onclick="download_coupon_click(this, {{$store->id}}, {{ $coupon->id }})" class="btn font-weight-bold font-18" style="border-radius: 3px; height:150px; line-height:30px; white-space:initial; min-height:70px; width:100%; background:#fb8d45; display:block;" >このクーポンを<br>使う・予約する</button> <span style="width:calc(100% + 20px); height:50px; position:absolute; left:-10px; bottom:-10px; border-bottom:2px solid #fb9d38; border-left:2px solid #fb9d38;"></span> </div>

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

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

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

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

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

m.ts10806

2021/03/13 08:49

どこでどのようにモーダルを呼び出しているつもりなのでしょうか。 提示されたコード内では見当たりませんが。
Jojostyle

2021/03/13 10:14

すみません。追記しました。
m.ts10806

2021/03/13 10:26

もうちょっと最小限のコードから試していってはどうでしょう。 ・クリックで起動するだけのコードで出るか ・Ajax処理関係なく出るか など。
guest

回答1

0

ベストアンサー

id="ajaxModal"という要素が無いから出ないのかなと。
console.logに要素が無いという内容のerrorが出ていませんか?

javascript

1$("#ajaxModal").html(data.html); 2$('#ajaxModal').modal('show');

投稿2021/03/13 10:02

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Jojostyle

2021/03/13 10:11

すみません。モーダルを呼ぶところのbladeを書いていませんでした。追記しましたので見ていただきたいです
m.ts10806

2021/03/13 10:19 編集

いずれにしてもコンソール(ブラウザの)確認する必要はあります。
Jojostyle

2021/03/13 10:22

The value "device0height" for key "height" is invalid, and has been ignored. main.js:744 Uncaught TypeError: $(...).select2 is not a function at main.js:744 (anonymous) @ main.js:744 DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE main.js:314 Uncaught TypeError: $(...).flexslider is not a function at product_slider (main.js:314) at main.js:480 at dispatch (app.js:11779) at elemData.handle (app.js:11583) コンソールはこのようになっていました
退会済みユーザー

退会済みユーザー

2021/03/13 10:30 編集

えーっと、bootstrapでしょうか? ajaxModalの親要素にd-noneついてるので、 親が非表示だから子は表示されないとかいうオチだったりします? 追記です。 コメント見ました。JSを上手く読み込めてないように見えます。 jQueryの読み込みはどのあたりで行われていますか? main.jsよりも先に読み込まれているでしょうか?
Jojostyle

2021/03/13 10:50

すみません。jsとjqueryをほとんど詳しくなくこのコードは改修しているものなので、、 しかしそのような記述は見つからないのでプラグインだと思われます
Jojostyle

2021/03/13 10:57

ボタンを押すと、画面が少し黒くなり、操作ができなくなります。 またごくごくたまに小さいモーダルが現れる時があります
退会済みユーザー

退会済みユーザー

2021/03/13 11:15 編集

ボタンが何のボタンか分からないけど、一応動作するものもあるのかぁ。 CSSの当たり方が怪しい気がするけど、キャプチャとかCSSのコードとか無いとちと厳しいかなと。 業務用のコードで出せないものだったりしますか?※ごはんタイムです。
Jojostyle

2021/03/13 17:06

業務用なのです。すみません。 後この数時間で分かったことがあって、改修前のコードではコントローラのなかでjqueryのqueueを使って処理をしていました。queueはflexsliderのなかにありましたが、上のエラーからもわかるようにjqueryがおかしい気がします。npmでやっているのですが、、、、
Jojostyle

2021/03/13 17:14

またrealshopcontrollerの最後の方のadd_couponまでは実行されているのをデータベースから確認できました。モーダルさえでれば解決なのですが、、、
Lulucom

2021/03/14 01:10 編集

正しい仕様がよくわからないのですが、 モーダルで「このクーポンを使う・予約する」ボタンを押すと、addToCastアクションが実行され、そのレスポンスをもとに、元のモーダルの内容を書き換える、という仕様なのでしょうか? そうだとすれば、JSコードで下記2行のうち、最初の1行だけで良いのではないかという気がしました。 $("#ajaxModal").html(data.html); // こちらはたぶん必要 $('#ajaxModal').modal('show'); // こちらは不要では?
退会済みユーザー

退会済みユーザー

2021/03/14 05:14

大変申し訳ないのですが、 業務用のコードということですので、無償での修正補助を行うことができません。 ※個人的な決めによるものです。業務用なのにタダ働きはおかしいという価値観に基づくもの。 Laravel側のJSの読み込みを一旦切って、 CDN等でjQueryを読み込んで動かしてみる等のアドバイスしか出来ません。 ※コード細切れで修正できる人はなかなかいないですし、僕も完全には原因を特定できないです。 CDNのjQueryでモーダルが動けば、Laravelでの読み込みがおかしいと考えられます。 CDNのjQueryでも動かなければ、DOM構成やCSSの当て方がおかしいと考えられます。 問題を切り分けて簡単にしつつ、とりあえずモーダルのみでも動くようなコードを用意し、 それをLaravelへ組み込むようにすると上手くいくかもしれません。 以下蛇足です。 個人的には以下の検証が必須かなと思います。 htmlとCSS、javascriptのみで1ファイルとし、モーダルが正常に動くか検証を行う。
Jojostyle

2021/03/14 08:01

了解しました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問