First the bad news:
After taking a look at cascade and playing around with the source code
I think this is not possible with the original cascade plugin.
The cascade plugin is copying the ajax options (including the url) at
initialization time to local variable. So ajax: {url:
$("select#chained").val() +'_1.js'} will be called once at start up
and any later changes of the select input will have no effect on the
ajax settings.
Now the good news:
The cascade plugin can be patched so, that a dynamic URL is working.
It's just a quick&dirty hack, but it should do the job.
Open jquery.cascade.ext.js and insert:
if (opt.urlCallback) ajax.url = opt.urlCallback(this);
after line 22 ( return { getList: function(parent) { )
than rewrite your code:
function which (element){
if (element.id == 'bchained_child')
{
var selectVal = $("#bchained").val()+'_1.js';
alert(selectVal);
return selectVal;
}
else
{
var selectVal = $("#bchained_child").val()+'_2.js';
alert(selectVal);
return selectVal;
}
}
$("#bchained_child").cascade("#bchained",{
ajax: {url: "" },
urlCallback: which
template: commonTemplate,
match: commonMatch
});
$("#bchained_sub_child").cascade("#bchained_child",{
ajax: {url: "" },
urlCallback: which
template: commonTemplate,
match: commonMatch
});
However, you should still try to trigger the original author of the
plugin to implement support for dynamic URLs.
by(e)
Stephan
2009/2/2 James <james.tilb...@gmail.com>:
>
> @boermans
>
> ajax: {url: $("select#chained").val() +'_1.js'},
>
> SHOULD work, but the element being returned is not the updated form
> element. It is the original element value from when the page
> initially loads.
>
> If anyone knows how to obtain the updated element value I would be
> most appreciative... :)
>
>
> Thanks!
>
> James
>
> Okay, so now I've realized that the notation has nothing to do with
> the problem.
>
> On Feb 2, 12:47 pm, James <james.tilb...@gmail.com> wrote:
>> Okay, I am tearing what hair I have left out.
>>
>> The following code should illustrate what exactly I'm trying to
>> accomplish, but with my feeble understanding of jQuery I can't seem to
>> be getting what I want:
>>
>> <script type="text/javascript">
>> function which (choice){
>> var selectVal =
>> document.getElementById('bchained').value;
>> if (choice == 'countryList')
>> {
>> selectVal += '_1.js';
>> alert(selectVal);
>> return selectVal;
>> }
>> else
>> {
>> selectVal += '_2.js';
>> alert(selectVal);
>> return selectVal;
>> }
>> }
>> jQuery(document).ready(function()
>> {
>> jQuery("#bchained_child").cascade("#bchained",{
>>
>> ajax: {url: yo=which('cityList') },
>> template: commonTemplate,
>> match: commonMatch
>> });
>>
>> jQuery("#bchained_sub_child").cascade("#bchained_child",{
>> ajax: {url: mo=which('cityList') },
>> template: commonTemplate,
>> match: commonMatch
>> });
>> });
>> </script>
>>
>> This seems to make perfectly logical sense, except that when my
>> function which() is called, the line
>>
>> document.getElementById('bchained').value;
>>
>> is ONLY returning the value of that element AS IT WAS WHEN THE PAGE
>> WAS FIRST LOADED.
>>
>> For some reason that I don't understand the value is not updated when
>> a different selection is made in the box (according to firebug).
>>
>> Please help me someone if you can!!!! :)
>>
>> I'm trying to hang in there.... ;)
>>
>> On Feb 2, 10:26 am, James <james.tilb...@gmail.com> wrote:
>>
>> > @boermans
>>
>> > The first thing I tried was your example:
>>
>> > ajax: {url: $("select#chained").val() +'_1.js'},
>>
>> > I don't think this works inside this structure, but then I'm not
>> > reallty sure how to test the variable INSIDE THIS STRUCTURE! :)
>>
>> > Here is my whole code now...
>>
>> > <script type="text/javascript">
>>
>> > var selectVal = $("select#bchained").val();
>> > var countryList = selectVal + '_1.js';
>> > var cityList = selectVal + '_2.js';
>> > alert (countryList); //just to test the varaible
>> > alert (cityList); //just to test the variable
>> > jQuery(document).ready(function()
>> > {
>> > jQuery("#bchained_child").cascade("#bchained",{
>> > ajax: {url: countryList},
>> > template: commonTemplate,
>> > match: commonMatch
>> > });
>> > alert(selectVal, jsonUrl);
>> >
>> > jQuery("#bchained_sub_child").cascade("#bchained_child",{
>> > ajax: {url: cityList },
>> > template: commonTemplate,
>> > match: commonMatch
>> > });
>> > });
>> > </script>
>>
>> > The two alerts pop up when the page is first loaded or reloaded and
>> > the variables are correct. However, I don't think they get changed
>> > when the value in the select box gets changed. In other words, that
>> > first variable declaration var selectVal = $("select#bchained").val();
>> > only happens when the page is LOADED/RELOADED, and not dynamically
>> > through the DOM.
>>
>> > I need to figure out how to get either a) those variables updated when
>> > a select box value changes, or b) some way to append my simple file
>> > extensions to the value inside the ajax: {url: ???} call.....
>>
>> > Is there a way to add a function inside the ajax: {url: } structure?
>>
>> > On Feb 2, 5:33 am, boermans <boerm...@gmail.com> wrote:
>>
>> > > On Feb 2, 5:20 pm, James <james.tilb...@gmail.com> wrote:
>>
>> > > > But let's say I want to append an extension to "pizza". For example I
>> > > > want "pizza.json", or "pizza_1.js".
>>
>> > > > How do I get this extra string text into the ajax option above?
>>
>> > > > I have tried + notation, various combinations of brackets, etc. But I
>> > > > just can't get it to work and can't find appropriate documentation
>> > > > anywhere on this.
>>
>> > > It could be useful to see your code - even if it's not working.
>>
>> > > Did it look anything like this?
>>
>> > > ajax: {url: $("select#chained").val() +'_1.js'},
>>
>> > > If that doesn't work, break it down:
>>
>> > > var selectVal = $("select#chained").val();
>> > > var jsonUrl = selectVal + '.json';
>>
>> > > and use the variable
>>
>> > > jQuery("#chained_sub_child").cascade("#chained_child",{
>> > > ajax: {url: jsonUrl},
>> > > template: commonTemplate,
>> > > match: commonMatch
>> > > });
>>
>> > > If that's not working you can try something like this to help reveal
>> > > where the problem is
>> > > console.log(selectVal, jsonUrl);
>>
>> > > Hope that gets you on the road :)
