Page refresh pause for popup modal

[PNewCode]

Hello everyone

My next learning adventure is almost complete, except for a pesky issue with refresh.
So, the page refresh is necessary because it displays data from my database in real time
Note: I know that ajax is better for this however that method still used a fresh, or at least the way I could make it work did.

So since this is easier for me to learn from now (baby steps for my mind) I'm going with a script to refresh the page

The problem... the page that I have that is being refreshed is in an iframe (because it has to be within a page with other link options to it, bla bla bla)
and in that iframe, has a page that has a popup modal (which is important because the main page with content will still have to be behind it)
If the button is clicked to bring up that popup, then it opens for 1 second (the time of the refresh) and then disappears

I understand why this is happening. So what I want to know is, is there a script or something that can pause the refresh while the popup modal is open, OR have the modal open on TOP of the iframe, and still keep the database info that is within the page, inside that iframe?

Note: The modal works perfect on the page when viewing Outside of the iframe, but that is because there is no refresh on it by itself. Only the iframe is being refreshed

I'm guessing the option to pause the refresh might be best.

Here is the refresh that is in my main page
 

<script type="text/javascript">
	setInterval(function(){
      $('#test').load('batch.php');
 },1000);
</script>

And here is the modal inside "batch.php"

 

// one or more of these might be for something else on the page. I lost track to be honest which one is for the modal

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<script>
function show_modal(e)
{
    console.log (e.href);
    $("#iframe_modal").attr("src", e.href);
    $('#myModal').modal('show');
    return false;
}
</script>


// below is what is inside the modal which is a form to send info to the database

<table width="40%" border="0" align="center">
  <tr align="center" valign="middle"> 
    <td> 
      <div class="container"> <br>
        <a href="post-req.php" class="btn btn-primary" onclick="return show_modal(this);">Comment</a> 
        <br>
        <br>
      </div>
      <div class="modal fade" id="myModal" role="dialog"> 
        <div class="modal-dialog"> 
          <div class="modal-content"> 
            <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> 
              <h4 class="modal-title">Comment This</h4>
            </div>
            <div class="modal-body"> <iframe id="iframe_modal" src="" style="width: 100%; height: 40%;"></iframe> 
            </div>
            <div class="modal-footer"> <button type="button" class="btn2 btn-default" data-dismiss="modal">Close</button> 
            </div>
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>

 

[kicken]

57 minutes ago, PNewCode said:

Note: I know that ajax is better for this however that method still used a fresh, or at least the way I could make it work did.

This is probably the true solution.  If you want to expand more on the actual problem of getting data dynamically loaded and what you've tried, perhaps we can help you with that and get you a real solution.

 

Your issue with your hack is that you have an iframe boundary that's complicating things.  Why is your modal part of the iframe and not part of the main page?  Why is your main page controlling the refresh instead of the iframe itself?  Removing this boundary will simplify things considerable so I'd suggest if you don't want to re-attempt an ajax solution, you work on removing this boundary problem.  Either make the iframe refresh itself (an thus, able to stop itself), or move the modal into the main page so it's not affected by the refresh.