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(a, b) {
a = a.toLowerCase();
b = b.toLowerCase();
return (a < b ? -1 : (a > b ? +1 : 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 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(a, b) {
a = a.toLowerCase();
b = b.toLowerCase();
return (a < b ? -1 : (a > b ? +1 : 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.
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=0; x < items.length; x++){
$('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'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=0; x < items.length; x++){
$('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.
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.
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:
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.
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 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.
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.
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.
Quote:
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.
Quote:
But I'm getting closer! thanks for the help!
you are welcome,
Quote:
btw, yes coldfusion pretty much works the same way as php and along side js/ajax, just usually a lot less code.
Before you post, read our: 
