template causing throw/catch

[Phil Petree]

Using Prototype version 1.6.1 (I know everyone is up to 1.7 but we can't upgrade at this time)

Code looks like this:

 

var selectThis;

var radioTemplate = new Template('input[type=radio][name=#{selectID}][value=#{selectValue}]');

var bValue = 1;  // this is actually set from the rc of a function and is absolutely 1 but it shouldn't matter

selectThis = {selectID: 'owner', selectValue: bValue };
$$(radioTemplate.evaluate(selectThis))[0].writeAttribute("checked", "checked");

the last line causes a throw and all processing stops. any ideas?

 

Thanks,

 

Phil

[Walter Lee Davis]

Sure, this is something I have struggled with as well. The return from
a Template.evaluate call is not the generated object, but some other
form of return (probably a boolean success or something like that --
not exactly sure).

If you need to get access to the object immediately after creating it,
you may want to use the new Element() syntax instead of Template,
because this:

var foo = new Element('div',{id:'bar'});

will return a handle to the element, even before you add it to the
page, while Template.evaluate may need you to pause a beat before $
('bar') will access the element from your page after you've inserted it.

Walter

> --
> You received this message because you are subscribed to the Google
> Groups "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-s...@googlegroups.com
> .
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
> .

[Phil Petree]

Problem is, this is simply NOT returning!

And there is 4 lines of unrelated code between the NEW template call and the two line from my earlier message.

[Phil Petree]

var bOwner = 1;

var radioTemplate = new Template('input[type=radio][name=#{selectID}][value=#{selectValue}]');

$('ajRecord').value = 1;
$('ajacct_id').value = 1;
$('ajhoa_id').value = 1;
selectThis = {selectID: 'owner', selectValue: bOwner };
$$(radioTemplate.evaluate(selectThis))[0].writeAttribute("checked", "checked");  // blows up!

 

// this works but we prefer to use the template for brevity/bandwidth sake

if(bOwner > 0 )
{
  $('ajowner').writeAttribute("checked", "checked");
}
else  
  $$("input[type=radio][name='owner'][value='false']")[0].writeAttribute("checked", "checked");

On Sun, Apr 17, 2011 at 6:45 PM, Walter Lee Davis <wa...@wdstudio.com> wrote:

Sure, this is something I have struggled with as well. The return from a Template.evaluate call is not the generated object, but some other form of return (probably a boolean success or something like that -- not exactly sure).

If you need to get access to the object immediately after creating it, you may want to use the new Element() syntax instead of Template, because this:

var foo = new Element('div',{id:'bar'});

will return a handle to the element, even before you add it to the page, while Template.evaluate may need you to pause a beat before $('bar') will access the element from your page after you've inserted it.

[T.J. Crowder]

Hi,

> $$(radioTemplate.evaluate(selectThis))[0].writeAttribute("checked",
> "checked");  // blows up!

The first step is to find out *what part* is blowing up. Break the
statement up into its component parts:

var selector = radioTemplate.evaluate(selectThis);
var list = $$(selector);
var element = list[0];
element.writeAttribute("checked", "checked");

...and walk through with a debugger[1] and see what things look like
at each stage. According to your quoted code, the value of `selector`
once you've done the `evaluate` _will_ be "input[type=radio]
[name=owner][value=1]" (see this: [2]). I'm fairly sure templates have
nothing to do with what's going wrong. (My money is on that selector
not matching anything, hence indexing into it giving you `undefined`,
which you're then trying to call a function on. So the question is:
Why isn't it matching anything.)

[1] http://blog.niftysnippets.org/2011/03/no-excuse.html
[2] http://jsbin.com/owaqa3

FWIW,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

On Apr 18, 1:30 am, Phil Petree <phil.pet...@gmail.com> wrote:
> var bOwner = 1;
> var radioTemplate = new
> Template('input[type=radio][name=#{selectID}][value=#{selectValue}]');
> $('ajRecord').value = 1;
> $('ajacct_id').value = 1;
> $('ajhoa_id').value = 1;
> selectThis = {selectID: 'owner', selectValue: bOwner };
> $$(radioTemplate.evaluate(selectThis))[0].writeAttribute("checked",
> "checked");  // blows up!
>
> // this works but we prefer to use the template for brevity/bandwidth sake
> if(bOwner > 0 )
> {
>   $('ajowner').writeAttribute("checked", "checked");}
>
> else
>

> $$("input[type=radio][name='owner'][value='false']")[0].writeAttribute("che cked",

[T.J. Crowder]

Walter,

> Sure, this is something I have struggled with as well. The return from  
> a Template.evaluate call is not the generated object, but some other  
> form of return (probably a boolean success or something like that --  
> not exactly sure).

`Template.evaluate`[1] doesn't create objects, it generates strings.
It accepts an input object and evaluates the template according to the
properties on that object, returning the generated string. It has
nothing to do with creating elements, although it's frequently used to
create HTML strings you might then pass into `Element.update`. But
that's just one use; Phil's using it to create a selector.

[1] http://api.prototypejs.org/language/Template/

--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

[Phil Petree]

TJ You're right... it's showing the element as undefined but I'm not sure why..

 

HTML:

<label id='labowner' for='ajowner'>owner</label>

<input type='radio' name='owner' id='ajowner' value='true'/> True

<input type='radio' name='owner' id='ajowner' value='false'/> False

RESULTS from your code:

 

if(bOwner)    
  selectThis = {selectID: 'ajowner', selectValue: 'true' };    // this is what gets set as bOwner is '1'
else
  selectThis = {selectID: 'ajowner', selectValue: 'false' };

var selector = radioTemplate.evaluate(selectThis);
// selectThis = object {selectID="ajowner", selectValue="true"}

 

var selector = radioTemplate.evaluate(selectThis);
// "input[type=radio][name=ajowner][value=true]"

 

var list = $$(selector);
// list = []

 

var element = list[0];

// undefined - throws here!

 

These work:

$('ajowner').writeAttribute("checked", "checked");  // sets the 'true' button
$$("input[type=radio][name='owner'][value='false']")[0].writeAttribute("checked", "checked");  // will set either button

[T.J. Crowder]

Hi,

Your code is looking for an element with `name` equal to "ajowner",
but the `name` on your radio buttons is "owner", not "ajowner".

Also, note that your HTML is invalid. You have two elements with the
`id` (not `name`) "ajowner". `id` values MUST be unique on the page[1]

[1] http://www.w3.org/TR/html5/elements.html#the-id-attribute

HTH,

-- T.J. :-)

On Apr 18, 3:43 pm, Phil Petree <phil.pet...@gmail.com> wrote:
> TJ You're right... it's showing the element as undefined but I'm not sure
> why..
>
> HTML:
> <label id='labowner' for='ajowner'>owner</label>
> <input type='radio' name='owner' id='ajowner' value='true'/> True
> <input type='radio' name='owner' id='ajowner' value='false'/> False
> RESULTS from your code:
>
> if(bOwner)
>   selectThis = {selectID: 'ajowner', selectValue: 'true' };    // this is
> what gets set as bOwner is '1'
> else
>   selectThis = {selectID: 'ajowner', selectValue: 'false' };
>  var selector = radioTemplate.evaluate(selectThis);
> // selectThis = object {selectID="ajowner", selectValue="true"}
>
> var selector = radioTemplate.evaluate(selectThis);
> // "input[type=radio][name=ajowner][value=true]"
>
> var list = $$(selector);
> // list = []
>
> var element = list[0];
> // undefined - throws here!
>
> These work:
> $('ajowner').writeAttribute("checked", "checked");  // sets the 'true'
> button

> $$("input[type=radio][name='owner'][value='false']")[0].writeAttribute("che cked",

> "checked");  // will set either button

[Phil Petree]

This is one of those prototype "things"... selectID one would expect to be the elements ID and not its name! LOL

 

Good catch on the html... I'll fix that in the ajax forms generator.

 

got it working in firefox, I'll have it fixed in ie before too much longer...

 

Walter & TJ, thanks for all your help!

[T.J. Crowder]

Hi,

> This is one of those prototype "things"... selectID one would expect to be
> the elements ID and not its name! LOL

I'm not following you. "selectId" is nothing to do with Prototype,
it's the name you (or whoever the author of that code is) chose for
the property name in that template. It's not something that's been
named by the library. Or am I missing something?

-- T.J.