How to automatically open URL after clicking button and executing PHP code

Question

I have a Joomla website and I am trying to automatically open a modal window with a web page whose parameters are passed in the URL.

The website capability goes like this: A trip leader looks up a trip and he can schedule to lead that trip by clicking on a button. When the button is clicked I have working Php code that saves the trip data to a calendar database and retrieves the id number of the row. The next step is to edit the entry in the calendar component after passing the information in the URL. I created the correct URL in a Php variable but I am stuck on how to automatically open a modal window with the page for editing .

Here is some of the code I have:

<form action="" method="post">
    <input type="submit" name="submit" id="submit" value="Lead This Trip" />
<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {...code to save data to calendar}
?>

At the end I have a variable called $url which contains the correct URL for opening the modal website.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*hide the modal container in the beginning */
#modal {
    display: none;
}
</style>
<!-- this is where your html will populate -->
<div id="modal"></div>
<form action="" method="post">
    <input type="hidden" name="action" id="submit" value="leadteam" />
    <input type="submit" name="submit"  value="Lead This Trip" />
</form>

<script>
// When the page has loaded
$(document).ready(function() {
    /*
      If you need to only have it happen on one or more times, but not every time,
       you can use a selector such as id="whatever" in your form:
       $('#whatever').submit(....etc
       or you want perhaps some but not all forms, use class="whatever" in your form:
       $('.whatever').submit(....etc
    */
    $('form').submit(function(e) {
        // prevent the natural submission of the form
        e.preventDefault();
        // create an ajax instance
        $.ajax({
            /*
               This is the where your edit page is located
               If you were to use different forms, you can use the 
               attr in jquery to grab the action="/whatever.php" in the form
               url: $(this).attr('action'),
               This will allow you to use this same code without copy pasting
               but will then allow for any the forms in your site
             */
            url: '<?php $url ?>',
            // This function turns your submission to a post string
            data: $(this).serialize(),
            // Sends as a post
            type: 'post',
            // If the ajax is successful
            success: function(response) {
                // Fade in the modal window
                $('#modal').fadeIn(function() {
                    // Populate with the content on your edit page
                    $(this).html(response);
                });
            }
        });
    });
});
</script>

Here is the relevant code I pasted into my Php file.

You may want to try using a AJAX for this instead of just PHP. — Rasclatt
– Rasclatt, Commented Mar 12, 2016 at 17:10
Can I run the PHP code I have already created inside the ajax container? I do not want the php code (added to an existing Joomla PHP file) to run unless the button is clicked. The idea behind the modal popup is to provide a window in which the user can specify a time and date for leading the trip. — user3520372
– user3520372, Commented Mar 12, 2016 at 21:40
Yeah all your existing work will still work, you may just have to fix some styles — Rasclatt
– Rasclatt, Commented Mar 12, 2016 at 22:11
I turned my PHP code into a function called "lead_trip" which returns the variable $url containing the URL. The URL looks like this for now (while I test locally) localhost/index.php/… where would this appear in the code? In other words where would I call the function and resolve the URL variable $url? — user3520372
– user3520372, Commented Mar 12, 2016 at 23:00
Ok so how Ajax works is you click the submit button in the form, the JavaScript cancels the reload of the the page, then the page that contains your team leader form loads into the modal div. it's basically like loading the other page in a browser except it loads the page into a a container like a div or span, whatever — Rasclatt
– Rasclatt, Commented Mar 12, 2016 at 23:09

Rasclatt · Accepted Answer · 2016-03-12 18:14:04Z

1

You may want to use ajax to accomplish this:

<!-- You need the jQuery library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*hide the modal container in the beginning */
#modal {
    display: none;
}
</style>
<!-- this is where your html will populate -->
<div id="modal"></div>
<form action="" method="post">
    <input type="hidden" name="action" value="leadteam" />
    <input type="submit" name="submit" id="submit" value="Lead This Trip" />
</form>
<script>
// When the page has loaded
$(document).ready(function() {
    /*
      If you need to only have it happen on one or more times, but not every time,
       you can use a selector such as id="whatever" in your form:
       $('#whatever').submit(....etc
       or you want perhaps some but not all forms, use class="whatever" in your form:
       $('.whatever').submit(....etc
    */
    $('form').submit(function(e) {
        // prevent the natural submission of the form
        e.preventDefault();
        // create an ajax instance
        $.ajax({
            /*
               This is the where your edit page is located
               If you were to use different forms, you can use the 
               attr in jquery to grab the action="/whatever.php" in the form
               url: $(this).attr('action'),
               This will allow you to use this same code without copy pasting
               but will then allow for any the forms in your site
             */
            url: '/leadtrip.php',
            // This function turns your submission to a post string
            data: $(this).serialize(),
            // Sends as a post
            type: 'post',
            // If the ajax is successful
            success: function(response) {
                // Fade in the modal window
                $('#modal').fadeIn(function() {
                    // Populate with the content on your edit page
                    $(this).html(response);
                });
            }
        });
    });
});
</script>

edited Mar 12, 2016 at 18:14

answered Mar 12, 2016 at 17:21

Rasclatt

12.5k3 gold badges28 silver badges33 bronze badges

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

2 Comments

user3520372 Over a year ago

I tried the code in a jsfiddle [link] jsfiddle.net/86470wo3/6 [/link] and it appears to work right, however, when I copied it into my Php file clicking on "Lead This Trip" does not open the modal window. My Php code does get executed though.

Rasclatt Over a year ago

Can you pst an edit to you question and show wahat you have so far?

KIMB-technologies · Accepted Answer · 2016-03-14 21:49:07Z

0

You can open by click a smaller new window with the URL.

<a href="<?php echo $url; ?>" target="popup" onclick="window.open('<?php echo $url; ?>', 'popup', 'width=900px,height=500px,top=20px,left=20px'); return false;">Open modal Window</a>

If you don't want to use such a Popup, you can use the JQuery UI Dialog widget and an AJAX query.

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog" title="Basic dialog" style="display: none;">
  Loading ...
</div>

<script>
 function openModal(){
    var modalurl = "<?php echo $url; ?>";
    $( "#dialog" ).dialog();
    $( "#dialog" ).load( modalurl  );
  }
</script>

  <button onclick="openModal();">Open Modal</button>

See https://jqueryui.com/dialog/ and http://api.jquery.com/load/

And an example here https://jsfiddle.net/t1d35ekk/

I don't know if the modal windows is the right thing for you, if you want to tell the Browser to open an new URL using PHP, you can set a header:

header( 'Location: '.$url  );
die;

Edit:

Maybe I understand something wrong, so I have changed the code:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog" title="Trip" style="display: none;">
  Loading ...
</div>

<form action="" method="post">
    <input type="hidden" name="action" value="leadteam" />
    <input type="submit" name="submit" id="submit" value="Lead This Trip" />
</form>

<script>
  $('form').submit(function(e) {
    e.preventDefault();
    $( "#dialog" ).dialog({
         height: 400,
         minWidth:400,
         close: function( event, ui ) {
             window.location.href = "url to open on close";
         }
    });
    $.ajax({
        url: '<?php echo $url; ?>',
        data: $(this).serialize(),
        type: 'post',
        success: function(response) {
              $( "#dialog" ).html(response);
        }
    });
});
</script>

edited Mar 14, 2016 at 21:49

answered Mar 12, 2016 at 17:24

KIMB-technologies

8796 silver badges14 bronze badges

9 Comments

user3520372 Over a year ago

The problem with this code is my Php code which saves the trip to the database and generates the trip schedule edit URL does not get activated.

KIMB-technologies Over a year ago

I added some code from Rasclatt to my jQuery UI Dialog solution. I hope it will work now.

user3520372 Over a year ago

Your code is now working. Strange that in Rasclatt's code when I tried url: '<?php echo $url; ?>' it did not work. How can I change the size of the popup window? Can I load another webpage after the modal window is closed to prevent double posting? And can the background page be a dark translucent?

KIMB-technologies Over a year ago

I added some code and have a look at api.jqueryui.com/dialog for further infomation. You can design you own theme for the Dialog online at jqueryui.com/themeroller. Just include the CSS file from the download zip file to your page (instead of //code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css)

user3520372 Over a year ago

Thank you very much for your effort. Your revised code worked as expected for a few times. Now something odd is going on with the url in the ajax code (similar issue to Rasclatt's code) where I can see the correct url for a fraction of a second and then it defaults to the current page in the modal window - very frustrating.

|

Collectives™ on Stack Overflow

How to automatically open URL after clicking button and executing PHP code

2 Answers 2

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related