PHP - Submit button and Modal Pop-up AJAX on 2 browsers PHP

Question

I am new to php AJAX coding, my problem is I have TWO BROWSERS, first is I want to click the submit button and after that I want a modal to popup on the other browser so the final output will be a 2 browsers. just like a chat system. but it is different because I only want a button and a pop up modal.

so for example here is my button

<button type="button" class="btn btn-primary">CLICK TO POPUP</button>

My Modal

 <div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

How can I popup this modal to the other localhost browser

Answer 1

Concurrent snapshots with php socket, you can run the results in all open windows.

PHP Socket

WebSocket

Answer 2

First, we are writing the listener in a php file. then it writes a javascript process that will get the listener to tap and get feedback. I'm sending the socket e 'getOpenPopUp' message that we're connected to with javascript. The socket on the php side is sending the openPopUp message to all clients after verifying it. this message is received on the javascript side popUp opens. my English is not good at all. I'm sorry I couldn't tell.

socket.php - Ratchet Class Ratchet

<?php
    require __DIR__.'/vendor/autoload.php';

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;


use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;


class Application implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }


    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        if ( $msg === 'getOpenPopUp' ) {
            foreach ($this->clients as $client) {
                $client->send('openPopUp');
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {

    }

    public function onError(ConnectionInterface $conn, \Exception $e) {

    }
}


$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Application()
        )
    ),
    8080
);

$server->run();

App.js - WebSocket MDN Writing WebSocket client applications

var socket = new WebSocket('ws://localhost:8080');
var button = document.getElementById('button');


button.addEventListener('click', function() {
    console.log('click')
    socket.send('getOpenPopUp');
});


socket.onmessage = function(e) {
    console.log(e)
    if ( e.data === 'openPopUp' ) {
        UIkit.modal.confirm('UIkit confirm!');
    }
}

Answer 3

A simpler method is also controlled by ajax, which records the operation in a database every second, and popUp is shown with data from ajax if it needs to be shown in popUp.

But not a highly recommended method

Click Button

$.ajax({ url: "saveClickButton.php" })

setTimeout(function() {
    $.ajax({ url: 'isClickButton' }).done(function(data) {
      if ( data === "true" ) {
          // Open Pop Up
      }
    });
}, 1000)