【PHP】DBの値が特定の条件になったとき、モーダルウィンドウを表示

Question

お世話になっております。
下記知見のある方がいらっしゃいましたら、ご教示お願いいたします。

#実装したいこと
DBの値が特定の条件になったとき、モーダルウィンドウを表示(要素をdisplay:none→inline)したいのですが、どのように実装すればいいでしょうか。
※実装イメージ

#処理の流れ

「♡」ボタンを押したときに、押したユーザーと押されたユーザーのIDがデータベースに保存される仕組みになっています。
ajax処理を使用していて、『マッチ画面(match.php)』→『jsファイル(user_page.js)』→『DB処理するファイル(ajax_match_process.php)』と処理が遷移する流れになっています。

//ajax_match_process.php
:
    $stmt = $dbh->prepare($sql);
    $stmt->execute(array(':user_id' => $current_user_id, ':matched_user_id' => $user_id));
    if (count(check_matchs($user_id, $current_user_id)) == 2) {
      set_flash('danger', 'マッチできました');
    }
:

DB処理後にユーザーIDが相互で入っているか確認する条件文を入れています。
ここでモーダル画面を出力したいのですが、どのように実装すればよろしいでしょうか。

#確認したこと

//ajax_match_process.php
:
    $stmt = $dbh->prepare($sql);
    $stmt->execute(array(':user_id' => $current_user_id, ':matched_user_id' => $user_id));
    if (count(check_matchs($user_id, $current_user_id)) == 2) :
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$('.post_process').fadeIn();
$('.modal_post').fadeIn();
</script>
<?php
endif;
:

条件文の後にモーダル画面を表示するjs文を入れたのですが、動きませんでした。

#ソースコード

//match.php
<?php
require_once("../config_1.php");
$user = new User($current_user);
$users = $user->get_users("all");

?>
<?php
foreach ($users as $user) :
    if ($user['id'] != $current_user['id']) :
        if (!check_match($user['id'], $current_user['id'])) :
?>
<div class="matching_card">
    <div class="card" id="modal<?= $user['id'] ?>">

        <label>
            <i class="far fa-times-circle profile_clear"></i>
            <input type="button" id="profile_clear">
        </label>
        <img src="/user/image/<?= $user['image'] ?>" class="mypage">
        <h3 class="profile_name"><?= $user['name'] ?></h3>
        <p class="comment"><?= $user['profile'] ?></p>
        <div class="matching_btn">
            <label>
                <div class="fa-image_range">
                    <i class="fas fa-times-circle"></i>
                </div>
                <input type="button" id="unmatch_btn" data-target="#modal<?= $user['id'] ?>" style="display:none;">
                <input type="hidden" class="unmatch_user_id" value="<?= $current_user['id'] ?>">
            </label>

            <label>
                <div class="fa-image_range">
                    <i class="fas fa-heart"></i>
                </div>
                <input type="button" id="match_btn" data-target="#modal<?= $user['id'] ?>" style="display:none;">
                <input type="hidden" id="modal<?= $user['id'] ?>_userid" value="<?= $user['id'] ?>">
                <input type="hidden" class="match_user_id" value="<?= $current_user['id'] ?>">
            </label>

        </div>
    </div>

</div>
<?php require('../matching.php');
        endif;
    endif;
endforeach;
require_once("../footer.php");
?>

//ajax_match_process.php
<?php
require_once('config_1.php');

if (isset($_POST)) {

  $current_user_id = $_POST['current_user_id'];
  $user_id = $_POST['user_id'];
  $action = '登録';
  $flash_type = 'sucsess';
  $sql = "INSERT INTO `match`(user_id,match_user_id)
  VALUES(:user_id,:matched_user_id)";
  try {
    $dbh = db_connect();
    $stmt = $dbh->prepare($sql);
    $stmt->execute(array(':user_id' => $current_user_id, ':matched_user_id' => $user_id));
    if (count(check_matchs($user_id, $current_user_id)) == 2) :
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$('.post_process').fadeIn();
$('.modal_post').fadeIn();
</script>
<?php
    endif;
  } catch (\Exception $e) {
    error_log($e, 3, "../php/error.log");
    _debug('マッチ失敗');
    echo json_encode("error");
  }
}

?>

<?php
require_once('footer.php');

//関数
function check_match($user_id, $current_user_id)
{
  try {
    $dbh = db_connect();
    $sql = "SELECT user_id,match_user_id
        FROM `match`
        WHERE :user_id = user_id AND :match_user_id = match_user_id";
    $stmt = $dbh->prepare($sql);
    $stmt->execute(array(
      ':user_id' => $current_user_id,
      ':match_user_id' => $user_id
    ));
    return  $stmt->fetch();
  } catch (\Exception $e) {
    error_log($e, 3, "../../php/error.log");
    _debug('フォロー確認失敗');
  }
}

function check_matchs($user_id, $current_user_id)
{
  try {
    $dbh = db_connect();
    $sql = "SELECT user_id,match_user_id
        FROM `match`
        WHERE (user_id = :user_id and match_user_id = :match_user_id) or (user_id = :match_user_id and match_user_id = :user_id)";
    $stmt = $dbh->prepare($sql);
    $stmt->execute(array(
      ':user_id' => $current_user_id,
      ':match_user_id' => $user_id
    ));
    return $stmt->fetchAll();
  } catch (\Exception $e) {
    error_log($e, 3, "../../php/error.log");
    _debug('フォロー確認失敗');
  }
}

//ajax処理
$(document).on('click', '#match_btn', function(e) {
    e.stopPropagation();
    var current_user_id = $('.match_user_id').val(),
        target_modal = $(this).data("target"),
        user_id = $('' + target_modal + '_userid').val();

    $.ajax({
        type: 'POST',
        url: '../ajax_match_process.php',
        dataType: 'json',
        data: {
            current_user_id: current_user_id,
            user_id: user_id
        }
    }).done(function() {}).fail(function() {});
});

//matching.php モーダル画面
<div class="modal_post"></div>
<div class="post_process">
    <h2 class="post_title">マッチしました</h2>
    <img name="profile_image" class="editing_profile_img" src="/user/image/<?= $user['image'] ?>">
</div>

#Github
https://github.com/karirin/pair_code

Comments

[FKM]

リアルタイムなスタイル制御はVueかReactあたりを使うのがベターでしょうね。

[ryouya]

ご回答ありがとうございます。
Vue,Reactの仕様も確認したいと思います。

Answer 1

user_page.jsでPOSTした際、ajax_match_process.phpの中でmatchしたかどうかを返して、それを受け取った際にmatchしていたら

$('.post_process').fadeIn();
$('.modal_post').fadeIn();

で良いのではないでしょうか？