JQuery set attribute of an element

Question

In the following code

      <script>
       $(document).ready(function() {
     if(load_flag  == 0)
     {
        var html = '';
        html += "<div id ='err_msg' style='display:none;'><b>Preview errors</b> <br></div>";
        html += "<div id ='cont' style='display:none;'><input type='button' value='Continue' onclick='javascript:save();' /></div>";

     //some more processing
      if(err_flag != 1)
      {

        $("#err_msg").css({"display" : "block"});
        $("#cont").css({"display" : "block"});
      }
        $("#tabledata").append(html);
    });
   </script> 

  <div id="tabledata"></div>

The err_msg shows up but id=cont style remains style=none what is wrong with the code

Answer 1

Instead of this:

$("#err_msg").css({"display" : "block"});
$("#cont").css({"display" : "block"});

Try this:

$("#err_msg").show();
$("#cont").show();

Also, in that string of HTML you're building, you have an onclick handler like this:

onclick='javascript:save();'

Putting aside whether it's best to assign the handler here, you should make that:

onclick='save();'

The onclick handler is understood to be JavaScript.

Update: Looking closely at your code again, it looks like at the time you run the "show" logic (or assignment of styles), the elements don't yet exist in the DOM -- they're just part of the string you built. You run the "show" logic on elements that don't yet exist as such (so nothing happens), and then you append them to #tabledata (without the changes to their visibility having been applied). That seems out of sequence, unless I'm missing something.

Since the append happens regardless of visibility, there's no harm in changing the sequence:

$("#tabledata").append(html);
if( err_flag !== 1 ) {
    $("#err_msg").show();
    $("#cont").show();
}

Answer 2

The problem is, you don't have elements with ID="err_msg" and ID="cont" inserted into the document. First run the $("#tabledata").append(html); and then do the CSS changes.

$("#tabledata").append(html);
if(err_flag != 1)
{
   $("#err_msg").css({"display" : "block"});
   $("#cont").css({"display" : "block"});
}

Answer 3

Shouldn't line $("#tabledata").append(html); be at top before // some more processing. I generally use css property as $('selector').css('display', 'block') - no need to create a object there. Another recommendation is to use .hide/.show functions for controlling visibility (works across all elements across all browsers).