1

Using Tumult Hype, I built a date range selector, and I'm currently adding the functionality to it... however, Hype likes to put it's HTML snippets into iFrames.

I'm having trouble targeting an input field that is in an iframe, so I can populate it with the current year. I'm also not able to give the iframe an ID either within Hype.

The path to the input is like this:

#startyear > div > #start-year-text > iframe > html > body > input#start-year-placeholder

obviously, using jQuery, this doesn't work:

$("#start-year-placeholder").attr("placeholder","1973");

neither does this:

$("#startyear > div > #start-year-text > iframe > html > body > input#start-year-placeholder").attr("placeholder","1973");

From the web page linked below, you'll see the first date range selectors. I'm trying to set the placeholder text attribute of the first year input dynamically. Right now it is hardcoded.

You can see the full HTML here: http://aceroinc.ca/question/footer.html

Livi17
  • 1,620
  • 3
  • 25
  • 43

1 Answers1

2

you can target it like this:

$('iframe').contents().find('input#start-year-placeholder')

note: this works on your page but in general if you're going to add more iframes, you may need to adjust the iframe selector. Also, this only works since the iframe is the same domain as the parent page.

CrayonViolent
  • 32,111
  • 5
  • 56
  • 79
  • When I tried this: `$('iframe').contents().find('#start-year-placeholder')attr("placeholder","1973");` I get an *Uncaught SyntaxError: Unexpected identifier * error. – Livi17 Nov 11 '13 at 04:52
  • you are missing the dot just before the `attr` – CrayonViolent Nov 11 '13 at 04:56
  • @livi1717 should be `$('iframe').contents().find('input#start-year-placeholder').attr("placeholder","1973"‌​);` – CrayonViolent Nov 11 '13 at 04:57
  • oops. OK, after adding the dot, I do not get an error, but the placeholder text is not changing. – Livi17 Nov 11 '13 at 04:58
  • umm okay, well when i go to your page and put that in the js console, i see it changing.. perhaps you should provide more details about how you are attempting to call the code? – CrayonViolent Nov 11 '13 at 04:59
  • in the body tag, onload, I am calling the "intitializeFooter()" function which is in the footer-functions.js file here: http://aceroinc.ca/question/js/footer-functions.js – Livi17 Nov 11 '13 at 05:05
  • actually it works! It works online, but not locally. – Livi17 Nov 11 '13 at 05:11
  • I think I may have to build these forms the normal way, and not using Hype. It works in Chrome and Firefox, but not in Safari. If I refresh in chrome it only works every 2nd time. Thanks for your help though! – Livi17 Nov 11 '13 at 05:19