1

I'm using a widget script from a federated search service:

<script type="text/javascript" id="s9f5b2bb09b74013279b22ae8d1b2df50" src="http://uleth.summon.serialssolutions.com/widgets/box.js"></script>
<script type="text/javascript">new SummonCustomSearchBox({"id":"#s9f5b2bb09b74013279b22ae8d1b2df50","params":{},"colors":{},"searchbutton_text":"Search","suggest":"true","popup":"true"})</script>

Which generates the following HTML when the page loads:

<form id="s9f5b2bb09b74013279b22ae8d1b2df50" method="get" action="http://uleth.summon.serialssolutions.com/search" class="summon-search-widget" accept-charset="utf-8" target="_blank">
<input name="utf8" value="✓" type="hidden">
<div class="summon-search-box">
<input class="summon-search-field" name="s.q" autocomplete="off" placeholder="" data-boxwidth="" type="text">
<input value="Search" class="summon-search-submit button-website" type="submit">
</div>
</form>

I'm trying to use the following jquery to insert some placeholder test, but it' isn't working...

$(".summon-search-field").attr("placeholder", "Search for books, articles, videos...");

The jquery works on the generated HTML in this fiddle, but for some reason it can't get it to work on the page using the widget script. I can get it to work with a .click() function, but I can't get it to load with $(document).ready() or window.onload.

I apologize for not making a fiddle using the script as an external resource, but it doesn't work with https://.

How do I get my placeholder text to remain?

Community
  • 1
  • 1
Lei-Lonnie
  • 794
  • 11
  • 34
  • Seems like you forgot to put the code in a `window.onload` – Downgoat Apr 24 '15 at 21:19
  • @vihan1086 - No, I've tried `window.onload` and `$(document).ready()`. – Lei-Lonnie Apr 24 '15 at 21:30
  • Try: `$(window).load(function(){setTimeout(function () { /* Code Here */ },1000);` messy but to see if it'll work. The element might be created at different times. The `setTimeout` waits a second before executing the code which should be plenty for XHRs and other Javascript to finish – Downgoat Apr 24 '15 at 21:32
  • 3
    @ShemSeger seems like that script creates those elements some time later than document is ready. Try adding setTimeout or using callback of that script, or checking if element exists with setInterval until the element exists – igor Apr 24 '15 at 21:33
  • @vihan1086 - `$(window).load(function(){` worked! Put it in an answer and I'll give you some rep. – Lei-Lonnie Apr 24 '15 at 21:35

1 Answers1

3

JSFiddle uses $(window).load(function(){

This waits for the entire page to load. If you experience further errors. Add:

$(window).load(function(){setTimeout(function () {
     //Code
},1)});

$(window).load()

Community
  • 1
  • 1
Downgoat
  • 13,771
  • 5
  • 46
  • 69