jQuery Forum

Hi. I often have to do WCAG accessibility checks as part of my testing job. Part of the specification involves checking that any custom input elements / plugins use ARIA correctly. I can do a check on the source code but quite often the word ARIA doesn't come up. So is there a way to verify that someone's Jquery slider or fancy drop down menu is accessible in this way?

I've been trying to build the jquery equivalent of a class and methods in order to send ajax information back to CodeIgniter or anything else that might need it.

I'm totally new to Jquery really and I've got the ajax code working in the past but not as a reusable component. The class (if that's the right word) here has:

send_data(options) method
_required(required, data) method to check if required options have been sent to send_data()
_default(defaults,options) to set default values if certain options aren't set.

Here is my code. Be warned that a lot of this code could be pure fantasy because I'm new to this and I'm being bold. I suppose the question is, is the code right?

1. jQuery.fn.exists = function(){return this.length>0;}//Add an exists function for ease of use.
   
   /**
     * Ajax Class
     *
     * @package ajax
     * @author not in pastebin
   */
   
   var Data_transfer = function()
   {
     //Get cwd.
     this.loc = window.location.pathname;
     this.dir = loc.substring(0, loc.lastIndexOf('/'));//From pos 0 to last "/" gets the directory and not filename.
   
     /**
       * Send data ajax method. Provide object with: data:{params}, folder, method='POST', data_type='json', login_folder=this.dir, cookie_name
       *
       * @access public
       * @param object array
       * @return string Returns string containing result information / error or false on failure.
       */
     this.send_data = function(options)
     {
       if(!this._required({options.data,options.folder},options))
         return {error:"Required options missing."};
      
       var default_list = {folder:this.dir,
                           method:'POST',
                           data_type:'JSON',
                           login_folder='http://'+document.location.hostname,
                           cookie_name:"csrf_simple_cookie"};//List of options which are set if not found.
      
       //JQUERY FORUM: Is it ok to overrite with options = options?
       var options = this._default(default_list,options);//Set the defaults for the options coming in.
      
       var cct = $.cookie(options.cookie_name);//Overcome ajax limitation with csrf function in CodeIgniter. It passes back the csrf code to CodeIgniter allowing form to be sent.
      
       $.ajax({
         url: options.folder,
         type: options.method.toUpperCase(),
         context: document.body,
         data: {options.data},
         dataType: data_type.toLowerCase(),
         error: function(XMLHttpRequest,error)
         {
           if(error=='parsererror')//Not logged in.
           {
             window.location.replace(options.login_folder)//redirect to login page
           }
         },
         success: function(data)
         {
           if(data.success)
             return data.result;
           else
             return data.error;
         }
         return false;//Unknown?
       });
     }
    
     /** Utility Methods **/
     
     /**
       * _required Method checks the given array of field data aggainst array of required fields.
       *
       * @access public
       * @param object array
       * @return array
       */  
           
       this._required=function(required, data)
       {
       required.each(required,function(key,value)
       {
         if(!data[value].exists())
           return false;
       });           
           return true;
       }
    
     /**
       * _default method combines the defaults with options passed to original method.
       *
       * @access public
       * @param object array
       * @return array
       */     
    
     this._default=function(defaults,options)
     {
       return $.merge(defaults,options);
     }
   }
   
   //Send data ajax method. Provide object with: data:{params}, folder, method='POST', data_type='json', login_folder=this.dir, cookie_name (optional)
   var my_fields = {example:"This is a value"};
   var options = {data:my_fields,
                  folder:this.dir+"/tasks/get_projects_ajax",
                  method:"POST",
                  data_type:"json",
                  login_folder:this.dir+"/login"};
   
   var dt = new Data_transfer();
   var returned = dt.send_data(options);
   
   if(returned.error.exists())
   {
     console.log(returned.error);
   }
   else if(returned.result.exists())
   {
     console.log(returned.result);
   }
   else
   {
     console.log("Method failed");
   }

Edited:

I was in the basics forum and tried to quote someone. Then I realised there was no quote so I just copied someone's username into the post field. After posting the forum seemed to escape/hide all of the post except the link to the person's username. The only way to get it back was to go into the post, copy it to notepad and back again to get it to render.

It could be a bug so I thought I'd report it. I think there should be quoting ability as it's quite standard these days.

I'll reply to this page and show an example.

I want to upgrade my jqueryui and take advantage of this selectmenu:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

It says to download from "Felix's branch". I downloaded it but how to I keep my current theme for jquery ui and import this new functionality? I don't want to go back to theme roller again and recreate everything now that I've got it the way I want it.

Nice forum by the way.

I'm having a bit of trouble using AJAX when updating something on the server side. The jquery expects a json response.

I visit a link called http://localhost/fixilink/websites/fixed and submit some data to be added to the db using $.POST(). It all works and updates fine, but if the user's session has timed out when they send the request then they get redirected to the http://localhost/fixilink/websites/login instead.

The script seems to respond with a GET response in firebug console. There are a few headers and nothing else. How do I use this to trigger a redirect (on the client side) so that the user ends up at the login page?

1.     //Jquery function. Function compiles data, updates database via CI script.
       $(function()
       {
         var fixedFolder = "http://"+location.host + '/fixilink/websites/fixed';
   
           //Vote buttons
           $(".yes").click(function(){
              
               var id = $(this).children().attr("class");
               var fix_list=id.split('fix-');
               var fix_id=fix_list[1];
              
               $.post(fixedFolder,
                            {descision:'yes', fixes_id:fix_id, p_id: $('#p_id').val() },
                            function(data){
                                if(data.message=='yes')
                                {
                                       //Switch the buttons.
                                       //var i = $(this).find('.ratings').html('<h2>Hello</h2>');
                                }
                            },'json');
               return false;
           });
       });       
   
   
   ///PHP CONTROLLER\\\\\\\
   <?php
   
   class Fixed extends Controller
   {
       var $options;
       function Fixed()
       {
           parent::Controller();   
          
           if(!$this->user_model->Secure(array('userType'=>'user')))
           {
               $this->session->set_flashdata('flasherror','You must be logged into a valid user account to access this section.');
              
               redirect('login/index'.$this->uri->uri_string() );//Attach segments for redirection
           }    }
      
       function index()
       {
           //2=yes or no, 3= fixes_id
           return $this->content_model->Update_Fixed( $this->input->post('descision'),$this->input->post('fixes_id'),$this->input->post('p_id') );//Get problem details back from db.
       }
      
      
      
   }
   
   /* End of file main.php */
   /* Location: ./system/application/controllers/main.php */
   
   
   
   ////////PHP MODEL\\\\\\\\\\\\
           function Update_Fixed($decision,$fixes_id,$p_id)
           {
               $success=array('message'=>'yes');
               $failure=array('message'=>'no');
              
               //Check first.
               $this->db->where('u_id',$this->session->userdata('userId'),false );
               //$this->db->limit(1);
               $results = $this->db->get('fixed');
              
               if($results->num_rows()==1)
               {
                   echo json_encode($failure);
                   return false;
               }
              
               //Update
               $yes=0;
               if($decision=='yes')
                   $yes=1;
              
               $data = array('fixed' => $yes,
                                           'u_id'=>$this->session->userdata('userId'),
                                           'fixes_id'=> $fixes_id,
                                           'p_id'=>$p_id);
              
               $this->db->insert('fixed', $data);
              
               if($this->db->affected_rows()==1){
                   echo json_encode($success);
                   return true;
               }
               else
               {           
                   echo json_encode($failure);               
                   return false;
               }
           }
   

I'm trying to figure out how to modify the jcarousel to my website but I'm having serious issues figuring out what to set the widths and heights to to make it work the way I want.

I've tried searching the forums but can't find anything relevant.

At the moment I'm trying to get a carousel with the width 440px, which shows 4 pics at a time. I don't mind how wide each pic has to be.

Jcarousel is just the simple example found here: http://sorgalla.com/projects/jcarousel/#Examples

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 480px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 100px;
    height: 480px;
    padding: 40px 20px;
}





.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  400px;
    height: 120px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  100px;
    height: 400px;
}




.jcarousel-skin-tango .jcarousel-item {
    width: 90px;
    height: 90px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}