Can't find certain elements with jQuery even though they are there

Question

I have the following HTML code stored as a variable:

<body>
    <div>
        <table>
            <field id='Contact Name' required>
                <exists>$value<br></exists>
                <notexists></notexists>
            </field>
            <field id='Job Role' required>
                <exists>$value<br></exists>
                <notexists></notexists>
            </field>
        </table>
    </div>
</body>

</html>

Now, what I'm trying to do is access this code and change the value of $value for each field based on inputs within my form and then render the final html inside of an iFrame.

Here is the JavaScript code I am using to do this:

function renderTemplate() {
    var template = $(selectedTemplate.html).contents(); //HTML code I have given above.
    $("input").each(function(index, input) {
        var element = $(input); //<input type="text" ref="Contact Name">
        if (element.attr("ref")) {
            var reference = element.attr("ref");
            var field = template.find("field[id='" + reference + "']");
            if (typeof(field) != undefined) {
                var exists = field.find("exists");
                var notExists = field.find("notexists");
                if (typeof(exists) != undefined && typeof(notexists) != undefined) {
                    if (element.val()) {
                        exists.html(exists.html().replace("$value", element.val()));
                    } else {
                        exists.html(notExists.html());
                    }
                    $('#signaturePreview').contents().find('html').html(template.html());
                }
            }
        }
    });
}

Now for whatever reason, it cannot find the fields with the selector I'm giving.

I did some testing with the chrome console, and it can't find any fields at all, even when I use:

template.find("field") // Gives 0 results.

there is no input in the html. also where is the console part? — guradio, Sep 05 '16 at 09:45
Those aren't valid HTML tags, you shouldn't be using them in the first place. — roberrrt-s, Sep 05 '16 at 09:46
@guradio Because that's the html I'm modifying, not the html in my actual page. The inputs are there, trust me. — ThePerplexedOne, Sep 05 '16 at 09:46
Ok, you have `//` then `var reference = element.attr("ref"); var field = template.find("field[id='" + reference + "']");` the `ref` value has a space in it, an id can't have a space - change it to `var field = template.find("field[ref='" + reference + "']");` — StudioTime, Sep 05 '16 at 09:49
Even though the elements aren't valid, jQuery should still find them. Example: https://jsfiddle.net/xn8zabrd/ - as Darren says, ID's can't have spaces. Have you tried simply `console.log(template)` ? — rorymorris89, Sep 05 '16 at 09:51
@DarrenSweeney The fields don't have a ref attribute. The inputs do. That's how I'm mapping the inputs to my elements. — ThePerplexedOne, Sep 05 '16 at 09:58

score 0 · Accepted Answer · edited May 23 '17 at 12:01

$("#..").contents().find("..") will always return empty array, don't use .contents, ie:

var template = $(selectedTemplate.html);

To address some other issues:

1 spaces in IDs are not valid HTML, but you can select them using [id= https://stackoverflow.com/a/701958/2181514 .

2 jquery .find will return an empty array [], not undefined when it can't find anything that matches. You would normall check length, eg:

var items = $("body").find("li.item");
if (items.length > 0) {
    ...

Can't find certain elements with jQuery even though they are there

1 Answers1