JQuery .show() nach html ersetzen löscht Styling in MVC 4 Anwendung

Question

Ich habe ein leeres div:

<div id="reportBody"></div> 

mit einfacher CSS:

#reportBody { 
    height: 100%; 
} 

Die reportBody div ist in einem versteckten modal, dass wird beim Klicken auf die Schaltfläche aufgerufen. Mit jquery/ajax rufen Sie den Controller auf, um eine iFrame-Zeichenfolge für einen SSRS-Bericht zu erstellen.

$(document).ready(function() { 
     $('#dashboardReportForm').validate({ // initialize the plugin 
      rules: { 
       BrewerySelect: { 
        required: true 
       }, 
       LineSelect: { 
        required: true 
       }, 
       datepicker: { 
        required: true, 
        date: true 
       } 
      }, 
      errorElement: "div", 
      errorPlacement: function (error, element) { 
       element.after(error); 
      }, 
      submitHandler: function (form) { 
       var brewery = document.getElementById('BrewerySelect').value; 
       var line = document.getElementById('LineSelect').value; 
       var day = document.getElementById('datepicker').value; 
       var url = '@Url.Action("GetUrl")'; 
       $.ajax({ 
        url: url, 
        data: { breweryCode: brewery, packageLine: line, date: day }, 
        dataType: 'json', 
        cache: false, 
        type: "POST", 
        success: function (data) { 
         var url = '<iframe src="' + data + '" height="100%" width="100%" scrolling="auto"></iframe>'; 
         $('#reportBody').html(url).show();       
        }, 
        error: function (response) { 
         alert('document.ready() dashboardReportForm.validate method failed'); 
        } 
       }); 
       ResetStyle(); 
       $('#reportModal').modal('show'); 
      } 
     }); 
    }); 

Es ist das $ ('# reportBody') .html (url) .show(); in diesem Code, der die innere HTML des Div ersetzt. Wenn ich den Iframe fest codiere und diese Methode überspringe, wird er perfekt angezeigt. Wenn ich diese Methode benutze, bricht die Höhe: 100% wird nach der Überprüfung in den Chrom-Werkzeugen nicht angezeigt.

Wie verhindere ich dies oder, falls dies nicht der Fall ist, fügen Sie es erneut in derselben Methode ein.

Danke.

Answer 1

Die Antwort: Hard-Code den Stil in die div.

<div id="reportBody" style="height: 100%;"></div>