I have created a number of divs using a loop, and then inside it there's a hidden field where the value is the url I want the div to be loaded. I have tried the load() function but turns out to be slow. Like when I used iframe, it takes a very long time to load and the height and width isn't expanded because of its child. Is there any other way to do this?

UPDATE

my html code filename index.html.erb

<div id="surveyDiv" style="overflow-y:auto;" >
  <% @sections.each do |sec| %>
  <% #sec = @sections.first %>
    <br/>
    <% @div_id = "survey_section_" + (sec.id).to_s %>
    <div id="<%=h @div_id %>">
        <img src="/images/loading.gif" id="loadingPic"/>
      <input type=hidden id="hid" name="hid" value="<%=h @srcString + "?section=" + (sec.id).to_s %>"/>
      <!--<iframe id="the_frame" name="the_frame" src="<%#=h @srcString + "?section=" + (sec开发者_开发百科.id).to_s %>" scrolling="yes" frameborder="no" ></iframe>-->
    </div>
    <script type="text/javascript">
        /*$('div:last').load($('input[type=hidden]:last').val())*/

        $.get($('input[type=hidden]:last').val(), function(data) {
          $('.surveyDiv div:last').html(data);
        });

        $('div:last').ready(function() {
            $('#loadingPic').css('display','none')
        });
    </script>
  <% end %>
</div>

Samich's answer is good, but then, when I used it, I can't see now the loaded html..hehe

Samich is right, get is ok for your task. And about resizing divs: i came across similar issue with a popup on one of my websites. Popup resized according to the loaded content, but something weird happened in safari and explorer. If text was too long, then popup took maximum width which is not good, i prefer to have word wraps instead. Ideal way is to define width of the content in the content. For example you have HTML to be loaded into the container:

<div class="d1">some text</div>

In order to provide cross-browser consistency you should either define .d1 width through css or define inline style for the div tag.

I dont really understand ... ASP?

but try this

<div id="surveyDiv" style="overflow-y:auto;" >
    <% @sections.each do |sec| %>
    <% #sec = @sections.first %>
    <br/>
    <% @div_id = "survey_section_" + (sec.id).to_s %>
    <div id="<%=h @div_id %>">
        <img src="/images/loading.gif" id="loadingPic" />
        <input type="hidden" class="helloimhidden" id="hid<%=h @div_id %>" name="hid" value="<%=h @srcString + "?section=" + (sec.id).to_s %>" />
    </div>
    <% end %>
</div>
<script type="text/javascript">
    $('.helloimhidden').each(function() {
        var myInput = $(this);
        $.get(myInput.val(), function(data) {
            myInput.parent().html(data);
        });
    });
</script>

please let me know how it goes, I'm afraid only the last div will show results due to myInput got overwritten... if so try this

<script type="text/javascript">
    var myI = 0;
    var myInput = [];
    $('.helloimhidden').each(function() {
        myInput[myI] = $(this);
        $.get(myInput[myI].val(), function(data) {
            myInput[myI].parent().html(data);
        });
        myI++;
    });
</script>