jQuery - Further seperate code from design.

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.

        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) {
                    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>&lt;a href="#" onclick="onClick=history.back()"&gt;Go Back</a></span>
<span name="info" style="display:none">Updated</span>
    <div id="ticket">
            <li name="from">From:</li>    
            <li name="subject">Subject:</li>
            <li name="topic">Topic:</li>
            <li name="website">Website:</li>
        &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>
            <a href="#" id="respond">Respond</a>

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.

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.

PHPTAL was the template engine i was talking about.

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  

  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.