Hi,
Ok, well kinda managed to get it working - however, I'm thinking a
different approach may be needed. Let me explain a bit behind this.
Basically, there are 4 SELECT boxes (catid1, catid2, catid3, catid4) .
When someone selects a value from catid1, it then passes that ID to a
script - and then a list of values for that category are passed back
(its subcategories) ... then the same for catid3
Now, this all works absolutly fine - that is until I send them back to
the page (i.e for an error, such as no title being entered or
something) ... What I'm trying to do, is make some code that will
automatically immitate the selecting of the boxes.
The AJAX code I'm using is:
jQuery.noConflict();
jQuery(function(){
jQuery("select#catid1").change(function(){
jQuery.getJSON("/cgi-bin/ajax_cats.cgi",{id:
jQuery(this).val()},
function(j){
jQuery('#catid2').hide();
jQuery('#catid3').hide();
jQuery('#catid4').hide();
var options = '';
for (var i = 0; i <j.length; i++) {
options += '<option value="' +
j[i].optionValue + '">' + j
[i].optionDisplay + '</option>';
}
jQuery("#catid2").html(options);
jQuery('#catid2 option:first').attr('selected',
'selected');
if (j.length > 1) {
jQuery('#catid2').show();
jQuery('#next_step_button').hide();
}
})
})
})
This works fine - but when I do:
jQuery("#catid4").val("<%catid4%>");
..it doesn't actually process it in quite the same way (the box isn't
loaded)
Cany anyone suggest a way of doing this?
I've tried this (its part template parser synatax, and the rest is JS/
AJAX)
<%if catid1%>
jQuery("#catid1").val("<%catid1%>");
jQuery.getJSON("/cgi-bin/ajax_cats.cgi",{id: <%catid1%> },
function
(j){
jQuery('#catid2').hide();
jQuery('#catid3').hide();
jQuery('#catid4').hide();
var options = '';
for (var i = 0; i <j.length; i++) {
options += '<option value="' +
j[i].optionValue + '">' + j
[i].optionDisplay + '</option>';
}
jQuery("#catid2").html(options);
jQuery('#catid2 option:first').attr('selected',
'selected');
if (j.length > 1) {
jQuery('#catid2').show();
jQuery('#next_step_button').hide();
}
<%if
catid2%>jQuery("#catid2").val("<%catid2%>");<%endif%>
});
<%endif%>
<%if catid2%>
jQuery.getJSON("/cgi-bin/ajax_cats.cgi",{id: <%catid2%> },
function
(j){
jQuery('#catid3').hide();
jQuery('#catid4').hide();
var options = '';
for (var i = 0; i <j.length; i++) {
options += '<option value="' +
j[i].optionValue + '">' + j
[i].optionDisplay + '</option>';
}
jQuery("#catid3").html(options);
jQuery('#catid3 option:first').attr('selected',
'selected');
if (j.length > 1) {
jQuery('#catid3').show();
jQuery('#next_step_button').hide();
} else {
jQuery('#next_step_button').show();
}
<%if
catid3%>jQuery("#catid3").val("<%catid3%>");<%endif%>
});
<%endif%>
<%if catid3%>
jQuery.getJSON("/cgi-bin/ajax_cats.cgi",{id: <%catid3%> },
function
(j){
var options = '';
for (var i = 0; i <j.length; i++) {
options += '<option value="' +
j[i].optionValue + '">' + j
[i].optionDisplay + '</option>';
}
if (j.length > 1) {
jQuery('#catid4').show();
alert("values exist, so show
button 45");
jQuery('#next_step_button').hide();
} else {
jQuery('#next_step_button').show();
}
<%if
catid4%>jQuery("#catid4").val("<%catid4%>");<%endif%>
});
<%endif%>
<%if catid4%>
jQuery.getJSON("/cgi-bin/ajax_cats.cgi",{id: <%catid4%> },
function
(j){
var options = '';
for (var i = 0; i <j.length; i++) {
options += '<option value="' +
j[i].optionValue + '">' + j
[i].optionDisplay + '</option>';
}
if (j.length > 1) {
jQuery('#next_step_button').hide();
} else {
jQuery('#next_step_button').show();
}
});
<%endif%>
It works up to the 4th box, and then shows the box - but refuses to
load the values :/
Any suggestions?
TIA
Andy
On Dec 11, 4:27 pm, Scott Sauyet <scott.sau...@gmail.com> wrote:
> And your other syntax should also work as well:
>
> http://jsbin.com/oredo(codehttp://jsbin.com/oredo/edit)
>
> Must be something else on the page...
>
> -- Scott
