CODEWITHSUNDEEP
javascriptjqueryhtml
Lei-Lonnie
Lei-Lonnie

Reputation: 784

How do you change attributes in HTML that's generated by a script?

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?

Upvotes: 1

Views: 78

Answers (1)

Downgoat
Downgoat

Reputation: 14361

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()

Upvotes: 3

Related Questions