jQuery Forum

1. jQuery(document).ready(function(){   
      
       jQuery('.sort').sortable({
       cursor:     'move',
       axis:       'y',
       update: function(e, ui) {
           href = ajaxpath2;
           jQuery(this).sortable("refresh");
           sorted = jQuery(this).sortable("serialize", 'id');
          
           jQuery.ajax({
                   type:   'POST',
                   url:    href,
                   data:   sorted,
          
                   success: function(msg) {
                           //do something with the sorted data
                           alert("Your itemshave been re-ordered");
                          
                   }
           });
       }
   });

The code sorts the items and it updates the database using the id. But I want to send an additional variable of the category ID in the post I can use in my PHP.  Here is the HTML where I can drag and reorder. The variable i want to sent is $pr['cat_id'].'

1. <tr class="row' . ($i++ % 2). '" id= pid_'. $pr['prod_id'].' >';
   

I have this ecommerce store and it displays each product in a box with equal heights using jQuery. I tried to apply the same code to another display of products and cannot get it to set the height on the divs. It is supposed to append the style min-height to the divs. I examined it in firebug. Do you see anything below that may be written a better way?

1. var make_equal_height = function (element) {
               var $within     = jQuery(element),
                   selector    = $within.attr('data-equal-height'),
                   $children   = jQuery(selector, $within),
                   tallest     = 0;
              
               $children.each( function() {
                   var $this = jQuery(this);
                  
                   $this.css('min-height', '');
                   var h = $this.height();
   
                   if ( h > tallest ) {
                       tallest = h;
                   }
               });
              
               $children.each( function() {
                   jQuery(this).css('min-height', tallest + 'px');
               });
   
              
   
           };
   
   

I have this code that collapses and expands the menu items. First I installed the jQuery cookie plugin. Now I need to save the value in a cookie of the top level category that is clicked.

1. (function($) {
   
       $(document).ready(function() {
          
   
      
           $(".wpsc_top_level_categories > li:has(li)").prepend("<span class=\"CatExpander\">+</span>");
           $(".wpsc_top_level_categories").css( 'cursor', 'pointer' );
          
          
           $(".CatExpander").toggle(function() {
              
   
               $(this).html( '-' );
   
               }, function() {
   
               $(this).html( '+' );
   
           });
          
   
          
               $(".wpsc_top_level_categories li a").click(function() {
          
               $.cookie('NavCookie', $(this).toggleClass("CatExpanded").siblings(".CatExpander"));//added
          
               $(this).toggleClass("CatExpanded").siblings(".CatExpander").toggle();//toggles the +
               $(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
               
   
           }).eq(500).addClass("CatExpanded").end().slice(0).siblings("ul").hide();
   
   $(".wpsc_top_level_categories > li:has(li)").hover(function () {
        $(this).children("a").click(function () {
           return false;
        });
     });
          
   
       });
   
   })(jQuery);
   
   

I have this unordered list. It has a + sign to collapse the list. I want to still display the + yet be able to click on the link instead. How can I change this?

1. (function($) {
   
       $(document).ready(function() {
   
           $(".wpsc_top_level_categories > li:has(li)").prepend("<span class=\"CatExpander\">+</span>");
   
           $(".CatExpander").css( 'cursor', 'pointer' );
   
           $(".CatExpander").toggle(function() {
      
   
               $(this).html( '-' );
   
           }, function() {
   
               $(this).html( '+' );
   
           });
   
           $(".CatExpander").click(function() {
          
               $(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
   
               return false;
   
           }).eq(500).addClass("CatExpanded").end().slice(0).siblings("ul").hide();
   
          
   
       });
   
   })(jQuery);
   

Is there a better way I can write this statement? I want to check if the ID is any of these.

1. var cat = $("select#category").val();
   if (cat == 23 || cat == 24 || cat == 25 || cat == 41  )
2.       {$("select#lamp").html("<option>Some Category</option>");}
3.             else {
                      $("select#lamp").html(data);}
   

In my prevous posts I was working on a chained select boxes with three options. I have that working. I have a small form that gives option for category, watts and lamp. I know the purpose of Ajax is so you don't have to refresh the URL. Is it possible now I have the variables, I can pass them to another URL?

1. $('#select_form').submit(function(){
    
     location.href = '<?php echo get_bloginfo('url')?>/search-results';
   });
   

Working on these chained select boxes. I have three. Category, Watt, and Lamp. I am trying to get the last select box to change after the second one is selected. I am getting mixed up with the closing brackets and causes the first two to not work. At this point I wast just trying to get it to say "wait" or send an alert message. This is what I have.

1. jQuery(document).ready(function()     {
      
       $("select#lamp").attr("disabled","disabled");
       $("select#watt").attr("disabled","disabled");
           $("select#category").change(function(){
                     $("select#watt").attr("disabled","disabled");
                  
                   $("select#watt").html("<option>wait...</option>");
                    
                    
                     $("select#lamp").html("<option>wait...</option>");
                         
                              jQuery.ajax({
                              type: 'POST',
                              url: ajaxurl,
                             
                              data: {action:"ajax_get_watts",id: $(this).val() },
                                  success:function(data){
                                  $("select#watt").removeAttr("disabled");
                              
                               $("select#lamp").html("<option>Hold on...</option>");
                                  $("select#watt").html(data);
                              
                           //works up to this point
                                        }
                      
                                   $("#select#watt").change(function(){
                                   $("#lamp").attr("disabled","disabled");       
                                   $("#lamp").html("wait...");   
                                       }
2.                          });
                  });
                
           }); 
     });
   
   

I am working on this chained drop down that once selected it will poplulate the second. My major issue was sending the ID. Becuase I was using Wordpress it didn't know how to send it. I made a test function to get the Ajax URL working. All it does now is show an alert "Hello World". I want to remove the line to "Hello World" and replace it with posting ID.

1. <script type="text/javascript">
   jQuery(document).ready(function() {
    var id = $("select#category option:selected").attr('value');
        $("select#category").change(function(){
           jQuery.ajax({
               type: 'POST',
               url: ajaxurl,
               data: {"action": "hello"},//Just shows the result of hello function
               success: function(data){alert(data);}//Need to remove
              
          
           //jQuery.post( ajaxurl ,  { action:"my_action_name",id:"True" } ,function(data){
   //This is what I found I need to work into my script. But not sure of the format.  
   
              
              
              
           });
           return false;
       });
   
   });
   </script>
   

I am trying to get this tutorial to work in WordPress. I am not able to get it to update the second drop down box. how-to-create-chained-select-with-php-and-jquery/ Getting error Undefined index: id For now I am just running it in my header file and the other two files are in my theme folder. One person on there recommended changing the line to point to "http://mysite.com/wp-content/themes/my-theme-name/select_type.php" and that didn't work.

This code I am using on a ecommerce site. It updates the input field for the quantity. It works in Firefox but not IE. Is there anything I can change to get it to work?

1. <input type="text" id="shop_quantity_update_<?php echo shop_the_product_id(); ?>" name="shop_quantity_update" size="2" value="1" />
                                          </div>
                                         
                                          <input type="hidden" name="key" value="<?php echo shop_the_cart_item_key(); ?>"/>
                                       <input type="hidden" name="shop_update_quantity" value="true" />
                                      
                                                                  <div class="qtyupdown">
                                                                      <a class="down"></a>
                                                                      <a class="up"></a>
                                                                  </div>
                                           </div><!--close shop_quantity_update-->
                                          <script>
                                             jQuery('.shop_quantity_update<?php echo shop_the_product_id(); ?> .down').click(function(){
                                                
                                                jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').fadeOut('fast', function () {
                                                   item = (jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').val() - 0);
                                                   item = item - 1;
                                                   if (item < 1) item = 1;
                                                   jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').val(item);
                                                   jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').fadeIn('fast');
                                                });
                                             });
   
                                             jQuery('.shop_quantity_update<?php echo shop_the_product_id(); ?> .up').click(function(){
                                                    
                                                jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').fadeOut('fast', function () {
                                                   item = (jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').val() - 0);
                                                   item = item + 1;
                                                  
                                                   jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').val(item);
                                                   jQuery('#shop_quantity_update_<?php echo shop_the_product_id(); ?>').fadeIn('fast');
                                                });
                                             });
   
                                            </script>
                               <?php endif ;?>
                               <?php endif; ?>
                               <input type="hidden" value="add_to_cart" name="shop_ajax_action"/>
                               <input type="hidden" value="<?php echo shop_the_product_id(); ?>" name="product_id"/>