[jQuery] Re: IE stops recurring ajax call
Hi Scott,
well - it actually has nothing to do with chained requests in general.
This chained request did the request on a whole different tag (on the
#option instead of fieldset), that was the problem.
Henjo
On Dec 16, 3:43 pm, Scott Sauyet scott.sau...@gmail.com wrote:
On Dec 16, 4:14 am, Henjo henjohoek...@gmail.com wrote:
here is what I changed in order to get it to work in IE.
Not working:
jQuery('#option1').hide('fast').next().show('fast').bind
('change',function(){ ... }
Working:
jQuery('#option1').hide('fast').next().show('fast');
jQuery('#productWizard #option2 select').bind('change',function()
{ ... }
My conclusion: IE is not capable of putting a chained ajax request
altogether nicely...
Since I've done plenty of chained requests like that, I'd be surprised
if that's the issue. I wonder if there are any differences in what
next() in that chain is giving you in IE versus FF. Not that at
matters for you since you've got a working solution, but it's
curious...
I'm glad you got it working.
Cheers,
-- Scott
[jQuery] Re: IE stops recurring ajax call
Hi Scott,
Could you post in a bit more detail what you had to change to get it
to work in IE? Searching these forums is a great way for people to
solve their own problems.
here is what I changed in order to get it to work in IE.
Not working:
jQuery('#option1').hide('fast').next().show('fast').bind
('change',function(){ ... }
Working:
jQuery('#option1').hide('fast').next().show('fast');
jQuery('#productWizard #option2 select').bind('change',function()
{ ... }
My conclusion: IE is not capable of putting a chained ajax request
altogether nicely...
Quite simple solution - once I figured out where it broke.
I do have one UI suggestion for this control. There is no Undo
mechanism. You can't say Wait, I meant De-misting! But you have
the 1 -2 - 3 step images. If you turned those into links for previous
state, it would be quite useful.
That is actually a good idea! I am running low on time right now, but
will keep this in mind when I plan a rewrite of the code.
Good. I spent much more time typing that up than I meant to. I
thought I'd dash off a quick alternative for you. A long time later I
was still trying to fill in the details. I should either have trimmed
it down or followed it through all the way. I'm glad that it was at
least food for thought.
It sure was - and in that helped to bring out the solution so I am
grateful you took the time!
Good luck on your project.
Thanks!
Henjo
[jQuery] Re: IE stops recurring ajax call
On Dec 16, 4:14 am, Henjo henjohoek...@gmail.com wrote:
here is what I changed in order to get it to work in IE.
Not working:
jQuery('#option1').hide('fast').next().show('fast').bind
('change',function(){ ... }
Working:
jQuery('#option1').hide('fast').next().show('fast');
jQuery('#productWizard #option2 select').bind('change',function()
{ ... }
My conclusion: IE is not capable of putting a chained ajax request
altogether nicely...
Since I've done plenty of chained requests like that, I'd be surprised
if that's the issue. I wonder if there are any differences in what
next() in that chain is giving you in IE versus FF. Not that at
matters for you since you've got a working solution, but it's
curious...
I'm glad you got it working.
Cheers,
-- Scott
[jQuery] Re: IE stops recurring ajax call
Hi MorningZ,
see my reply at the other thread. I am sorry for double posting. I
think I kinda got stressed ;-)
Henjo
On Dec 15, 12:16 am, MorningZ morni...@gmail.com wrote:
Since you have two topics going on the same exact topic, i'll repeat
what i suggested in topic # 2:
Stop using the minified version for debugging purposes if your
code doesn't work, you should be using the full version of jQuery,
as the minified version adds a LOT of complexity when trying to figure
out what (bad) is going on
On Dec 14, 6:03 pm, Henjo henjohoek...@gmail.com wrote:
Hi Scott,
thanks very much for your elaborate writing. This should give me
enough to work on it and get it done.
I am rather new to jQuery and ajax altogether - so that my code
wouldn't get a 10 I understand ;-)
Thanks for your evaluation on this.
I did install Fiddler Firebug Lite and got some info from that - but
by far not enough to understand what goes wrong.
I will rework on this and at least post back when it works.
Thanks again.
Henjo
On Dec 14, 11:41 pm, Scott Sauyet scott.sau...@gmail.com wrote:
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/
[jQuery] Re: IE stops recurring ajax call
Hi Scott,
thanks again for your thoughts.
I managed to put alerts in and find where it broke in IE. IE can't
seem to handle a chained ajax request. I broke the chain in part and
than it worked fine.
I fiddled around with your code for a while but couldn't get that to
work. It sure seems a better approach to the code, and I will rethink
mine in order to make it more generic and maintainable.
I value your help and the time you took to post back on this. I take
to heart what you wrote and it helped me getting a better
understanding of how this works.
Have a great day!
Henjo
On Dec 14, 11:41 pm, Scott Sauyet scott.sau...@gmail.com wrote:
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
[jQuery] Re: IE stops recurring ajax call
On Dec 15, 8:37 am, Henjo henjohoek...@gmail.com wrote: I managed to put alerts in and find where it broke in IE. IE can't seem to handle a chained ajax request. I broke the chain in part and than it worked fine. Great! Could you post in a bit more detail what you had to change to get it to work in IE? Searching these forums is a great way for people to solve their own problems. I fiddled around with your code for a while but couldn't get that to work. It sure seems a better approach to the code, and I will rethink mine in order to make it more generic and maintainable. Yeah, I probably shouldn't have posted that much without posting something closer to a working example. Although I think the techniques are sound, there might well be issues I had not even considered. My biggest concern with your technique really is just the level of nesting. When you're already nested so deeply, it might get tricky to go further. I do have one UI suggestion for this control. There is no Undo mechanism. You can't say Wait, I meant De-misting! But you have the 1 -2 - 3 step images. If you turned those into links for previous state, it would be quite useful. I value your help and the time you took to post back on this. I take to heart what you wrote and it helped me getting a better understanding of how this works. Good. I spent much more time typing that up than I meant to. I thought I'd dash off a quick alternative for you. A long time later I was still trying to fill in the details. I should either have trimmed it down or followed it through all the way. I'm glad that it was at least food for thought. Good luck on your project. -- Scott
[jQuery] Re: IE stops recurring ajax call
Anyone?
[jQuery] Re: IE stops recurring ajax call
On Dec 13, 1:52 pm, Henjo henjohoek...@gmail.com wrote: It works flawlessly in FF, Safari, Chrome... But IE is being nasty on me! Being nasty is probably quite accurate, but not specific enough for us to offer help! What's happening. Better yet, is there a way you can post a live URL? -- Scott
[jQuery] Re: IE stops recurring ajax call
Hi Scott, first of all thanks for your help, I appreciate that! Here's the link to the website, it is the product wizard form: http://bit.ly/7v8pHu Henjo On Dec 14, 9:30 pm, Scott Sauyet scott.sau...@gmail.com wrote: On Dec 13, 1:52 pm, Henjo henjohoek...@gmail.com wrote: It works flawlessly in FF, Safari, Chrome... But IE is being nasty on me! Being nasty is probably quite accurate, but not specific enough for us to offer help! What's happening. Better yet, is there a way you can post a live URL? -- Scott
[jQuery] Re: IE stops recurring ajax call
The form is loaded on pageload. After that it is possible to make 1 call to the script again. After that it somehow renders no result in IE. I do not know how to get more details on what is missing and why - which drives me crazy 'cause it means I do not know how to fix it... I am quite lost here - unfortunately... :-( Thanks for sharing your insights on this. Henjo On Dec 14, 10:33 pm, Henjo henjohoek...@gmail.com wrote: Hi Scott, first of all thanks for your help, I appreciate that! Here's the link to the website, it is the product wizard form:http://bit.ly/7v8pHu Henjo On Dec 14, 9:30 pm, Scott Sauyet scott.sau...@gmail.com wrote: On Dec 13, 1:52 pm, Henjo henjohoek...@gmail.com wrote: It works flawlessly in FF, Safari, Chrome... But IE is being nasty on me! Being nasty is probably quite accurate, but not specific enough for us to offer help! What's happening. Better yet, is there a way you can post a live URL? -- Scott
[jQuery] Re: IE stops recurring ajax call
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
[jQuery] Re: IE stops recurring ajax call
Hi Scott,
thanks very much for your elaborate writing. This should give me
enough to work on it and get it done.
I am rather new to jQuery and ajax altogether - so that my code
wouldn't get a 10 I understand ;-)
Thanks for your evaluation on this.
I did install Fiddler Firebug Lite and got some info from that - but
by far not enough to understand what goes wrong.
I will rework on this and at least post back when it works.
Thanks again.
Henjo
On Dec 14, 11:41 pm, Scott Sauyet scott.sau...@gmail.com wrote:
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
[jQuery] Re: IE stops recurring ajax call
Since you have two topics going on the same exact topic, i'll repeat
what i suggested in topic # 2:
Stop using the minified version for debugging purposes if your
code doesn't work, you should be using the full version of jQuery,
as the minified version adds a LOT of complexity when trying to figure
out what (bad) is going on
On Dec 14, 6:03 pm, Henjo henjohoek...@gmail.com wrote:
Hi Scott,
thanks very much for your elaborate writing. This should give me
enough to work on it and get it done.
I am rather new to jQuery and ajax altogether - so that my code
wouldn't get a 10 I understand ;-)
Thanks for your evaluation on this.
I did install Fiddler Firebug Lite and got some info from that - but
by far not enough to understand what goes wrong.
I will rework on this and at least post back when it works.
Thanks again.
Henjo
On Dec 14, 11:41 pm, Scott Sauyet scott.sau...@gmail.com wrote:
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
