Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts

    need help refining jquery code

    ok, so I have a toolbar drop down menu that consists of UL's. I have created(with some help here) a function that applies the Jquery UI Sortable effect to these UL's so a user can sort the drop downs and the function also saves the sort order in a cookie and then retrieve the cookie information so the users list stay the way they want. As it stands I currently have to write a function for each individual UL. My goal is to create one function that uses an array to declare certain internal variables so I can just add new keywords to the array based of the UL id's ( while also using consistent markup and naming conventions of course) this is what I have thus far:

    Code:
    $(document).ready(function() {
    
    //Search List
     var list1 = $("#searchlist");
      var order1 = $.cookie("searchlistorder");
     	list1.sortable({
       update: function(event, ui) {
         var listordervar = $('#searchlist').sortable('toArray');
    	  $.cookie("searchlistorder",listordervar);
    	}
    });
    if (order1) {
          $.each(order1.split(","),function(i,id) {
               $("#"+id).appendTo(list6);
          });
    }
    
    //Phones List
     var list2 = $("#phoneslist");
      var order2 = $.cookie("phoneslistorder");
     	list2.sortable({
       update: function(event, ui) {
         var listordervar = $('#phoneslist').sortable('toArray');
    	  $.cookie("phoneslistorder",listordervar);
    	}
    });
    if (order2) {
          $.each(order2.split(","),function(i,id) {
               $("#"+id).appendTo(list7);
          });
    }
    });
    basic markup example:

    Code:
    <div>
    <ul id="searchlist">
    <li id="searchlist1"><a href="#">test1</a></li>
    <li id="searchlist2"><a href="#">test2</a></li>
    <li id="searchlist3"><a href="#">test3</a></li>
    <li id="searchlist4"><a href="#">test4</a></li>
    </ul>
    <ul id="phoneslist">
    <li id="phoneslist1"><a href="#">test1</a></li>
    <li id="phoneslist2"><a href="#">test2</a></li>
    <li id="phoneslist3"><a href="#">test3</a></li>
    <li id="phoneslist4"><a href="#">test4</a></li>
    </ul>
    </div>
    I basically need some help reconstructing this into one function using the jquery .each method ( or even standard js loop) to loop, while using an array to define certain variables and also avoiding using globals. ( whack me in the head if this sounds stupid and I shoudl be doing it differently)

    Oh and also I need to figure out where I went wrong on the Update function becuase with the current code, once I drop an LI where I want it, the containing anchor link is fired so I need help figureing out hwo to prevent that as well, if possible.

    array example I'd like to use is the following

    Code:
    var id_list = ['search','phones']
    I appreciate any help as I made about 9 iterations similar of this and my page load has slowed down considerably
    Last edited by DanInMa; 05-04-2011 at 10:25 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    any thoughts on this? I could really use a hand

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    nevermind!! I got it ! if your interested, this was my final solution:
    ( requires Jquery, Jquery UI and Jquery .cookie plugin)

    Code:
    $(document).ready(function() {
    var id_list = ['nsmc','partners','vendors','pagers','outages','search','phones'] //declare array for 1st portion of ID's
    //Apply .sortable functionality to main UL's in toolbar
      $.each(id_list,function(i) {
     	$("#"+id_list[i]+"list").sortable({
       update: function(event, ui) {
       //save current order to a cookie
         var listordervar = $("#"+id_list[i]+"list").sortable("toArray");
    	  $.cookie(id_list[i]+"listorder",listordervar);
    	  }
    	})
    	//declare toolbar variables extracted from cookies
    var Curr_List = $("#"+id_list[i]+"list");
    var Curr_Cookie = $.cookie(id_list[i]+"listorder");
    //set toolbar list orders according to save cookie info
    	if (Curr_Cookie){
         $.each(Curr_Cookie.split(","),function(i,id) {
               $("#"+id).appendTo(Curr_List);
          });			
    	}
    });
    
    //Reset all toolbar cookies from array"id_list"
     $('#resetcookies').click(function(e) {
     e.preventDefault
           $.each(id_list,function(i) {
                $.cookie(id_list[i]+"listorder", null)
          });
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •