locked
Dynamically set the html styles with jquery html() function RRS feed

  • Question

  • User-973886032 posted

    hi guys

    how do you set the style dynamically of a html function ? here i my code

    as the code in yellow gives an error

      $('#MyDiv').show().html(<div class="alert alert-success"><h5>Your message has been successful saved with ID: " + message.id+" <h5><BR/>");     

    Wednesday, September 11, 2019 7:29 AM

Answers

  • User753101303 posted

    Hi,

    Seems you just miss a string delimiter. When a string includes the " character you can use ' to enclose the string :

    alert('A string with a " character'); or
    alert("A string with a \" character");

    See for example https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#String_literals

    For example :

     $('#MyDiv').show().html('<div class="alert alert-success"><h5>Your message has been successful saved with ID: ' + message.id + "<h5><BR/>"); 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 9:11 AM
  • User-719153870 posted

    Hi afrika,

    It seems there's a syntanx error in your code and you are missing a bootstrap reference.

    Please refer to below code and update yours:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#MyDiv').show().html("<div class='alert alert-success'><h5>Your message has been successful saved with ID: " + 111 + " <h5><BR />");
            })
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="MyDiv">
            </div>
        </form>
    </body>
    </html>

    Here's the result of this demo:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 9:23 AM

All replies

  • User753101303 posted

    Hi,

    Seems you just miss a string delimiter. When a string includes the " character you can use ' to enclose the string :

    alert('A string with a " character'); or
    alert("A string with a \" character");

    See for example https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#String_literals

    For example :

     $('#MyDiv').show().html('<div class="alert alert-success"><h5>Your message has been successful saved with ID: ' + message.id + "<h5><BR/>"); 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 9:11 AM
  • User-719153870 posted

    Hi afrika,

    It seems there's a syntanx error in your code and you are missing a bootstrap reference.

    Please refer to below code and update yours:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#MyDiv').show().html("<div class='alert alert-success'><h5>Your message has been successful saved with ID: " + 111 + " <h5><BR />");
            })
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="MyDiv">
            </div>
        </form>
    </body>
    </html>

    Here's the result of this demo:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 9:23 AM
  • User-973886032 posted

    I forgot about that.

    I think its sleepless nights 

    thanks

    Here is my final code

       $('#MyDiv').show().html('<BR/><BR/><div class="alert alert-success"><h5>Your message has been successful saved with ID: '+ message.id+' <h5></div><BR/><BR/>');     

    Wednesday, September 11, 2019 9:31 AM