On Dec 14, 4:33 pm, Henjo <henjohoek...@gmail.com> wrote:
> Here's the link to the website, it is the product wizard
> form:http://bit.ly/7v8pHu
Okay, if you haven't used Fiddler [1], it's pretty useful for testing
HTTP request on IE, something like LiveHTTPHeaders for Firefox, and
more general.
The first thing I found is that IE isn't even submitting the second
request. It's a little hard to try to build my own version of this to
determine why, but you might want to either use Firebug Lite [2] as
someone suggested in another thread or simply add some alerts to see
how far it gets. You should be able to quickly nail down whether it
gets to the jQuery ajax call at all. If it does, you probably can
supply more information for this list. If not, hopefully the line it
stops on can supply you with help.
But I'm going to suggest that you rethink the code design altogether.
Rather than returning the whole set of select elements as HTML, I
would suggest that you return some JSON, either the data for all three
select boxes or the data for each successive one.
Then I think you could write a function named, say, "linkedDropdowns",
which you would use like this:
linkedDropdowns("option1", "option2", function() {
return {option1: $("#option1 select").val()};
});
linkedDropdowns("option2", "option3", function() {
return {option2: $("#option2 select").val()};
});
This function would bind the change event on the element named by the
first argument to a function that merged the results of calling the
third argument with your common data ({L: TYP03_LANG}) and then
perform an ajax call using that merged data. The success function of
that ajax call would update the element named by the second argument
using the JSON data supplied, and perform the scrolling or hiding
necessary for your UI. It would probably delegate the updating to
another function which you could also use to populate the initial
list.
This would make it easier to add additional steps as needed, or to
return something additional in the JSON that says there are no
additional steps. The deeply nested code you've got is likely to be
difficult to maintain.
I don't have time to try to code something like this myself now, but
the main code might look something like this:
var defaults = {L: TYP03_LANG};
function updateSelect(select, data) {
// loop through the results in data creating the inner HTML
for the select box
$("#" + select).html(myHTML);
// hide all the select boxes (perhaps with visibility and size
rather than "hide"), then reset the current one to visible
}
function linkedDropdown(select1, select2, fn) {
$("#" + select1).change(function() {
$.get("index.php?eID=tx_knowledgebase_pi1", $.extend
(defaults,fn()), function(data, textStatus) {
// if good text status
updateSelect(select2, data);
}, "json")
});
}
$.get("index.php?eID=tx_knowledgebase_pi1", defaults, function
(data, textStatus) {
updateSelect("option1", data);
});
linkedDropdowns("option1", "option2", function() {
return {option1: $("#option1 select").val()};
});
linkedDropdowns("option2", "option3", function() {
return {option2: $("#option2 select").val()};
});
Of course this is probably full of typos, and maybe it wouldn't work
at all for your case, but I think it would be easier to write
something reusable like this and then use if a few times in your code
than to do this deeply nested, and very fragile-looking code.
Good luck,
-- Scott
[1] http://www.fiddler2.com/fiddler2/
[2] http://getfirebug.com/lite.html
