How to open a specific modal after form submitted and location redirect

Question

I got a form inside a modal, and when it's submitted i don't want it to close. They way i got my SQL UPDATE statement setup is so it will redirect to the same page if the datebase got updated, so this is messing alot of stuff up when trying to keep the modal open.

if (isset($_POST['insert6']))
{
    $kval_antall = $_POST['kval_antall'];
    $id = $_POST['id'];

    $sql6 = ("UPDATE test3 SET kval_antall='$kval_antall' WHERE id='$id'");


    if (mysqli_query($conn, $sql6)) {
    header("Location: aktivbonus.php");
    exit;
} else {
    echo "Error: " . $sql6 . "<br>" . mysqli_error($conn);
}}

Because if i put some code before and keep the modal open, if the data gets successfully updated in the database it will go back to the same page and close the modal anyway. I can't find a way to open the modal after i have redirected.

This is some of the stuff i have tried: (Answer from bishop) How to redirect back to index page and display modal pop up as per redirecting? PHP

The code works and displayes the message perfectly after the form has been submitted and redirected back, but when i insert this nothing happens:

<?php if (isset($_GET['thanks']) && 1 == $_GET['thanks']) { ?>
<script type='text/javascript'>
   $("#message539").modal("show");
</script>
<?php } ?>

The way i got my website working is that a button appears on the page with data-target="#message539" <- id changes, depening on which button you press.

Same with the modal its trying to call (Same here id changes):

<div class="modal fade bd-example-modal-lg" id="message'. $row['id'] .'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

In this change its the modal #message539, i'm trying to call. If someone got a good way of doing this, help is very much appreciated as i'm abit lost now with trying to many different things.

I tried my best explaning what i want and it can be hard to understad, so please ask if something is unclear. Thank you.

Modal

<?php
    while ($row = mysqli_fetch_assoc($result)) {
        $test55 = '<div class="card card-date"><div class="card-body card-body-date text-secondary"><h5>' . strftime('%e.%B',strtotime($row['date'])) . ' <div class="card-header-date"><i class="material-icons">arrow_downward</i></div></h5></div></div>';
        echo $test55 !== $prevDate ? $test55.'' : '';
        $prevDate = $test55;
        echo '
        <div class="card border-info card-margin">
            <h5 class="card-header text-secondary">
                '. $row['bookmaker']. ': '. $row['bettype']. ' '. $row['betvalue']. 'kr <div class="card-header-date">Dato lagt til: Kl.'. strftime('%H:%M, %e.%b',strtotime($row['date2'])) . '</div>
            </h5>
            <div class="card-body text-secondary">
                <h5 class="card-title">Status:</h5>
                <p class="card-text">' . $row ['status'] . '</p>
                </div>
            <div class="card-footer bg-transparent"><div class="text-right"><button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#message'.$row['id'].'">Endre</button></div></div>   <-- BUTTON THAT OPENS THE MODAL
            </div>
        </div>
        <div class="modal fade bd-example-modal-lg" id="message'. $row['id'] .'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <--- MODAL
          <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header card-header">
                  <h5 class="modal-title text-secondary" id="exampleModalLabel">'.$row['bookmaker'].': '.$row['bettype'].' '.$row['betvalue'].'kr</h5><div class="text-secondary" style="font-size: 1.25rem;font-weight: 500;">Dato lagt til: '.strftime('%H:%M, %e.%b',strtotime($row['date2'])).'</div>
                </div>
                <div class="modal-body">

Please post the code of your modal and how you open it. You need to reopen the modal, when the you redirect to the page. You could call the page with a flag, to reopen the modal. E.g. you could redirect to the page using header("Location: aktivbonus.php?reopenmodal=true"); And if this flag is set, you attach the (javascript) code to reopen the modal. — Marvin Klar, Feb 21 '19 at 12:29
@MarvinKlar Will post the code. I have already tried that, but it wont work and i think it is because it can't find the id of the modal before the button is pressed to open it. (Because its getting the id and creating the modal id when the button is pressed) — Seb, Feb 21 '19 at 12:31

score 5 · Accepted Answer · answered Feb 21 '19 at 12:43

5

You can use localStorage to keep track if you need to open the modal or not when you enter the redirect page:

When calling the update function:

localStorage.setItem('openModal', '#message539'); // Use message'. $row['id'] to dinamically save it

When loading the page:

 var modalId = localStorage.getItem('openModal');
 if (modalId != null){
  $(modalId).modal("show");
  localStorage.removeItem('openModal');
 }

answered Feb 21 '19 at 12:43

Albondi

1,141
1
8
19

That might work. Can i echo out the localstorage in a script tag in my SQL UPDATE statement? – Seb Feb 21 '19 at 12:52
1

You can exectue a JS function before submitting the form to your server. There you save the item in the localStorage. [Check here](https://stackoverflow.com/questions/8133712/execute-javascript-code-straight-before-page-submit) – Albondi Feb 21 '19 at 13:07
Alright, so now its saving to localstorage. Also i have tried alerting out the modalId and that is working, but it still wont open the modal. So something is wrong with the code to open the modal, but i can't see what.. – Seb Feb 21 '19 at 13:19
1

Try deleting data-toggle="modal" from the button. [This question](https://stackoverflow.com/questions/11404711/how-can-i-trigger-a-bootstrap-modal-programmatically) might help you to open the modal programatically – Albondi Feb 21 '19 at 13:23
Stupid me, placed the new script above the bootstrap and jQuery.js ahah. It works perfectly now. Just one last question. Dont aways want to toggle #message539, and you wrote i can use $row['id'].. but how do i do that in Javascript? – Seb Feb 21 '19 at 13:29
1

What you can do is in the onclick function of the different butttons with different IDs, you pass the ID as a string to the JS function (add a new parameter) and that parameter is what you save in localstorage like this `localStorage.setItem('openModal', modalId)`. – Albondi Feb 21 '19 at 13:32
1

Finally, got it working to pass the id. Thank you for all the help. – Seb Feb 21 '19 at 13:57

score 0 · Answer 2 · answered Feb 21 '19 at 12:56

use javascript or jQuery to do so: send a flag of success while redirecting, and check that flag on redirected page if its true than display modal using jQuery,

eg: (view page)

$flag = $flag?1:0;
<button id="btn-modal-open" style="display:none">clcik</button>

and in jQuery function

$( document ).ready(function() {
var flag = "<?= $flag?>";
if(flag){
$('#btn-modal-open')[0].click(); //create one
//button and give id as btn-modal-open so that on 
//click of button modal should popup
  }
});

need more explaination than tell me

How to open a specific modal after form submitted and location redirect

2 Answers2