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 12 of 12
  1. #1
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts

    cant seem to alphabetize dynamic lists

    I have a jQuery framework that dynamically creates unordered lists as needed. The list items are then input by the user into the form. The values of the array are then passed via ajax url POST method to my action page which then loops through the collection(array) and saves the results to a temporary file in a ul.

    Then the lists are called and displayed back on the same original page as a list, or multiple lists depending on what was created with the jQuery.

    No matter what I've tried, there doesnt seem to be a way to display the lists alphabetically. And I think HOW the dynamic forms for the lists were created matters as well.

    PHP Code:
    $(function() {
        var 
    items = [];

        $(
    'li').each(function() {

           
    items.push($(this).text());

       });

        
    items.sort(function(ab) {
            
    a.toLowerCase();
            
    b.toLowerCase();
            return (
    ? -: (? +0));
        });

        $(
    'li').each(function(i) {

            $(
    this).text(items[i]);

        });
    }); 
    I thought the above code would work and would alphabetize regardless of case. What am I doing wrong?

    btw, the script above is inserted in my original file right above where the lists are called back and displayed. Maybe the placement of this code is the issue?? Any help is greatly appreciated.
    Teed

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by teedoff View Post
    I have a jQuery framework that dynamically creates unordered lists as needed. The list items are then input by the user into the form. The values of the array are then passed via ajax url POST method to my action page which then loops through the collection(array) and saves the results to a temporary file in a ul.

    Then the lists are called and displayed back on the same original page as a list, or multiple lists depending on what was created with the jQuery.

    No matter what I've tried, there doesnt seem to be a way to display the lists alphabetically. And I think HOW the dynamic forms for the lists were created matters as well.

    PHP Code:
    $(function() {
        var 
    items = [];

        $(
    'li').each(function() {

           
    items.push($(this).text());

       });

        
    items.sort(function(ab) {
            
    a.toLowerCase();
            
    b.toLowerCase();
            return (
    ? -: (? +0));
        });

        $(
    'li').each(function(i) {

            $(
    this).text(items[i]);

        });
    }); 
    I thought the above code would work and would alphabetize regardless of case. What am I doing wrong?

    btw, the script above is inserted in my original file right above where the lists are called back and displayed. Maybe the placement of this code is the issue?? Any help is greatly appreciated.
    i'm not sure but i don't think last each will replace elements in the list. I would add a div, for testing, and try to append items one by one or better you can use a debugger, firebug, venkman or other, and try to put a break point after sort.

    best regards

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    i'm not sure but i don't think last each will replace elements in the list. I would add a div, for testing, and try to append items one by one or better you can use a debugger, firebug, venkman or other, and try to put a break point after sort.

    best regards
    I'm displaying the form values in a div currently. Not sure if thats what you mean. I know a little about how the console debug works in firebug, but probably not enough to figure out whats wrong here. I also tried another script to sort like so:

    PHP Code:
    $(function(){
       var 
    items = new Array();
       $(
    'li').each(function(){
          
    items.push($(this).text());
       });
       var 
    items items.sort();
       for(
    x=0items.lengthx++){
          $(
    'li:eq('+x+')').text(items[x]);
       }
    }); 
    I've really just started trying to learn some javascript and jQuery and ajax last week. Most of the code I have now was either given to me or shown to me and I've tweaked little bits for what I need. You can see this application here

    There's ALOT goin on on that page, but the form in question is the Cross Reference Form near the bottom of the page. If you add values to vendor and product inputs, click add vendor and add values there as well, you can see that the above script doesnt sort.
    Teed

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by teedoff View Post
    I'm displaying the form values in a div currently. Not sure if thats what you mean. I know a little about how the console debug works in firebug, but probably not enough to figure out whats wrong here. I also tried another script to sort like so:

    PHP Code:
    $(function(){
       var 
    items = new Array();
       $(
    'li').each(function(){
          
    items.push($(this).text());
       });
       var 
    items items.sort();
       for(
    x=0items.lengthx++){
          $(
    'li:eq('+x+')').text(items[x]);
       }
    }); 
    I've really just started trying to learn some javascript and jQuery and ajax last week. Most of the code I have now was either given to me or shown to me and I've tweaked little bits for what I need. You can see this application here

    There's ALOT goin on on that page, but the form in question is the Cross Reference Form near the bottom of the page. If you add values to vendor and product inputs, click add vendor and add values there as well, you can see that the above script doesnt sort.
    i don't see any list there, i miss something?

    best regards

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by oesxyl View Post
    i don't see any list there, i miss something?

    best regards
    On my template.cfm? you have to put some text in the Cross Ref Form inputs, then click the submit button underneath them. Then the ajax will call the form values and a list will be displayed.
    Teed

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by teedoff View Post
    On my template.cfm? you have to put some text in the Cross Ref Form inputs, then click the submit button underneath them. Then the ajax will call the form values and a list will be displayed.
    i used, in that order: wacki, dacki, jango, lolo and output is:
    Code:
    <div style="display: block;" id="vendorProductList">
          <ul>
            <li style="list-style-type: none;">
              <h2>dacki</h2>
            </li>
              <li style="margin-left: 30px;"></li>
          </ul>
          <ul>
            <li style="list-style-type: none;">
              <h2>jango</h2>
            </li>
              <li style="margin-left: 30px;"></li>
          </ul>
          <ul>
            <li style="list-style-type: none;">
              <h2>lolo</h2>
            </li>
              <li style="margin-left: 30px;"></li>
          </ul>
          <ul>
            <li style="list-style-type: none;">
              <h2>wacki</h2>
            </li>
              <li style="margin-left: 30px;"></li>
          </ul>
    </div>
    as you see the result is sorted but you have a ul container for each element.
    as far as i guess the problem is in the ajax response. Any way i don't understand how you get and add the response to the page.

    best regards

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I think, based on how new I am to client side, that the form values are passed through the url.data method to the action page.

    The action page just contains code, coldfusion in my case, that loops through the form input arrays and outputs the array values in a list that is saved to a temprary file.

    This file is then simply displayed by a server side include and displayed in a list within a div.

    Each time a new list is created, the temp file is overwritten by the new values and once again displayed with a ss include.

    Now, as you said before, the values you entered are sorted correctly. But thats because I think you didnt enter any values for the product inputs.

    Also, once you enter wacki, jackie, dango, and lolo, then to go back and add a fifth Vendor input value, it puts that last form value at the top. I entered mango and it was inserted at the top.

    When I just tried the same values again, after a hard refresh, it was in a different order. I know this must be due to the temp file maybe.
    Teed

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by teedoff View Post
    I think, based on how new I am to client side, that the form values are passed through the url.data method to the action page.

    The action page just contains code, coldfusion in my case, that loops through the form input arrays and outputs the array values in a list that is saved to a temprary file.

    This file is then simply displayed by a server side include and displayed in a list within a div.

    Each time a new list is created, the temp file is overwritten by the new values and once again displayed with a ss include.

    Now, as you said before, the values you entered are sorted correctly. But thats because I think you didnt enter any values for the product inputs.

    Also, once you enter wacki, jackie, dango, and lolo, then to go back and add a fifth Vendor input value, it puts that last form value at the top. I entered mango and it was inserted at the top.

    When I just tried the same values again, after a hard refresh, it was in a different order. I know this must be due to the temp file maybe.
    i know nothing about coldfusion, but if we assume it work like any other server side scripting with ajax the things are simple:
    1. javascript send request to the server side
    2. server side send output to javascript
    3. javascript change the page, not server side because if ss change the page will triger a refresh => is not ajax

    try to remove the aditional <ul></ul> from cf script and to make the response a single list and probably you also need to change the sort function to work as you want.
    in same cases you can use alert with jquery to debug what happend, try this way if is simpler.

    best regards

  • Users who have thanked oesxyl for this post:

    teedoff (01-21-2011)

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by oesxyl View Post
    i know nothing about coldfusion, but if we assume it work like any other server side scripting with ajax the things are simple:
    1. javascript send request to the server side
    2. server side send output to javascript
    3. javascript change the page, not server side because if ss change the page will triger a refresh => is not ajax

    try to remove the aditional <ul></ul> from cf script and to make the response a single list and probably you also need to change the sort function to work as you want.
    in same cases you can use alert with jquery to debug what happend, try this way if is simpler.

    best regards
    Hi oesxyl. Thanks for the help! When you mentioned about removing the additional <ul></ul> from my cf script that got me thinking! The reasoning behind this was that I wanted to display the Vendor values in a list but each vendor had products in lists as well. So what I did was as you suggested, remove the ul's from looping through the Vendors, and just let my loop loop through the Vendor values as h2 tags which still does what I need, which is bolded and larger font for vendors. Then my loop goes through the products as one ul per vendor. If that makes sense.

    Now, the Vendors are sorted on the current page, however when I pass the lists to my preview page, they are not stored in that new order.

    But I'm getting closer! thanks for the help!

    btw, yes coldfusion pretty much works the same way as php and along side js/ajax, just usually a lot less code.
    Teed

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by teedoff View Post
    Hi oesxyl. Thanks for the help! When you mentioned about removing the additional <ul></ul> from my cf script that got me thinking! The reasoning behind this was that I wanted to display the Vendor values in a list but each vendor had products in lists as well. So what I did was as you suggested, remove the ul's from looping through the Vendors, and just let my loop loop through the Vendor values as h2 tags which still does what I need, which is bolded and larger font for vendors. Then my loop goes through the products as one ul per vendor. If that makes sense.
    removing ul is an alternative to changing the sort function. I would change both to keep markup and sorting as simple as i can.

    Now, the Vendors are sorted on the current page, however when I pass the lists to my preview page, they are not stored in that new order.
    i understand that you probably want to use jquery to sort but you can and would be simpler, imo, to sort directly in the cf script and just display the results in the page.

    But I'm getting closer! thanks for the help!
    you are welcome,

    btw, yes coldfusion pretty much works the same way as php and along side js/ajax, just usually a lot less code.


    best regards

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts

    Resolved

    Tried to edit and mark resolved, but seem to have forgotton how lol. Didn't see an edit button.
    Teed

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by teedoff View Post
    Tried to edit and mark resolved, but seem to have forgotton how lol. Didn't see an edit button.
    must be something in the title, a combobox or something, i realy don't know,

    best regards


  •  

    Posting Permissions

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