Question 14921 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

`

<!--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.

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    Just rewrite right way… hope it helps!

    Any questions, just ask and I’ll answer in the comments.

    <!--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 type="text/javascript">
  $(() => { 
    const Alert = (param) => { 
      const $dialog = $("#dialog");
      $('#targetContent')
        .html(param)
        .ready(async () => {
          $dialog
            .dialog({ 
            autoOpen: false,
            height: "auto",
            width: 400,
            modal: true,
            resizable: false,
            buttons: {
              "Ok": () => {
                $($dialog).dialog("close");
                return resolve(true);
              }
            } 
          });
        })
      ;
    };
    Alert("test");
  });
</script>
<div id="dialog">
    <p id="targetContent">Old content</p> 
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search