show html formatted text inside jquery dialog box on dialog button click

Question

I have a dialog box that is opened when field validation errors are found. I have successfully captured the html formatted text inside the jQuery dialog box. I have 3 buttons defined in the dialog box. Continue (close the dialog box), Show Fields (which should display the fielderrors html text) and Show Details (which should show error details)

Here is the HTML code from the Page

<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
    <div id="fielderrors" style="display:none"> &nbsp; </div>
    <div id="errordetail" style="display:none"> &nbsp; </div>
</div>

This is the code in the .js file within the Ready function when I press the Submit button on the Main Form, I get back the presubfields and presubdetail variables. I know that part is working because the console.log lines show the right information. For test purposes here you can use

var presubfields = "The following fields contain errors: <br> member status <br> member since";

$(function() {
    $( "#dialogpresubval").dialog({
        autoOpen: false, 
        hide: "puff",
        modal: true,
        closeOnEscape: false,
        height:400,
        width:450,
        resizable: true,
        draggable: true,
        title: "Pre-Submit Validation Errors",
        open: function() {
            console.log("4119 - On Open presubfields is: " + presubfields);  // I see the presubfields variable and its text;
            // $("#fielderrors div").html(presubfields);
            // $("#fielderrors", {html:presubfields});
           },          
           buttons: [ 
            {
               text: "Continue",
               click: function() {
                   var button = $(this).prop("id"); 
                   console.log("4127 You clicked on:", button);
                   $(this).dialog("close");
               },
            },
            {
                text: "Show Fields",
                click: function() {
                   var button = $(this).prop("id"); 
                   // Show the Fields requiring correction - div id = fielderrors
                    //var field_errors = $('#dialogpresubval').attr('note_text');
                console.log("4143 - presubfields = " + presubfields);  // console shows the correct information;
                //$("#fielderrors").append(presubfields);
                //$("#fielderrors", {html:presubfields});
                $("#fielderrors").text("presubfields should be shown");
                // Used this to test for generic text - $("#fielderrors").text("presubfields should be shown");
                // $("#fielderrors").val(presubfields);
                //$("#fielderrors").prop('display', 'block');
                $("#fielderrors").css({'display':'block'});
                $("#errordetail").hide();
                },

            },
            {
                text: "Show Details",
                click: function() {
                // Show the Details of the errors - div  id = errordetail
                // presubfields presubdetail
                $("#errordetail").val(presubdetail);
                $("#errordetail").show();
                $("#fielderrors").hide();
                },
            }
           ],
           position: {
              my: "center center",
              at: "center center"
           }

        });
    });

I left in the commented out fields so you could see what I've tried already. I can't get the presubfields or presubdetail to display in the appropriate div.

What I want is that when the Show Fields button is pressed, the presubfields html is shown and the same for the presubdetail.

Thanks for looking.

Andrew L · Accepted Answer · 2018-07-13 22:57:56Z

1

You were close with $("#fielderrors div").html(presubfields); but that is saying find a div element that is inside another element with an id of fielderrors. There is no such element in your HTML.

You can instead simply use only the id (ID's on elements should be unique) so it would be $("#fielderrors").html(presubfields); in the open function.

You now have the html in the proper div's so the next step is to either .show() and/or .hide() the elements when the corresponding buttons are clicked. An example below.

var presubfields = "The following fields contain errors: <br> member status <br> member since";
var presubdetail = "I am an example of an error detail.";

$(function() {
  $("#dialogpresubval").dialog({
    autoOpen: false,
    hide: "puff",
    modal: true,
    closeOnEscape: false,
    resizable: true,
    draggable: true,
    title: "Pre-Submit Validation Errors",
    open: function() {
      $("#fielderrors").html(presubfields)
      $("#errordetail").html(presubdetail);
    },
    buttons: [{
        text: "Continue",
        click: function() {
          var button = $(this).prop("id");
          console.log("4127 You clicked on:", button);
          $(this).dialog("close");
        },
      },
      {
        text: "Show Fields",
        click: function() {
          $("#fielderrors").show();
          $("#errordetail").show();
        },

      },
      {
        text: "Show Details",
        click: function() {
          $("#fielderrors").hide();
          $("#errordetail").show();
        },
      }
    ],
    position: {
      my: "center center",
      at: "center center"
    }

  });
  // show the modal
  $( "#dialogpresubval" ).dialog( "open" );
});

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
  <div id="fielderrors" style="display:none"> &nbsp; </div>
  <div id="errordetail" style="display:none"> &nbsp; </div>
</div>

edited Jul 13, 2018 at 22:57

answered Jul 13, 2018 at 22:35

Andrew L

5,5161 gold badge29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Charles Brengel Over a year ago

Andrew, Thank YOu!!! I've run your code snippet in both Chrome and IE and it works exactly the way I need it to. I updated my scripts and tried it and I still have a problem, so need to go back and see what I did that is stopping things from working.

Andrew L Over a year ago

@CharlesBrengel you're welcome! if this answered your original question feel free to accept it. Also if you have another question you can always post another.

Charles Brengel Over a year ago

Andrew, I think I accepted your answer. If I didn't, just reply. Thanks Again.

Charles Brengel Over a year ago

I created a fiddle thing that more closely resembles what I have for code. (Just the essential stuff). My first time creating a fiddle. And I can't get it to work. if you can modify it, I would appreciate it. It is here jsfiddle.net/veruo05h/31

Andrew L Over a year ago

@CharlesBrengel try asking another question on stack overflow with a few more details about your new problem. You can send me a message too and I will look at it. As of right now I am not sure what your new problem is.

|

Collectives™ on Stack Overflow

show html formatted text inside jquery dialog box on dialog button click

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related