Login

12-19-2008, 08:56 AM

[eluser]Polarity[/eluser]
I see many threads in here about the same problem. You cant render different sections of a page. you have to call each view after another or have to include views into views. so i thougt i make a small helper, that renders a template and fill the regions. this example works, and you can copy it to your ci and test it for yourself.

Download | Demo Site

The main Problem with including Views in Views is, if you load a View, you get always the included Views too. So thats nice if you want to render the complete Page but not so comfortable if you want only the view without the included views (ajax calls). Plus if you want to pass some variables to the view in the view, you have to write many code and arrays that you have to copy to each controller / page and forward to every view. i think thats not elegant in the CIs way.

So you came maybe to the conclusion to call every View after another in the Controller. (header,content, sidebar, footer). That Produces also much Code, because you have to do it in every controller for every page. Plus you have to take care of your html structure in the views. Every view must be complete the other in the correct order. And you didtn see the whole site structure at once, only parts of it.

So i decided to make a Helper function for that. That Helper renders one View that have "regions" that you can fill with text/html. you can pass a array to that helper, so you have control over the regions. And he decides to render the full page or just give a region back for ajax manipulation.

The Code
I created one view that i called "views/layout.php" that view contains the complete site layout. header, content, sidebar footer etc. every section (sidebar/content) have a variable like that:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html &gt;

&lt;head&gt;

    &lt;title&gt;&lt;?=$site_title?&gt; | &lt;?=$site_name?&gt;&lt;/title&gt;

    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;

    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">&lt;/script>

    &lt;base href="&lt;?=base_url()?&gt;" /&gt;

    &lt;style type="text/css" media="screen"&gt;

        #ss_contentwrapper {

            width:100%;

        }

        #ss_sidebar {

            width:20%;

            float:left;

            border:1px solid gray;

        }

        #ss_content {

            width:78%;

            float:right;

            margin:0px 0px 5px 5px;

            border:1px solid gray;

        }

        #ss_footer {

            border: 1px solid gray;

        }

        .ssArticle {

            margin: 5px;

            border:1px solid red;

        }

        .break {

            clear: both;

        }

    &lt;/style&gt;

    &lt;script type="text/javascript" charset="utf-8">

        $(document).ready(function() {

            $('a[rel=ajaxcall]').each(function(i){

                    // get the url from the a tag

                    var url = new Array();

                    var target = new Array();

                    url[i] = $(this).attr('href');

                    target[i] = $(this).attr('name');

                    // remove the href attribute

                    $(this).removeAttr('href');

                    // do on click

                    $(this).click(function(){

                        // fade out the current Content

                        $(target[i]).fadeOut('slow',function(){

                            // load the content from the url

                            $(target[i]).load(url[i],function(){

                                // fade the new content in

                                $(target[i]).fadeIn('slow');

                            });

                        });

                    })

                });

        });

    &lt;/script>

&lt;/head&gt;

&lt;body id="ss_body"&gt;

    <div id="ss_wrapper">

        <div id="ss_header">

            &lt;?=$menu?&gt;

        </div>

        <div id="ss_contentwrapper">

            <div id="ss_sidebar">

                &lt;?=$sidebar?&gt;

            </div>

            <div id="ss_content">

                &lt;?=$content?&gt;

            </div>

            <div class="break"></div>

        </div>

        <div id="ss_footer">

            <p>Footer</p>

        </div>

    </div>

&lt;/body&gt;

&lt;/html&gt;

then we need a view for these regions. first the content loop for showing us the articles (for a blog maybe) "views/article.php"

Code:
<h1>&lt;?=$site_title?&gt;</h1>

&lt;?if(is_array($articles)):?&gt;

    &lt;?foreach($articles as $article):?&gt;

        <div class="ssArticle">

            <h1>&lt;?=$article['subject']?&gt;</h1>

            <p>&lt;?=$article['content']?&gt;</p>

        </div>

    &lt;?endforeach;?&gt;

&lt;?else:?&gt;

    <div>

        <p>Sorry no Articles there :(</p>

    </div>

&lt;?endif;?&gt;

and we need a view for the sidebar: "views/new_articles"

Code:
<h2>Recent Articles</h2>

&lt;?if(is_array($articles)):?&gt;

    <ul>

    &lt;?foreach($articles as $article):?&gt;

        <li>&lt;?=$article['subject']?&gt;</li>

    &lt;?endforeach;?&gt;

    </ul>

&lt;?else:?&gt;

    <ul>

        <li>No Articles</li>

    </ul>

&lt;?endif;?&gt;