Why isn't this code working? It doesn't seem to be selecting the HTML elements properly-CodePudding

<!--jQuery--><script src="//code.jquery.com/jquery-1.12.4.js"></script>
<!--jQuery UI--><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--jQuery UI CSS--><link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
    function Alert(a){
    $("#p")[0].innerHTML = a;
        return new Promise(resolve => {
            $("#main").dialog({
                autoOpen: false,
                height: "auto",
                width: 400,
                modal: true,
                resizable: false,
                buttons: {
                    "Ok": () => {
                        $(this).dialog("close");
                        resolve(true);
                    }
                }
            });
        });
    }
</script>
<script>
$(document).ready(function(){
    await Alert("test");
});
</script>
<div title="Message!" id="main">
    <p id="p"></p>
</div>

I'm wanting it to open a popup with the popup title of Message! and with the text of test. I've tried so many things to fix this but I can't. I've come to the conclusion that it's not selecting the elements properly.

CodePudding user response：

conclusion that it's not selecting the elements properly

That's not correct, your code is working fine. Just that the dialog is not opened because autoOpen is set to false. I tried this code, hope it helps:

(also I don't think you need Promise)

<!DOCTYPE html>
<html>

<body>

  <div title="Message!" id="main">
    <p id="p">Paragraph to change!</p>
  </div>

  <!--jQuery-->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <!--jQuery UI-->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <!--jQuery UI CSS-->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

  <script>
    function Alert(a) {
      alert("a: "   a)
      $("#p")[0].innerHTML = "I have changed!";
      $("#main").dialog({
        autoOpen: true,
        height: "auto",
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
          "Ok": () => {
            $(this).dialog("close");
            resolve(true);
          }
        }
      });
    }

    $("document").ready(function() {
      Alert("test");
    });
  </script>

</body>

</html>

Just one thing not related to your error though just informing you so you will remember this, this code is actually not right

$(document).ready(function(){
    await Alert("test");
});

The await keyword is only valid inside async functions within regular JavaScript code.

CodePudding user response：

Here is what I suggest:

The first thing I noticed is that there is no async on the left of function on your document ready. Try adding async and see if it solves the problem
Or may by try to combine that 2 script tags into one
If it still doesn't work, try logging it out with console.log() or regular alert() on your value, see if it's even return something at all. Maybe that $("#p") doesn't need the first index to be accessible because it is an id, not a class