How to call a modal using javascript or another language that works within HTML?

Asked

Viewed 175 times

0

Hello, I have a modal that has a registration form, when I click to register it calls a code PHP, that registers the information and initiates a session 'done registration. After opening the sessionit calls the page back, where is this modal. When starting this page HTML, some validations are executed. One of these validations is below.

What I want to do is click the button that opens this modal when this session 'done registration' for true. For when the person registers an item, the page be reloaded and open the modal automatically.

I tried several codes, from several forums and none worked. If I put an Alert in this script works normally. But this code: document.getElementById("btnModalCategoria").click();
and others who tried the error of a comma point or no error, but it does not work.

<?php
    if(isset($_SESSION['cadastro_efetuado'])):

    echo "<script>
        document.getElementById("btnModalCategoria").click();
    </script">

    endif;
    unset($_SESSION['cadastro_efetuado']);
?>
php javascript html session dom

2 answers

2


I believe your error is not the javascript code but rather where it is being rendered on your page. You need to ensure that the action of click of the button is executed when it is rendered, as there is no way to click on a button that does not exist. See the example below:

<script>
  document.getElementById("btnModalCategoria").click();
</script>

<button id="btnModalCategoria" onclick="alert('Clicked')">Click</button>

So to ensure that the script works after all HTML content is rendered, you can add the script at the end of all HTML content (before the tag closes </body>)

<body>
  <button id="btnModalCategoria" onclick="alert('Clicked')">Click</button>

  <script>
    document.getElementById("btnModalCategoria").click();
  </script>
</body>

Or use the property onload to be "triggered" when a given feature is loaded, which in this case is the window. 

<script>
  window.onload = function() {
    document.getElementById("btnModalCategoria").click();
  };
</script>

<button id="btnModalCategoria" onclick="alert('Clicked')">Click</button>

  • I understood.. But in the case of onload, it would run every time the page was loaded again. I didn’t want to. I want it only when the registration SESSION is true.

  • I’ll explain it better. The event onload will be triggered when the entire HTML page and its features are rendered. If you put a script that handles a button even before the button is rendered, it will not work. Then the event onload waits for the resources to be loaded to then execute the scripts. And as your JS code is within the condition if the registration is equal to true, only in this case the script will be "embedded" in the code.

  • Ahhhhh got it, it worked bro! Thanks really, I’ve been trying to fix it for days. Thanks!!

  • Give nothing @natanfoleto, I’m glad I helped you! If one of the responses from any user helped you get the expected result, mark it as the best response.

0

Looking at the code itself, initially you are not escaping code correctly from PHP.

See that:

 echo "<script>
    document.getElementById("btnModalCategoria").click();
</script">

is different from:

echo "<script>document.getElementById('btnModalCategoria').click();<script>";

See if you wrote it right here on the forum, if not correct please. That’s just talking about writing because .click is jQuery and you are mixing pure javascript with jQuery, to simulate a click using javascript will have to take a look at something about fireEvent. Other attempts can be performed using jQuery:

echo '<script>$("#btnModalCategoria").trigger("click");</script>'; //caso use jquery
echo '<script>$("#btnModalCategoria").click();</script>'; //caso use jquery
echo "<script>$('#btnModalCategoria').click();</script>"; //caso use jquery

Always paying attention to the use of quotes. If you need to give a echo "" using double quotes and need to escape ":

echo "<script>$(\"#btnModalCategoria\").click();</script>";

  • The method click() not only belongs to the Jquery library, the interface Htmlelement provides the method click() as we can read in the documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Browser other questions tagged php javascript html session dom

You are not signed in. Login or sign up in order to post.