How to redirect back to index page and display modal pop up as per redirecting? PHP

Question

i have an index page which asks for input. after submit button is clicked, the input is processed in another .php file (process includes using imagecreatefromjpeg and mysql queries). now, it needs to redirect to index again and show a modal popup saying thank you. i am able to redirect to index page again using this code:

    if (!empty($name) && !empty($email) && !empty($office_id) && !empty($title) && !empty($story)) {

        $save_sql = "INSERT INTO `tbl_amadeuscontest` (filename, name, email, office_id, title, story, time) VALUES ('$img_newname','$name','$email','$office_id','$title','$story','$sql_date')";

        $query = mysql_query($save_sql,$con) or die(mysql_error("Could not write information to the database")); 

        if (mysql_affected_rows($con) !== 0) {              
                    header('Location: ' . $uploadForm);

                } 

        mysqli_close($con);
    }

basically, it is the header('Location: ' . $uploadForm); that does the job. but how can i overlay a modal popup saying thank you on it at the same time? do i need to call the js. finction? or do i need to echo the HTML? where do i need to place the codes? thanks.

i have some HTML codes for modal popup here: HTML `

                <div class="modal-inner">
                        <img src="http://mysite.com/modal/images/thanku-post.jpg" />
                </div>

                <!-- Use Hash-Bang to maintain scroll position when closing modal -->
                <a href="#!" class="modal-close" title="Close this modal"
                        data-dismiss="modal">&times;</a>
            </section>
<script src="js/modal.js"></script>`

EDIT 1 modal.js

`(function(global) { 'use strict'; // Storage variable var modal = {}; // Store for currently active element modal.lastActive = undefined; modal.activeElement = undefined; // Polyfill addEventListener for IE8 (only very basic) modal._addEventListener = function (element, event, callback) { if (element.addEventListener) { element.addEventListener(event, callback, false); } else { element.attachEvent('on' + event, callback); } }; // Hide overlay when ESC is pressed modal._addEventListener(document, 'keyup', function (event) { var hash = window.location.hash.replace('#', '');

    // If hash is not set
    if (hash === '' || hash === '!') {
        return;
    }

    // If key ESC is pressed
    if (event.keyCode === 27) {
        window.location.hash = '!';

        if (modal.lastActive) {
            return false;
        }

        // Unfocus
        modal.removeFocus();
    }
}, false);

// Convenience function to trigger event
modal._dispatchEvent = function (event, modal) {
    var eventTigger;

    if (!document.createEvent) {
        return;
    }

    eventTigger = document.createEvent('Event');

    eventTigger.initEvent(event, true, true);
    eventTigger.customData = { 'modal': modal };

    document.dispatchEvent(eventTigger);
};


// When showing overlay, prevent background from scrolling
modal.mainHandler = function () {
    var hash = window.location.hash.replace('#', '');
    var modalElement = document.getElementById(hash);
    var htmlClasses = document.documentElement.className;
    var modalChild;
    var oldModal;

    // If the hash element exists
    if (modalElement) {

        // Get first element in selected element
        modalChild = modalElement.children[0];

        // When we deal with a modal and body-class `has-overlay` is not set
        if (modalChild && modalChild.className.match(/modal-inner/)) {
            if (!htmlClasses.match(/has-overlay/)) {

                // Set an html class to prevent scrolling
                document.documentElement.className += ' has-overlay';
            }

            // Unmark previous active element
            if (modal.activeElement) {
                oldModal = modal.activeElement;
                oldModal.className = oldModal.className.replace(' is-active', '');
            }
            // Mark modal as active
            modalElement.className += ' is-active';
            modal.activeElement = modalElement;

            // Set the focus to the modal
            modal.setFocus(hash);

            // Fire an event
            modal._dispatchEvent('cssmodal:show', modal.activeElement);
        }
    } else {
        document.documentElement.className =
                htmlClasses.replace(' has-overlay', '');

        // If activeElement is already defined, delete it
        if (modal.activeElement) {
            modal.activeElement.className =
                    modal.activeElement.className.replace(' is-active', '');

            // Fire an event
            modal._dispatchEvent('cssmodal:hide', modal.activeElement);

            // Reset active element
            modal.activeElement = null;

            // Unfocus
            modal.removeFocus();
        }
    }
};

modal._addEventListener(window, 'hashchange', modal.mainHandler);
modal._addEventListener(window, 'load', modal.mainHandler);
modal.setFocus = function () {
    if (modal.activeElement) {

        // Set element with last focus
        modal.lastActive = document.activeElement;

        // New focussing
        modal.activeElement.focus();
    }
};

// Unfocus
modal.removeFocus = function () {
    if (modal.lastActive) {
        modal.lastActive.focus();
    }
};

// Export CSSModal into global space
global.CSSModal = modal;

}(window));`

please note that $uploadForm means $uploadForm = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'index.php'; thanks in advance for your answer. hope you can help me to sort it out.

score 0 · Answer 1 · edited Nov 02 '13 at 02:22

0

You can just pass a ?openModal=1 variable to your index page. In your view file, write a conditional that will show your modal. I don't know how your modal is working but either just make the css appear or run your js script that will toggle it on from there.

in your redirect php file

 header('Location: ' . $uploadForm . '?modal=1');

in your html

<?php if($_GET['modal'] == 1){ ?>
 do something to make your modal appear
<?php } ?>

edited Nov 02 '13 at 02:22

NullPoiиteя

56,591
22
125
143

answered Nov 02 '13 at 01:59

uptownhr

662
6
15

thanks for the answer @uptownhr. i tried it but it's still not showing up the modal. what am i doing wrong here? hope you can help me further. thanks – Jben Kaye Nov 02 '13 at 10:45
do i have to declare `?openModal=1`? or it's the `header('Location: ' . $uploadForm . '?modal=1');` that makes the declaration itself? thanks – Jben Kaye Nov 02 '13 at 12:45

score 0 · Answer 2 · edited Nov 02 '13 at 02:23

0

Quick and dirty answer. Modify your other.php file to do something like this:

header('Location:' . $uploadForm . '?thanks=1');

Then in your index.php, at the bottom, near where the body tag closes, do this:

<?php if (isset($_GET['thanks']) && 1 == $_GET['thanks']) { ?>
<script type='text/javascript'>
alert('Thanks!');
</script>
<?php } ?>
</body> <!-- end of body -->

You can do whatever kind of fancy Javascript you want inside that script tag.

The idea here is simple: when your index.php is given thanks=1 in the query, it shows the modal pop-up. You engineer your other .php to be the only time you expect thanks=1 to be given.

edited Nov 02 '13 at 02:23

NullPoiиteя

56,591
22
125
143

answered Nov 02 '13 at 01:59

bishop

37,830
11
104
139

hi @bishop thanks for the answer. i tried your what you said. i used `header('Location:' . $uploadForm . '?thanks=1');` in the javascript i changed it to `(function (global) { some code here}` but its not showing the modal popup. but i can see the link turn to "http://mysite.com/Folder/index.php?thanks=1". what am i doing wrong here? thanks again – Jben Kaye Nov 02 '13 at 10:27
i also have `` in the index.php – Jben Kaye Nov 02 '13 at 10:32
thanks @NullPointer for furthering bishop's answer. if you have any other idea please feel free to answer. thanks again – Jben Kaye Nov 02 '13 at 10:46
Hi! i have edited my question. note that `$uploadForm = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'index.php';`. however, i tried to alter it as to `$uploadForm = 'index.php';` but it still didnt work. – Jben Kaye Nov 02 '13 at 13:09
Based on your first comment, you put a function definition inside the script tags, but don't actually call the function. Start simple and just put alert('Thanks!') in the script tags. Does that work? Also, you should be able to test the popup part by calling the URL directly, eg in your browser http://...whatever../index.php?thanks=1. – bishop Nov 02 '13 at 15:55
I tried using alert and i worked. now hoa can i call the javascript? originally, it is in a .js file. can i just call the file? how? thanks – Jben Kaye Nov 02 '13 at 16:22
Generally, load your Javascript with a script tag in the head, then call the loaded functions from the script tag you added to the body. If you'll post your complete code, I can help faster and more precisely. :) – bishop Nov 02 '13 at 17:03
thank you bishop . i edited my quetion and added the code in modal.js. thanks again – Jben Kaye Nov 02 '13 at 17:18
Really hard to read here, but from what I can tell, this Javascript code is meant to activate in response to an event (click, touch, keypress). Some glue will have to be added to bridge that. Can you post the rendered html and the javascript to something like jsfiddle? – bishop Nov 02 '13 at 18:03

How to redirect back to index page and display modal pop up as per redirecting? PHP

2 Answers2

Linked