I cannot get the fields from my underscore template

Question

I have a code, that dynamically append form field groups in a page using the underscore framework and I have a problem with getting the input fields of the template, so I don't know if I am doing something wrong that I cannot see.

The underscore template is like the following:

<script type="text/template" id="redirection_url_element">
    <tr>
        <td>
            <input type="text" class="regular-text" placeholder="<?php esc_attr_e( 'Enter the redirection URL', 'WPL' ); ?>" value="<%= (typeof( redirection_url ) !== 'undefined') ? redirection_url : '' %>" data-name="redirection_url" data-group="redirection" />
        </td>
        <td>
            <input type="text" class="regular-text" placeholder="<?php esc_attr_e( 'Weight', 'WPL' ); ?>" value="<%= (typeof( redirection_weight ) !== 'undefined') ? redirection_weight : '' %>" data-name="redirection_weight" data-group="redirection" />
        </td>
        <td>
            <i class="remove-parent-row">&times;</i>
        </td>
    </tr>
</script>

So in my javascript code I do the following:

console.log ( $ ( '#redirection_url_element' ).find( ':input' ) );

and I get the following result:

prevObject: e.fn.init[1], context: document, selector: "#redirection_url_element :input"]
    context: document
    length: 0
    prevObject: e.fn.init[1]
    selector: "#redirection_url_element :input"
    __proto__: m[0]

and it seem that it cannot find the input fields. If you see the length is 0.

Do you think I am doing something wrong ? Is there any error that I cannot see ?

UPDATE #1

The way I use the template is like following:

var $template_result = _.template ( $ ( '#redirection_url_element' ).html (), $data )

This is how I translate the template into HTML on the fly and I don't use the backbone. I just inject the $template_result into the destination element.

UPDATE #2

So, @Wolff, the table looks like that:

<table class="repeater_table">
    <tbody id="redirection_url_container">
        <tr>
            <td>
                <input type="text" class="regular-text" placeholder="Enter the redirection URL" value="" data-name="redirection_url" data-group="redirection">
            </td>
            <td>
                <input type="text" class="regular-text" placeholder="Weight" value="" data-name="redirection_weight" data-group="redirection">
            </td>
            <td>
                <i class="remove-parent-row">×</i>
            </td>
        </tr>
    </tbody>
</table>

UPDATE #3

Ok, I found the solution thanks to @Marcos Pérez Gude note and it is like following:

console.log ( $( $.parseHTML( $ ( '#redirection_url_element' ).text() ) ).find( ':input' ) );

I know it is somehow ugly, but it does the work for me. Do you think is there any better way to achive the above ?

Only as a note, in the template you should avoid the logic of the app. For example: `value="<%= (typeof( redirection_weight ) !== 'undefined') ? redirection_weight : '' %>" `. The ternary condition you can write in the Backbone View and pass the correct value to template, that you must to write `value="<%= redirection_weight%>"` and it can be empty with no problem. — Marcos Pérez Gude, Dec 01 '15 at 11:41
@MarcosPérezGude don't use `backbone`. I use `jQuery` and I translate the `underscore` on the fly. — KodeFor.Me, Dec 01 '15 at 11:53
@MerianosNikos You have to target in jQuery rendered HTML, so how it looks like? — A. Wolff, Dec 01 '15 at 11:54
@Wolff I have update my question, so do you think this answer your comment or you are asking for something different ? — KodeFor.Me, Dec 01 '15 at 11:58
@MerianosNikos I don't know this template BUT if you inspect your table in browser once it is rendered, how it looks like? This was my question. As a side note `@Wolff` doesn't send me message, `@A.Wolff` would — A. Wolff, Dec 01 '15 at 12:02
So what is your goal? In your third update, you aren't targeting elements in the DOM but in a jq variable used as wrapper. Now if your goal is to target elemnts in the DOM, looks obvious you weren't using relevant ID selector, should be: `$('#redirection_url_container').find(':input');`. If now your goal is to target elements before they are rendered, using `$.parseHTML( $ ( '#redirection_url_element' ).text() )` is a good solution, better than just using `$( $ ( '#redirection_url_element' ).text() )` — A. Wolff, Dec 01 '15 at 12:26
@Wolff this is what I need, to catch the input fields before they get injected into the HTML. Sorry if I confused you, but this is the target from the beggining. — KodeFor.Me, Dec 01 '15 at 12:30
@MerianosNikos So ya, i completly misunderstood question at the beginning. Now it makes sense :) — A. Wolff, Dec 01 '15 at 12:31
;) Anyway thanks a lot for your assistace and the time you spend on my question :) — KodeFor.Me, Dec 01 '15 at 12:35

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

You can't select things inside <script> tags because they aren't part of the DOM structure. There's a thread about it here.

Did you try to run the selector against the destination element?

Sample:

<div id="test"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
  $('#test').html('<span id="foo">Foo bar</span>');
  console.log($('#foo'));
});
</script>

Bear in mind browsers remove tr elements if they aren't inside table elements. See here.

edited May 23 '17 at 12:30

Community

1
1

answered Dec 01 '15 at 12:08

Bernardo Bosak de Rezende

578
7
13

The problem has been solved. If you see the third update of my question you can see the solution. Farthermore I think that maybe your answer is out of scope, so I don't downvote :) But keep in mind you may get downvoted by other members. Thanks a lot for your efort. – KodeFor.Me Dec 01 '15 at 12:11

score -1 · Answer 2 · edited Dec 01 '15 at 12:10

-1

try

$( '#redirection_url_element' ).find( 'input' )

edited Dec 01 '15 at 12:10

hiro protagonist

44,693
14
86
111

answered Dec 01 '15 at 11:40

Matteo Rubini

831
5
9

why downvote this? I think that is better this than `find(':input')` – Marcos Pérez Gude Dec 01 '15 at 11:42
It could be better regarding perf but doesn't explain OP's issue for sure. And maybe OP doesn't have just `` as form control and still wish to select all of them unregarding type. So in this case, [:input](https://api.jquery.com/input-selector/) would be better – A. Wolff Dec 01 '15 at 11:43
It's not me that downvoted you, but already I have try this and make no sence. – KodeFor.Me Dec 01 '15 at 11:51
1

Ok, thanks for explanation @A.Wolff. Obviously, this is a low quality answer, but I don't understand the downvote. – Marcos Pérez Gude Dec 01 '15 at 12:00
I did it and still didn't work. I found the solution and it is available on my third update of my question. Thanks for your efort. – KodeFor.Me Dec 01 '15 at 12:11

I cannot get the fields from my underscore template

2 Answers2