Click here to Skip to main content
15,943,294 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a situation here where i show initially some content in html.
I have applied responsive styles and javascript on the elements.
Now i have added an ajax call to load data at the end dynamically and for the dynamic data the styles are same which are applied for initail HTML elements.

The data is being retrieved sucessfully but the styles are not applied to it and thus the structure is messed up. Please any help would be gratefull.

My front page code:

HTML
<div id="divlist" class="span9">
        
 @{       
     for (int i = 0; i < item; i = i + 3)
     {     
     <div id="divlist2" class="row-fluid">
     @if (teachersList.Count > i)
     {
     <div class="span4" style="height:auto">
            <div class="blocks-list" style="height:auto">
                @Html.DisplayFor(modelItem => teachersList[i].TeacherID). @Html.DisplayFor(modelItem => teachersList[i].TeacherName)
                @*@Html.DisplayFor(modelItem => teachersList[i].StdID)*@
                <div style="float: right; color: Green">
                    @Html.DisplayFor(modelItem => teachersList[i].Department)
                </div>
                <br />
                @Html.DisplayFor(modelItem => teachersList[i].Notes)
                <br />
                
            </div>
        </div>
     }
</div>

My Script where i am calling ad retrieving dynamic content

HTML
<script type="text/javascript">
       function join() {
           $("#loader").hide();
       }
       var isPreviousEventComplete = true, isDataAvailable = true, sind=10;
       jQuery(
  function ($) {

      $("#btn_search").click(function () {

      })
      $(document).scroll(function () {
          if ($(document).height() - 34 <= $(window).scrollTop() + $(window).height()) {
              //alert('end reached');
              //Logic to add data at end

              if ((isPreviousEventComplete) && isDataAvailable) {
                  isPreviousEventComplete = false;
                  $(".LoaderImage").css("display", "block");
                  $.ajax({
                      type: "GET",
                      url: "/Home/DynamicP/?sind1=" + sind,
                      beforeSend: function show1() { $("#loader").show(); },
                      
                      success: function (result) {
                          setTimeout(join, 700);                      
                          $("#divlist").append(result);
                          isPreviousEventComplete = true;
                          sind = sind + 3;
                          if (result == '') //When data is not available
                              isDataAvailable = false;
                          $(".LoaderImage").css("display", "none");
                      },
                      
                      error: function (error) {
                          alert(error);
                      }
                  });

After the data is sucessfully appended to divlist the styles are not applied on the added html elements...

Please give any suggestions or solutions.
Thanks in advance.
Posted
v2
Comments
Morgan Estes 11-Dec-13 11:19am    
What styles aren't being applied? Do you have a <style> block in the page, or an external stylesheet, or some inline styles?
Nkumary 11-Dec-13 23:37pm    
I have an external stylesheet..It is a responsive page only the content loaded dynamically are not responsive despite the stylesheet added in the parent page....
Morgan Estes 12-Dec-13 0:16am    
Do you have a live example somewhere where we can see the full HTML output?
Nkumary 20-Dec-13 8:53am    
Sry dont know how to do it?I m quite new to Developement...
But i can tell that i have content on page_load event for which styles work properly but and then i have additional contents begin loaded by AJAX from other page which are loaded afterwards and are missing their styles.....
Morgan Estes 20-Dec-13 18:16pm    
No worries, everyone has to start somewhere, but it's difficult to try to help diagnose front-end issues without being able to see the code that's actually rendered in the browser. If you're developing locally and the page renders, copy and paste the source of the HTML and the CSS you're using into a service such as http://jsbin.com so we can see what you're working with.

My guess is that there is an issue with your CSS rules not being able to target the new elements, but I can't say for sure without seeing the rendered HTML and the styles you're trying to apply.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900