Dynamically loading content within a view

[eluser]onecurlyfry[/eluser]
Hey all -

I'm currently loading 8 rss feeds into panel style divs on my page. I then aggregate those feeds into various arrays, passing them into googles charts/graphs API to return 4 charts in panel style divs as well.

I have a controller on my page that handles most of the logic. After logic, model calls/data returning, etc the last line in that controller is:

$this->load->view('layout', $data);

(I use $data['content'], $data['footer'], $data['header'] etc... then in the view I simply say something like <?=isset($content) ? $content : ''?> to display content)

Ultimately, what this means is when you load this page, there's 5-6 seconds of a blank screen prior to the page loading in its entirety. What I'd like to do is load the layout initially, then add an ajax-style "loading" gif over the panels. As each panel loads, the content would display and the ajax loader would be removed.

It's similar to any mashup/widget style site I'm sure you've all seen before.

I have no problems loading the ajax loader & hiding it when the panel is loaded. What I don't know is how to do this with CI.

Obviously I need to load the view first. I just don't know how to set the hooks (non-CI hooks I expect) to fire off the PHP code to load each of the panels. Are they separate views, in and of themselves? Do I load them as a string:

$data['twitter'] = $this->load->view('twitter', $rss_twitter, true);

How do I pass them back into the view?

I'm sure this is simpler than I'm giving it credit for, I'm just stuck right now. Your help is appreciated.

Scott

[eluser]Twisted1919[/eluser]
If i understand correct, what you should do :
in your view, put the placeholders for your content that will be added via ajax , like :

Code:

<div class="twitter-data"><img src="loader.gif" /></div>
<div class="google-data"><img src="loader.gif" /></div>

Then, in your view, or in your scripts, attach a js script like :

Code:

$(function(){
$.ajax({
    url: 'the-url-from-where-you-get-the-content-for-placeholders',
    type:'POST',
    data:  ,
    dataType:'json',
    success:function(obj){
        $('.twitter-data').html(obj.twitter);
                $('.google-data').html(obj.google);
    }
});

});

then your method would look like :

Code:

function get_content_of_placeholders()
{
    $twitter = 'long processing here to prepare your html output.';
    $google  = 'long processing here to prepare your html output';
    $json = json_encode(array('twitter'=>$twitter,'google'=>$google));
    exit($json);
}

Hope it helps .

[eluser]onecurlyfry[/eluser]
Thx for response. on my iPhone so spelling and grammar...will do my best

My view def already has divs with ids or classes set to Twitter, flickr, YouTube, etc. So that parts taken care of.

Ajax URL: are you saying that my Ajax URL is just a CI URL? e.g. www.site.com/feeds/get_content?

Finally, in the get_content method (in a hypothetical controller feeds)...am I literally returning a long htm string?

Currently, within my layout view, I use a foreach loop to iterate through the results of a query (this->db->from('feeds')->limit('10,0)->where('feed_source', 'twitter'))

So now I'll do the same thing, except in this new function, but when I return the query results, I use the foreach to build the contents of my entire Twitter div as an HTML string?

thanks again.

Scott

[eluser]Twisted1919[/eluser]
Ajax URL: are you saying that my Ajax URL is just a CI URL? e.g. www.site.com/feeds/get_content?
EXACTLY .

Finally, in the get_content method (in a hypothetical controller feeds)...am I literally returning a long htm string?

If you like so YES(go into a foreach() and build your output), or you can load a view and return it's content into a variable then return that variable, it is really up to you .

Of course, i hope you've noticed that you need jquery to make the ajax call.

[eluser]John_Betong[/eluser]

@onecurlyfry
Ultimately, what this means is when you load this page,
there’s 5-6 seconds of a blank screen prior to the page loading in its entirety.
What I’d like to do is load the layout initially, ...

 
I had a simlar problem on slow page loading due to adding external JavaScripts and managed to get round it by creating an empty DIV place-holder in the view which was later filled with the javasScript.

Code:

<!doctype..
&lt;head&gt;
...
&lt;/head&gt;
&lt;body&gt;
<div id='header' style='width:100%;height:6em'>
   &lt;!-- blurb goes here  --&gt;
</div>

<div id='placeholder' style='position:relative;width:60%;height:180px;margin-left:2%'>
      &lt;!-- blank to be filled with JavaScript loaded just before &lt;/body&gt;&lt;/html> --&gt;
</div>

<div id='content' style='width:100%;min-height:42em'>
    <div id='column_left' style='float:left;width:60%;min-height:42em'>
          &lt;!-- main stuff now shown virtually immediately --&gt;
    </div>

   <div id='column_right' style='float:right;width:30%;min-height:42em'>
         &lt;!-- more slow JavaScript --&gt;
    </div>

    <div id='footer' style='clear:both;width:100%;height:4.2em'>
         &lt;!-- ... --&gt;
    </div>

</div>&lt;!--content --&gt;

<div id='absolute_stuff' style='position:absolute;top:7em;left:2%;width:60%'>
   &lt;?php if(! LOCALHOST) {include 'Google_Adverts';}?&gt;
</div>

&lt;?php if(! LOCALHOST) {include 'Google_Analytics';}?&gt;

&lt;/body&gt;
&lt;/html&gt;

 
 
 
I thnk that it is also beneficial to specify all DIV width and heights otherwise the page rendering will have to wait until the JavaScript has finished loading.
 
 
 

[eluser]onecurlyfry[/eluser]
[quote author="Twisted1919" date="1286935407"]Ajax URL: are you saying that my Ajax URL is just a CI URL? e.g. www.site.com/feeds/get_content?
EXACTLY .

Finally, in the get_content method (in a hypothetical controller feeds)...am I literally returning a long htm string?

If you like so YES(go into a foreach() and build your output), or you can load a view and return it's content into a variable then return that variable, it is really up to you .

Of course, i hope you've noticed that you need jquery to make the ajax call.[/quote]

Hey mate - thanks again. Yes, I was certainly planning on using jQuery for the ajax call. I'm not a pro at jQuery, but I've been working in it pretty steadily for a few months now, so that part of the equation wasn't the same kind of hard stop that this was. I think I have a pretty good handle on what to do.

Many thanks,

Scott