I have a very small jquery script to popup when there is an error from inputted data. Sometimes it works, but most times I just get the errors output on the screen. A simple javascript alert box works fine.

I am using a contentEditable table which uses JQuery and it works fine. JQuery is above my pay grade so not sure what to do. I have read tons of articles on this until my eyes bled but nothing I could find on this exact issue.

This is the popup code: $error is something like - Please enter your name....

          <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    
      <script>
      $( function() {
        $( "#dialog" ).dialog();
      } );
      </script>  
        
     <div id="dialog" title="Please correct the following errors!">
        <p><?php echo $error; ?></p>
     </div> 

This is the inline JQuery script which works fine.

$("#btnSaveAction").on("click",function(){
params = ""
$("td[contentEditable='true']").each(function(){
    if($(this).text() != "") {
        if(params != "") {
            params += "&";
        }
        params += $(this).data('id')+"="+$(this).text();
    }
});
if(params!="") {
    $.ajax({
        url: "insert-row.php",
        type: "POST",
        data:params,
        success: function(response){
          $("#ajax-response").append(response);
          $("td[contentEditable='true']").text("");
        }
    });
}

});

Not sure what other info I can add, let me know. This is not online.

Thanks