CodeIgniter Forums
jQuery - Further seperate code from design. - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forum-21.html)
+--- Thread: jQuery - Further seperate code from design. (/thread-6930.html)



jQuery - Further seperate code from design. - El Forum - 03-17-2008

[eluser]SpooF[/eluser]
So I've just recently really discovered what jQuery can do and I'm very intrigue. I was looking at how I currently disburse passed variables through out my views and thought I wonder if jQuery could clean this up. So now I'm looking into a way to further use jQuery to seperate my code from the design. with the val() and attr() functions it makes it really quite easy to do with forms. Has anyone else done anything like this?

The next thing I'm looking into is how to deal with foreach, and also seeing if there is a way to utilize php and javascripts to cut down on the amount of jQuery written by hand.

Here is a small exmaple, it may look crazy and you may ask why, and whats the point.

Code:
$(document).ready(function(){
        window.onload = function(){
            $('div#ticket input[name="open"]').attr("checked","<?=($vars->ticket->tic_open==1) ? 'checked' : '' ;?>");
            $('div#ticket input[name="resolve"]').attr("checked","<?=($vars->ticket->tic_resolve==1) ? 'checked' : '' ;?>");
            $('div#ticket input[name="subject"]').val("<?=$vars->ticket->tic_subject?>");
            $('div#ticket input[name="id"]').val("<?=$vars->ticket->tic_id?>");
            $('div#ticket li[name="from"]').html($('div#ticket li[name="from"]').html() + " <?=$vars->ticket->con_firstn?> <?=$vars->ticket->con_lastn?> (<?=$vars->ticket->cli_username?>)");
            $('div#ticket li[name="subject"]').html($('div#ticket li[name="subject"]').html() + " <?=$vars->ticket->tic_subject?>");
            $('div#ticket li[name="topic"]').html($('div#ticket li[name="topic"]').html() + " <?=$vars->ticket->tic_topic?>");
            $('div#ticket li[name="website"]').html($('div#ticket li[name="website"]').html() + " <?=$vars->ticket->web_address?>");
         }

        $('div#ticket a#update').click(function () {
               $.post('/cp/ticket/update', {
                   id: $('div#ticket input[name="id"]').val(),
                open: $('div#ticket input[name="open"]').attr("checked"),
                resolve: $('div#ticket input[name="resolve"]').attr("checked")
            }, function(data) {
                if(data==1) {
                    $('span[name="info"]').html('Updated');
                    if($('div#ticket input[name="open"]').attr("checked")==true) {            
                        $('div#ticket input[name="open"]').attr("disabled","disabled");
                    }
                    if($('div#ticket input[name="resolve"]').attr("checked")==true) {            
                        $('div#ticket input[name="resolve"]').attr("disabled","disabled");
                    }
                } else {
                    $('span[name="info"]').html('Error');    
                }
                $('span[name="info"]').fadeIn('slow');
                $('span[name="info"]').fadeOut(3000);
            });
        });
     });


<span>&lt;a href="#" onclick="onClick=history.back()"&gt;Go Back</a></span>
<span name="info" style="display:none">Updated</span>
<h2>Ticket</h2>
    <div id="ticket">
        <ul>
            <li name="from">From:</li>    
            <li name="subject">Subject:</li>
            <li name="topic">Topic:</li>
            <li name="website">Website:</li>
        </ul>
        <span>Message</span>
        <p>&lt;?=$vars->ticket->tic_message?&gt;</p>
    
        &lt;form name="ticket"&gt;
            <a href="#" id="update">Update</a>
            &lt;input type="hidden" name="subject" value=""&gt;
            &lt;input type="hidden" name="id" value=""&gt;
            <label>&lt;input type="checkbox" name="open" value="1"&gt; Open</label>
            <label>&lt;input type="checkbox" name="resolve" value="1"&gt; Resolved</label>
            <br>
            &lt;textarea&gt;&lt;/textarea&gt;
            <a href="#" id="respond">Respond</a>
        &lt;/form&gt;
    </div>

I know a lot of people don't care because they are the ones design the page too, so it doesn't bother them.

I was just wondering what your thoughts of using jQuery to reduce the amount of code inside of design is.


jQuery - Further seperate code from design. - El Forum - 03-18-2008

[eluser]xwero[/eluser]
I think this is a bad idea. If people turn off javascript your extracted information doesn't even show. Your html may look clean but you use 2 languages to pass your data through.

I think you are better of with an xslt like syntax template engine. You have to search for it in the forum because i forgot the name.


jQuery - Further seperate code from design. - El Forum - 03-18-2008

[eluser]xwero[/eluser]
PHPTAL was the template engine i was talking about.