Activating popup (HTML,PHP,Javascript/Jquery)

Question

I have a simple request for you brainies today. What i am trying to do is to activate a pop-up inside PHP tags. I have tested to see if the pop-up works by itself, and it does. My problem is the button, i have used the same setup elsewhere, but this time no cigar. I have also tried echoing the button inside the PHP tags but nothing happens.

My code:

<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
  <script src="Lib\Jquerylib.js"></script>
  <script src="Lib\JqueryUI.js"></script>

</head>
<body>

<button type=" button" class="LeButton"> Clicky Clicky!</button>

<?php
if(isset($_POST['LeButton'])){

echo'<script> $(function() { $( "#dialog" ).dialog(); }); </script>';
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p>'; </div>';}
?>
</body>
</html>

I tried specifying it as a function aswell and added onclick() to the button to call that function, nothing happend either. Mind that this is the first time i am ever using Javascript/jQuery.

The last echo is invalid. The last </div> should give you a syntax error. — Jeroen Bellemans
– Jeroen Bellemans, Commented Aug 14, 2018 at 11:33

Ronnie Oosting · Accepted Answer · 2018-08-14 12:06:23Z

4

I (kindly) lauched a bit about the echo <script> part.

Allow me to write you a piece of code, with explanation and documentation:

HTML button:

<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>

&

<div id="dialog" title="Basic dialog" style="visibility:hidden"><p>Image:</p> <img src="http://placehold.it/50x50" alt="Placeholder Image" /></div>

Explanation:

Your button needs an id value. Which is called 'LeButton' in this example.

Documentation:

https://www.w3schools.com/tags/att_id.asp

jQuery part:

<script>
    jQuery(document).ready(function() {

        /**
         * @version 1.0.0.
         *
         * Do magic on button click 'LeButton'
         */
        $("#LeButton").click(function() {
            $("#dialog").css("visibility", 'visible'); // make the div visible.
            $("#dialog").dialog(); // Post here your code on forexample poping up your modal.
        });
    });
</script>

Explanation:

Your tag can be placed on the bottom of your page. Your browser will 'read' the whole page. By saying '(document).ready', your script will be executed once the page has been red by your browser.

For the '.click' part it's a jQuery function you can use. So which means: once id attribute 'LeButton' (#) is clicked, jQuery will execute a function, which will alert text in this case.

Documentation:

https://api.jquery.com/click/

Note: Make sure you have jQuery included/enabled.

Link:

https://jquery.com/download/

Note from Simon Jensen:

You should elaborate that the Class-attribute is for styling and the Id-attribute can be for whatever code or identifying purposes and are unique. Therefore should people be careful with styling with the Id-attribute as things might conflict at some point. The ID-attribute is used to interact with the "#LeButton" attribute.

edited Aug 14, 2018 at 12:06

answered Aug 14, 2018 at 11:15

Ronnie Oosting

1,2523 gold badges15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

D3nj1 Over a year ago

It is very nicely explained, but why would the button need an ID value? Also an alert() is not an option as it can't display images :-)

Simon Jensen Over a year ago

You should elaborate that the Class-attribute is for styling and the Id-attribute can be for whatever code or identifying purposes and are unique. Therefore should people be careful with styling with the Id-attribute as things might conflict at some point. The ID-attribute is used to interact with the "#LeButton" attribute.

D3nj1 Over a year ago

@RonnieOosting Nope i do not use bootstrap :-)

Ronnie Oosting Over a year ago

Nice explanation @SimonJensen. I will add it!

altrisi · Accepted Answer · 2018-08-14 11:30:06Z

The PHP can't be run from the client. If you want the dialog to be shown onclick of the button, you must send the element before it's clicked, at the moment when it is sent to the client. You should have the dialog element hidden until the user clicks the button. It could be something like:

<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
    <script src="Lib\Jquerylib.js"></script>
    <script src="Lib\JqueryUI.js"></script>

</head>
<body>

<button type=" button" class="LeButton" onclick="$('#dialog').dialog()"> Clicky Clicky!</button>

<div id="dialog" title="Basic dialog" style="display:none">
    <p>Image:</p>
</div>
</body>
</html>

You could also change the onclick attribute to a script in the head like this:

<script>
    $(function() {
        $(".LeButton").click(function() {
            $('#dialog').dialog();
        });
    });
</script>

I recommend you to change the class of the button for an id, and then using #LeButton instead of .LeButton

Amr Aly · Accepted Answer · 2018-08-14 11:34:40Z

You can handle this on the client-side without the need to use PHP to do so you need to give your button a unique identifier so whenever the button is clicked you can open the dialog using a simple evenlisener like so:

var dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      
      close: function() {
       // do stuff here whenever you close your dialog
      }
    });
    
  document.getElementById('my-button').addEventListener('click', function () {
    dialog.dialog('open');
  });

#dialog-form {
 background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<button type=" button" id="my-button" class="LeButton"> Clicky Clicky!</button>

<div id="dialog-form">
  Name: <input><br/>
  Password: <input type="passowrd">
</div>

C. van Dorsten · Accepted Answer · 2018-08-14 11:43:46Z

<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
  <script src="Lib\Jquerylib.js"></script>
  <script src="Lib\JqueryUI.js"></script>

</head>
<body>

<form action="index.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="LeButton" value="an_arbitraty_value">
<input type="submit" class="LeButton">
</form>

<?php
if(isset($_POST['LeButton'])){

echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p></div>';

} 
?>
</body>
</html>

When you load the html page $_POST['LeButton'] is not set. Therefore the intended dialog box wil not be generated in the page. In order to have $_POST['LeButton'] set, you should pass it to the html page first, hence the form I added.

Alternatively you could go for a full javascript solution like so:

<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    .hidden { display: none }
  </style> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>

<button type=" button" class="LeButton" onclick="showDialog();">
Clicky Clicky!
</button>

<div id="dialog" title="Basic dialog" class="hidden">

<p>
This is the default dialog which is useful for displaying information. 
The dialog window can be moved, resized and closed with the 'x' icon.
</p>

</div>    

<script>
function showDialog() {
  $( "#dialog" ).dialog();
};
</script>

</body>
</html>

Collectives™ on Stack Overflow

Activating popup (HTML,PHP,Javascript/Jquery)

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related